从零搭建vue2+webpack3项目-下

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

1. src/css/下建立 index.css文件
2. 在main.js 导入index.css文件 ： import './css/index.css'
3. 导入后保存报错，没有解析css文件的loader,解决：

• 注意: webpack默认只能处理 JS 文件
• 跟目录cmd: npm i style-loader css-loader -D //安装处理css的loader
• 打开webpack.config.js 配置文件，新增一个配置节点为 module：

plugins:[],
module:{ //这个节点配置所有的第三方模块 加载器
	roles: [ //所有第三方模块的匹配规则
		{test: /\.css$/, use:['style-loader','css-loader']} //loader调用规则从右到左
	]
}

配置处理 less 文件的loader

1. src/css/下建立 index.less文件
2. 在main.js 导入index.css文件 ： import './css/index.less'

• 跟目录cmd: npm i less-loader -D //安装处理css的loader
• 如果提示需要less依赖再安装：npm i less -D //less 是less-loader的内部依赖，无需定义到webpack配置文件中去
• 打开webpack.config.js 配置文件，新增一个配置节点为 module：

plugins:[],
module:{ //这个节点配置所有的第三方模块 加载器
	roles: [ //所有第三方模块的匹配规则
		{test: /\.css$/, use:['style-loader','css-loader']} //loader调用规则从右到左
		{test: /\.less$/, use:['style-loader','css-loader','less-loader']}  //
	]
}

配置处理 scss 文件的loader

同理：npm i sass-loader -D //注意此处是 sass

cnpm i node-sass -D //此依赖一般用npm安装不上，此处用cnpm

plugins:[],
module:{ //这个节点配置所有的第三方模块 加载器
	roles: [ //所有第三方模块的匹配规则
		{test: /\.css$/, use:['style-loader','css-loader']} //loader调用规则从右到左
		{test: /\.less$/, use:['style-loader','css-loader','less-loader']}  //
		{test: /\.scss$/, use:['style-loader','css-loader','sass-loader']}  
	]
}

url-loader 的使用

• 原因：由于webpack 无法处理 css 文件中的 url地址，不管是图片还是字体库
• 解决：cnpm i url-loader file-loader -D //file-loader 为内部依赖

plugins:[],
module:{ //这个节点配置所有的第三方模块 加载器
	roles: [ //所有第三方模块的匹配规则
		...
		{test: /\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'} //use一个的话，用字符串格式就可以;limit设置图片大于7631字节不以base64来展示;name设置以原名字命名并以一个hash值为前缀，防止图片名称一致被覆盖
		{test: /\.{ttf|eot|svg|woff|woff2}$/, use:'url-loader'} //解析字体
	]
}

webpack 中 babel 的配置

• 原因：在webpack中只能处理一部分 ES6的新语法，所以需要借助第三方loader来将高级语法转化为低级语法
• 解决：安装如下两套包

1. 第一套： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
2. 第二套： cnpm i babel-preset-env babel-preset-stage-0 -D
3. 在webpack配置文件，在module节点下的rules数组中，添加一个新的匹配规则：
   {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
   注意：必须排除node_modules目录，否则babel会把node_modules中所有的第三方JS文件，都打包编译，这样会非常消耗CPU，同时打包非常慢，且项目无法正常运行
4. 在根目录新建 .babelrc 的Babel配置文件，此文件属于JSON格式，所以配置的时候必须符合JSON语法规范（不能写注释；字符串必须双引号）

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