Vue-cli 中 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 在内的预处理器。