optimization.splitChunks

const optimization = {
  splitChunks: {
    chunks: 'initial'
  },
  // minimize: false
}

https://webpack.docschina.org/plugins/split-chunks-plugin/

splitChunks 就是 webpack 中一個提取或分離代碼的插件

主要作用是提取公共代碼，防止代碼被重復打包

拆分過大的 js 文件，合并零散的 js 文件

externals

const externals = {
  'react': 'window.React',
  'react-dom': 'window.ReactDOM',
  'react-route': 'window.ReactRouterDOM',
  'react-route-dom': 'window.ReactRouterDOM',
}

https://webpack.docschina.org/configuration/externals#root

external 的作用是，從打包的 bundle 文件中排除依賴

就是讓在項目中通過 import 引入的依賴在打包的時候不會打包到 bundle 中去，而是通過 script 的方式去訪問這些依賴

resolve.extensions

resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
},

https://webpack.docschina.org/migrate/3/#resolveextensions

在導入語句沒有帶文件后綴時， webpack 會自動帶上后綴去詢問文件是否存在，如果這個列表越長，或者正確的后綴越往后，就會造成嘗試的次數(shù)越多

所以在配置 resolve.extensions 時需要遵守一下幾點：

• 會追嘗試列表要盡可能的小，不要將項目中不可能存在的情況寫到后綴嘗試列表中

• 頻率出現(xiàn)最高的文件后綴要優(yōu)先放在最前面，以做到盡快退出尋找過程

• 在源碼中寫導入時，要盡可能帶上后綴，從而可以避免尋找過程。例如在確定的情況下將
  require('./data') 寫成 require('./data/json')

resolve.alias

resolve: {
    alias: {
      utils: path.resolve(__dirname, 'client/utils/'),
      common: path.resolve(__dirname, 'client/common/'),
      modules: path.resolve(__dirname, 'client/modules/'),
      components: path.resolve(__dirname, 'client/components/'),
    },
  },

https://webpack.docschina.org/configuration/resolve#resolvealias

resolve.alias 配置項通過別名來將原來導入路徑映射成一個新的導入路徑

在實戰(zhàn)項目中經(jīng)常會依賴一些龐大的第三方模塊，以 React 庫為例，發(fā)布出去的 React 庫中包含兩套代碼

一套是采用 CommonJS 規(guī)范的模塊化代碼，這些文件都放在 lib 錄下，以 package.json 中指定的入口文件 react.js 為模塊的入口

一套是將 React 的所有相關代碼打包好的完整代碼放到一個單獨的文件中， 這些代碼沒有采用模塊化，可以直接執(zhí)行。其中 dist/react.js 用于開發(fā)環(huán)境，里面包含檢查和警告的代碼。dist/react.min.js 用于線上環(huán)境，被最小化了。

在默認情況下， Webpack 會從入口文件 ./node_modules/react/react.js 開始遞歸解析和處理依賴的幾十個文件，這會是一個很耗時的操作 通過配置 resolve.alias, 可以讓 Webpack 在處理 React 庫時，直接使用單獨、完整的 react.min.js 文件,從而跳過耗時的遞歸解析操作