webpack散記

看風景就發表於2018-09-27
Web

1. manifest

manifest儲存了webpack的chunk相關的資訊。具體為一個物件，或者包含runtime的一段程式碼。其中包含著一個chunkId，已經對應chunkId的相關資訊，例如非同步模組的

檔名和路徑

2. HashedModuleIdsPlugin

將打包出來的moduleId從自增的數字換成相對的檔案路徑的hash值，使得moduleId在檔案位置和內容不變的情況下，不會發生變化。

3. webpack4 CacheGroup可參考的配置

// 打包node_modules，排除lodash
venders: {
  test: /node_modules\/(?!(lodash)\/)/, 
  name: 'vendors-common',
  chunks: 'all'
},
// 只打包lodash，並命名為 vender-lodash
lodash: {
  test: /node_modules\/lodash\//,
  name: 'vender-lodash'
},
//將多個非同步載入的模組共用的部分打進utils中, reuseExistingChunk 是重用已經存在的chunk
//防止多個模組中出現重複的chunk
default: {
  minSize: 0,
  minChunks: 2,
  reuseExistingChunk: true,
  name: 'utils'
}
// 只打包非同步模組中的chunk
'async-vendors': {
    test: /[\\/]node_modules[\\/]/,
    minChunks: 2,
    chunks: 'async',
    name: 'async-vendors'
}
// 這裡定義的是在分離前被引用過兩次的檔案，將其一同打包到common.js中，最小為30K
common: {
    name: "common",
    minChunks: 2,
    minSize: 30000
}

4. webpack-dev-sever可參考的配置

// 開發環境設定本地伺服器，實現熱更新
devServer: {
    contentBase: path.resolve(__dirname, 'static'),
    // 提供給外部訪問
    host: '0.0.0.0',
    port: 8388,
    // 允許開發伺服器訪問本地伺服器的包JSON檔案，防止跨域
    headers: {
        'Access-Control-Allow-Origin': '*'
    },
    // 設定熱替換
    hot: true,
    // 設定頁面引入
    inline: true
},
// 檔案輸出配置
output: {
    // 設定路徑，防止訪問本地伺服器相關資源時，被開發伺服器認為是相對其的路徑
    publicPath: 'http://localhost:8188/dist/js/',
},
// 外掛配置
plugins: [
    // 熱更新替換
    new webpack.HotModuleReplacementPlugin()
]

 

 

相關文章