webpack初學者筆記2

webpack中source map使用

當打包後產生的錯誤會沒法定位到對應的文件位置，因此使用sourceMap來定位打包前的對應文件位置即將編譯後的代碼映射回原始源代碼

module.exports = {
    devtool: 'inline-source-map'
}

webpack中自動編譯

1.webpack's Watch Mode
依賴圖中的全部文件以進行更改。若是其中一個文件被更新，代碼將被從新編譯，沒必要手動運行整個構建。

2.webpack-dev-server
提供了一個簡單的 web 服務器，而且可以實時從新加載(live reloading)

npm install --save-dev webpack-dev-server

配置以下

module.exports = {
   devServer: {
     contentBase: './dist'
   }
}

3.webpack-dev-middleware
webpack-dev-middleware 是一個容器(wrapper)，它能夠把 webpack 處理後的文件傳遞給一個服務器(server)。 webpack-dev-server 在內部使用了它，同時，它也能夠做爲一個單獨的包來使用，以便進行更多自定義設置來實現更多的需求

npm install --save-dev express webpack-dev-middleware

模塊熱更新

模塊熱替換(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它容許在運行時更新各類模塊，而無需進行徹底刷新。
啓動配置HMR(HotModuleReplacementPlugin)

plugins: [
     new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin()
    ],

tree shaking

移除打包中沒有使用的代碼
package.json

{
  "sideEffects": false
}

環境分離打包

提供環境參數確認當前環境 經過與 process.env.NODE_ENV 環境變量關聯 將webpack.config.js拆分爲
webpack.common.js
webpack.dev.js
webpack.prod.js
統一文件加不一樣環境用不一樣的js文件打包