03webpack之loader配置和使用

loader-配置处理css样式表的第三方loader

1. main.js中 使用 import 语法，导入css样式表
   import './css/index.css'
2. webpack 默认只能打包 js 文件，无法处理非 js 类型文件，需按照 loader 加载器
3. 打包css , 安装 cnmp i style-loader css-loader -D
4. 在 webpack.config.js 配置文件，新增一个配置节点， module 对象，rules 属性，存放了第三方模块加载器

module:{
	rules:[ //第三方模块的匹配规则
		{test:/\.css$/,use:['style-loader','css-loader']}
	]
}

注意：webpack 处理第三方文件 loader 执行顺序从右到左

webpack中url-loader 的使用

默认情况下，webpack无法处理css中的 url 地址
cnpm i url-loader file-loader -D

module:{
	rules:[ //第三方模块的匹配规则
		{test:/\.css$/,use:['style-loader','css-loader']}
		{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'}
		//limit 表示图片的大小，单位 byte, 如果引用的图片大于等于此值，则不转为base64字符串
	]
}

webpack中 babel 的配置

• webpack 中，默认只能处理部分 ES6 语法，需要安装第三方 loader 来处理
• 第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
• 第二套包：cnpm i babel-preset-env babel-parset-stage-0 -D
• 在webpack配置文件，在 module 节点下的 rules 数组中，添加一个新的匹配规则：

{test:/.js$/,use:'babel-loader',exclude:/node_modules /} //注意排除node_modules

• 在项目根目录中，新建一个 .babelrc 的babel配置文件，为json格式（不能有注释，字符串双引号）

{
	"presets":["env","stage-0"],
	"plugins":["transform-runtime"]
}