const path = require('path'); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { app1: './app1.js', app2: './app2.js' }, output: { path: path.resolve(__dirname, './build/'), filename: "[name]-[chunkhash].js" }, devtool: "source-map", module: { rules: [ { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', }, 'less-loader', ], exclude: /node_modules/ }, { test: /\.js$/, use: [ 'cache-loader', { loader: 'babel-loader', } ], exclude: /node_modules/ } ] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].[hash:5].css', }), new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'index1', template: './index1.html', filename: 'index1.html', chunks: ['app1', 'common'], // hash: true }), new HtmlWebpackPlugin({ title: 'index2', template: './index2.html', filename: 'index2.html', chunks: ['app2', 'common'], // hash: true }), new webpack.HashedModuleIdsPlugin(), ], }
打包效果
问题很明显，速度慢，体积过大，这里还有个问题就是，app1的与app2引用共同的文件导致的体积过大，也就是我们要解决的如何提取common部分的问题，这里我们就不讨论脚本import 第三方的问题了，上面有解决方案了。
提取common部分
optimization: { runtimeChunk: { "name": "manifest" }, splitChunks: { chunks: 'all', cacheGroups: { default: false, vendors: false, common: { test: /\.(s*)js$/, chunks: 'all', minChunks: 2, minSize: 0, name: 'common', enforce: true, priority: -11 }, vendors: { test: /[\\/]node_modules[\\/]/, name: "vendors", priority: -10, chunks: 'all', reuseExistingChunk: true, enforce: true }, style: { name: 'style', test: /\.less$/, chunks: 'all', enforce: true } } }, runtimeChunk:{ name:'manifest' } },
这里我们要做的是，提供commonjs，合并css（提取common部分也是可以的，毕竟页面也不可能用全部的css，做法与提取commonjs是一样的，配置minChunks最小为2就可以了），提供第三方类库。
我们看下打包效果
速度提升了，同时生成了common文件以及提三方文件集合verndors文件，嗯，目前解决了我们要解决的问题，上面单页面场景同样适用，浏览器缓存这个一般不会变得vendors，也达到了提升效率问题，
但是有没有想过一个问题，就是每一次webpack构建过程，是不是都要打一次这个包呢，浪费时间了吧，于是我们采用什么方式呢，没错~采用DllPlugin与DllReferencePlugin来提取一次第三方，
剩下common部分每一次构建都去重新打一次。
代码同样引用dll
new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./distDll/dll/react.manifest.json') })
构建效果
效果就是大幅度提升构建速度。
最终配置文件
const path = require('path'); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { app1: './app1.js', app2: './app2.js' }, output: { path: path.resolve(__dirname, './build/'), filename: "[name]-[chunkhash].js" }, devtool: "source-map", module: { rules: [ { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', // options: { // sourceMap: true, // modules: true, // localIdentName: '[name]---[local]---[hash:base64:5]' // } }, 'less-loader', ], exclude: /node_modules/ }, { test: /\.js$/, use: [ 'cache-loader', { loader: 'babel-loader', options: { // cacheDirectory: path.join(__dirname,'./build/', 'babel_cache') // happyPackMode: true, // transpileOnly: true } } ], exclude: /node_modules/ } ] }, optimization: { runtimeChunk: { "name": "manifest" }, splitChunks: { chunks: 'all', cacheGroups: { default: false, vendors: false, common: { test: /\.(s*)js$/, chunks: 'all', minChunks: 2, minSize: 0, name: 'common', enforce: true, priority: -11 }, // vendors: { // test: /[\\/]node_modules[\\/]/, // name: "vendors", // priority: -10, // chunks: 'all', // reuseExistingChunk: true, // enforce: true // }, style: { name: 'style', test: /\.less$/, chunks: 'all', enforce: true } } }, runtimeChunk:{ name:'manifest' } }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].[hash:5].css', }), new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'index1', template: './index1.html', filename: 'index1.html', chunks: ['app1', 'common'], // hash: true }), new HtmlWebpackPlugin({ title: 'index2', template: './index2.html', filename: 'index2.html', chunks: ['app2', 'common'], // hash: true }), new webpack.HashedModuleIdsPlugin(), new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./distDll/dll/react.manifest.json') }) ], }