技術標籤：webpackwebpack

webpack code split配置

目錄：

webpack.config.js:

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //單入口
    entry:'./src/js/index.js',
    output:{
        // [name]取檔名
        filename:'js/[name].[contenthash:10].js',
        path:resolve(__dirname,'build'),
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            minify:{
                collapseWhitespace:true,
                removeComments:true
            }
        })
    ],

    /* 
      1.可以將node_modules中單獨打包一個chunk最終輸出
      2.自動分析 多入口chunk中，有沒有公共的檔案，如果有會打包成單獨的一個chunk
    */
    optimization:{
        splitChunks:{
            chunks:'all'
        }
    },
    mode:'production',
}
 

index.js:

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

/* 
 通過js程式碼，讓某個檔案被單獨打包一個chunk
*/
import(/* webpackChunkName:'test' */'./test')
  .then(({mul,count})=>{
    //檔案載入成功~
    // eslint-disable-next-cdline
    console.log(mul(2,5));
  })
  .catch(()=>{
    // eslint-disable-next-cdline
    console.log('檔案載入失敗');
  })




// eslint-disable-next-cdline
console.log(sum(1,2,3,4));
 

test.js:

export function mul(x, y) {
  return x * y;
}

export function count(x, y) {
  return x - y;
}