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 在內的預處理器。