Npm-Install-Webpack-Plugin

這個套件會自動幫你安裝專案中有引用，但是尚未 npm install 的套件，非常的方便。

官網示意圖

先安裝 Plugin

npm i npm-install-webpack-plugin -D

設定檔調整如下

webpack.common.js

var NpmInstallPlugin = require('npm-install-webpack-plugin')
module.exports = {
  plugins: [
    new NpmInstallPlugin({
      dev: false,  // Use --save or -save-dev
    }),
  ]
}

詳細使用方式請看這裡

Ignore-Plugin

顧名思義可以讓我們忽略掉某些模組的引用。最常使用的是用來忽略 moment 的 locale 模組。

設定檔調整如下

webpack.common.js

var webpack = require('webpack')
module.exports = {
  plugins: [
    new  webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
}

移除 locale 之前



移除 locale 之後



或是我們可以只保留 zh-tw

webpack.common.js

 new webpack.IgnorePlugin(/^\.\/(?!zh-tw)/, /moment[\/\\]locale$/)

這個套件對於最後的 Bundle 體積大小優化效果相當好喔。