webpack.config.js ``` const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const TerserWebpackPlugin = require('terser-webpack-plugin') module.exports = { entry: './src/js/index.js', output: { filename: 'js/[name].[contenthash:10].js', path: resolve(__dirname, 'build'), chunkFilename: 'js/[name].[contenthash:10]_chunk.js' }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, plugins: [new HtmlWebpackPlugin()], mode: 'production', resolve: { alias: { $css: resolve(__dirname, 'src/css') }, extensions: ['.js', '.json', '.jsx', '.css'], modules: [resolve(__dirname, '../../node_modules'), 'node_modules'] }, optimization: { splitChunks: { chunks: 'all' // 默認值，可以不寫~ /* minSize: 30 * 1024, // 分割的chunk最小為30kb maxSiza: 0, // 最大沒有限制 minChunks: 1, // 要提取的chunk最少被引用1次 maxAsyncRequests: 5, // 按需加載時并行加載的文件的最大數量 maxInitialRequests: 3, // 入口js文件最大并行請求數量 automaticNameDelimiter: '~', // 名稱連接符 name: true, // 可以使用命名規則 cacheGroups: { // 分割chunk的組 // node_modules文件會被打包到 vendors 組的chunk中。--> vendors~xxx.js // 滿足上面的公共規則，如：大小超過30kb，至少被引用一次。 vendors: { test: /[\\/]node_modules[\\/]/, // 優先級 priority: -10 }, default: { // 要提取的chunk最少被引用2次 minChunks: 2, // 優先級 priority: -20, // 如果當前要打包的模塊，和之前已經被提取的模塊是同一個，就會復用，而不是重新打包模塊 reuseExistingChunk: true } }*/ }, // 將當前模塊的記錄其他模塊的hash單獨打包為一個文件 runtime // 解決：修改a文件導致b文件的contenthash變化 runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}` }, minimizer: [ // 配置生產環境的壓縮方案：js和css new TerserWebpackPlugin({ // 開啟緩存 cache: true, // 開啟多進程打包 parallel: true, // 啟動source-map sourceMap: true }) ] } }; ``` src/js/index.js ``` import(/* webpackChunkName: 'a' */'./a.js').then(({ add }) => { console.log(add(1, 2)); }); ``` src/js/a.js ``` export function add(x, y) { return x + y; } ``` src/index.js ``` ```