Webpack｜教學：分離webapck的開發模式

在上一篇和大家介紹了package.json與webpack.config.js的設定文件說明，這篇則是要來談談把webpack.config.js拆解成共用檔、預覽檔以及Build檔。

那麼，為什麼Webpack需要拆解成不同的config呢? 主要是因為Webpack的mode模式分為none、production和development，簡單的說 production 模式預設開啟了很多程式碼的優化，而development 模式優化了構建的速度，所以建構當中需要自行配置檔案的優化跟設定，詳細的對照圖可以參考這裡官網有附上簡略的比對圖。

那在設定webpack.config.js時，就可以針對不同的開發mode去編寫各自的設定檔囉！

在分離webpack.config.js的設定檔前，我們需要先安裝webpack-merge

npm i webpack-merge

借助webpack-merge 將共用檔引入到production和developmen模式的設定檔中，所以你需要：

const webpackMerge = require('webpack-merge'); // 啟動webpack-merge
const commonConfig = require('./webpack.common.js'); //引入共用檔

Step1.共用檔的設定

共用檔通常會將入口、出口以及引入的檔案格式規則編寫進來

const webpack = require('webpack');
module.exports = {
    entry: {
        ...
    },
    output: {
        ...
    },
    module: {
      ...
    }
}

完整的共用檔的範例

Step2.預覽檔的設定

預覽檔通常是用來建立本地端的預覽主機也就是Live Loading，可以在這裡控制虛擬主機的port和熱支援以及其他虛擬主機的設定，而webpack devServer也可以支援proxy，來實現本地端串接api的測試，深入介紹devServer的文章就請記得關注我的medium更新囉~

const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
module.exports = webpackMerge(
   commonConfig, {
      mode: 'development',
      devServer: {
         ...
      },
   },
});

完整的預覽檔的範例

Step3.Build檔的設定

Build檔就是當網頁開發完成後，進行打包轉換的最後一步了，在這裡可以設定 splitChunks等等在打包時所需的進階步驟就在這裡囉，而關於splitChunks的介紹請參考這篇！

const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
module.exports = webpackMerge(
   commonConfig, {
      mode: 'production',
      optimization: {
         ...
      },
   },
});

完整的Build檔的範例

最後，webpack基本上只要完整設定好一次後，後續專案的開發都可以沿用下去，在這裡提供了我自己設定的基本專案包，後續也會持續更新，有需要的朋友也可以下載回去，研究出最適合自己的webpack設定吧！