Webpack v4 基本使用筆記

本文章合 Ant Design 之 MUI.js 之 chainWebpack 設定和 Webpack.config.js 一同紀錄。

V4 注意事項

原本 ExtractTextWebpackPlugin 功能官方已告知在 4.0 後應該改用 MiniCssExtractPlugin (見參考[1])。

v4 部分 webpack.config.js 寫法已經變更，會在下方做提示。

Webpack

Webpack 最主要用來解決令一個網站專案的一大堆 JS 能夠打包成單一的 js 檔案執行，加快仔入效率及專案整合，而且還可以使用 ES2015 以上，當前還不直接支持的語法，利用 babel 外掛解析後的內打包變成網站，也就是說 Webpack 也可以安裝其他的 plugins 來支援專案開發。

Webpack 安裝:

npm install -g webpack --save-dev

Webpack 專案

要令 webpack 自動打包專案之前，要先設定一個主要的 js 檔，使用 npm init 來產生一個 package.json ，並在其中描述 main 是哪一個 .js 檔案，然後可以直接使用指令:

webpack

或是 (npx webpack)

就會自動處理並可以看到有一個 dist 資料夾有 bundle.js

或是可以直接單一編譯一個 js:

webpack ./helloworld.js

Webpack Configuration 設定檔案

Webpack 中最重要的就是 webpack config 檔案，其中設定檔預設名稱 webpack.config.js 並且會預設放在主目錄中，使用指令時會自動帶入。

本文之目的為將 .css 檔案及 .js 檔案自動編譯打包，本文使用之設定檔案，其中有四個主要的功能，將做解說，其餘部分可以參考官方之說明文件 (見參考[2])。

簡單先將紹 webpack 重要的流程，也是 webpack 的概念:

設定中有: entry, module, loaders, plugins, output 這幾項主要的設定參數。

• entry: 設定主要的 js application 進入點。
• module: 設定編譯的檔案會經過哪些模組處理 (可以想成是編譯時，會自動尋找目標的副檔名拿到 module(可能為第三方模組做處理)。
• loaders: 指定使用哪些模組(外掛)，被 module 呼叫，把匹配的檔案進行處理轉換。
• plugins: 指定外來的模組(外掛)，以及放置一些參數設定。
• output: 指定輸出的檔案要放在哪邊。

而 webpack 執行的流程就是: entry -> module -> loaders -> plugins -> output。

直接從本文章目的設定檔來看意義:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry : './src/main.js', //設定主要的 js 是哪一個

    output: { //設定輸出的路徑及檔案名稱
        path : path.resolve(__dirname, 'dist'),
        filename : 'bundle.js'
    },


    module: { //新增模組
        rules: [ // rules 是 4.0 的用法，裡面的多個陣列值就是各個模組
          {
            test: /\.js$/, //test 就是用來匹配哪些檔案要用的，這裡是匹配 .js 檔案
            exclude: /node_modules/, //指定不包含 node_modules 資料夾
            use: { //被匹配的檔案就會使用此 loaders
              loader: "babel-loader" //支援 ES2015 語法轉換的 loader
            }
          },
          {
                test:/\.css$/, //匹配所有 .css 檔案
                use:[MiniCssExtractPlugin.loader,'css-loader'] //使用 css-loader 來解析 css, 並使用 mini-css-extract-plugin 來把 css 原始資料輸出
            }
        ]
      },

      plugins: [
        new MiniCssExtractPlugin({ //新增 mini-css-extract-plugin 此外掛功能及參數
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: "./css/style.css", //指定輸出的檔案名稱或路徑
          path: path.resolve(__dirname , 'dist/css')
        })
      ],
}

本文章使用的 mini-css-extract-plugin 請自行安裝:

npm install mini-css-extract-plugin --save-dev

檔案完成後，直接使用 : ”webpack“ 就會自動開始編譯。

Ant Design 設定 css-extract 方法

這是額外紀錄的部分，因為 ant design 框架的 config 設定檔案很特別，而且也必須使用 webpack 設定來處理輸出 css 檔案:

注意，此文件格式不屬於 webpack.config.js。

export default { disableCSSModules: true, //關閉 ant design 預設的 css module singular: true, chainWebpack(config) { //使用 webpack config 設定 config.optimization.splitChunks({ //用切割功能的方法輸出打包的 css cacheGroups: { styles: { name: 'styles', test: /\.(css|less)$/, chunks: 'async', minChunks: 1, minSize: 0, } }, }); }, plugins: [ ['umi-plugin-react', { antd: true, dynamicImport: { //使用動態 chunk name 給分段的檔案 webpackChunkName: true, }, }] ], routes: [{ path: '/hello', component: './HelloWorld', }, { path: '/', component: './Index.js' }] };

Reference:
[1] https://webpack.js.org/plugins/extract-text-webpack-plugin/#usage-example-with-css
[2] https://webpack.js.org/concepts/

https://webpack.js.org/plugins/mini-css-extract-plugin/
https://webpack.js.org/
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/493
https://medium.com/a-beginners-guide-for-webpack-2/webpack-loaders-css-and-sass-2cc0079b5b3a
https://www.youtube.com/watch?v=L1QMrPsPV5w
https://www.youtube.com/watch?v=HNRt0lODCQM
https://www.valentinog.com/blog/webpack-tutorial/
https://github.com/webpack/webpack/issues/6858
https://github.com/webpack-contrib/mini-css-extract-plugin/issues/37

---
ant design:
https://github.com/ant-design/babel-plugin-import/issues/94
https://github.com/umijs/umi/issues/1417
https://github.com/umijs/umi/issues/1421
https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-all-css-in-a-single-file
https://github.com/umijs/umi/blob/master/docs/guide/faq.md
https://github.com/umijs/umi/tree/master/docs/guide
https://umijs.org/config/
https://github.com/ant-design/babel-plugin-import/issues/57
https://zhuanlan.zhihu.com/p/43588942
https://github.com/umijs/umi/tree/master/docs/config
https://www.youtube.com/channel/UC-8QAzbLcRglXeN_MY9blyw