Vue-cli 中 Webpack 配置优化（二）
Webpack 系列：
一、静态资源拷贝
对于项目中的一些文件，不需要打包，那么这些文件就直接复制到打包目录就好。
使用的插件是：copy-webpack-plugin
安装：
npm install copy-webpack-plugin -D
使用：
Vue-cli 2.x 的配置使用
//webpack.config.js const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { plugins: [ new CopyWebpackPlugin([ { from: path.resolve(__dirname,'../static'), to: path.resolve(__dirname, 'dist'), flatten: true, } ], { ignore: ['other.js'] }) ] }
Vue-cli 3.x 下默认是会把这个插件集成进去，所以不需要做配置就可以用。
对于配置信息：
1、可以配置多个（参数是数组）
2、from：要复制的目录
3、to：复制的目的地
4、flatten：设置为 true 的时候，会删除路径，只复制文件过去
5、ignor：配置要忽略的文件（配置后，这些文件就不会复制）
二、CSS 文件处理
CSS 文件的处理主要分几个部分：
1、CSS 文件编译（包含预处理器编译）
2、兼容性处理
3、CSS 文件抽离和压缩
下面分别对这些进行说明（下面都是 Vue-cli 2.x 下的配置）
1、CSS文件编译
下面是 CSS 最基本的配置
module.exports = { module: { rules: [ // loader 详细配置 // 每一种文件必须写一个单独的 loader 配置 { // test 匹配哪些文件（以结尾后缀匹配），使用的正则表达式 test: /\.css$/, // 要使用的 loader 模块 use: [ // use 数组中 loader 的执行顺序是从右到左，从下到上的 // 创建 style 标签，把 js 文件中的样式资源添加进去，再添加到 head 中生效（下面 css-loader 完成的结果） 'style-loader', // 用于,将 css 编译成 commonJS 模块并加载到 js 文件中，里面内容是样式字符串 'css-loader', ], }, { test: /\.less$/, use: [ 'style-loader', 'css-loader', // 用于将 less 文件编译为 css，需要下载 less-loader 和 less 'less-loader', ], }, ], } }
2、CSS 兼容性处理
在工程化时代，不需要再自己动手写一些兼容性的问题，下面的配置就是通过第三方的配置处理
module.exports = { module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', /** * css 兼容性处理：postcss --> postcss-loader postcss-preset-env * * postcss-preset-env：帮助 postcss 找到 package.json 中的 browserslist 的配置，通过配置加载指定的 css 兼容性样式 * * browserslist 可以在 github 上面查找具体的更全配置 * 下面的两个默认的是使用 production 环境的 * 去指定这个环境的配置是 node 的环境变量：process.env.NODE_ENV = 'development'
* browserslist 可以在 package.json 中配置，也可以单独一个 .browserslistrc 文件中配置 * "browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.2%", "not dead", "not op_mini all" ] } */ // 使用 loader 默认配置 // 'postcss-loader', // 修改 loader 配置 { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ // postcss 的 plugins require('postcss-preset-env')(), ], }, }, ], }, ], } }
3、CSS 文件的抽离和压缩
在使用了上面的兼容性处理，或者随着项目越来越大，CSS 文件体量也会越来越大，就需要单独拿出来，并做压缩处理。
这里主要用到的是两个插件：mini-css-extract-plugin、optimize-css-assets-webpack-plugin
配置如下：
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
// MiniCssExtractPlugin.loader 用于代替上面的 style-loader，把 css 文件单独提取出来
MiniCssExtractPlugin.loader,
// 缓存 css 文件
{
loader: 'cache-loader',
options: {
cacheDirectory: '../../node_modules/.cache/css'
}
},
// 将 css 整合到 js 文件中
'css-loader'
]
}
]
},
plugins: [
// 提取 css 文件 plugin
new MiniCssExtractPlugin({
// 重命名输出文件名
filename: 'css/built.css'
})
]
}
这里注意的点是：style-loader 被 MiniCssExtractPlugin.loader 替换
4、Vue-cli 3.x 的使用
上面的配置都是基于 Vue-cli 2.x 的，在 Vue-cli 3.x 中这些配置比较简单：
vue.config.js module.exports = { css: { // 是否开启 css 预处理文件（不开启的话，预处理器的样式不能生效） requireModuleExtension: true, // 使用 css 分离 extract: true, // 是否开启 css source-map sourceMap: false, // 向 CSS 相关的 loader 传递选项 loaderOptions: {} } }
在Vue-cli 3.x 官方文档中也有说：Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。
