1. Install related plug-ins

NPM install webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin@^1.0.1 --devCopy the code

2. Create a configuration file

Create webpack.dll.config.js in the project root directory and configure it

//webpack.dll.config.js const path = require('path') const webpack = require('webpack') const CleanWebpackPlugin = Require ('clean-webpack-plugin') // DLL directory const dllPath = 'public/vendor' module.export={entry: {// Public library vendor: ["vue", "vue-router", "vuex"],}, output: {path: path.join(__dirname, dllPath), filename: Library: "[name]_[hash]",}, plugins: "[name].dll. [ new CleanWebpackPlugin(["*.*"], { root: Path.join (__dirname, dllPath),}), // Set the environment variable new webpack.defineplugin ({"process.env": {NODE_ENV: "Production ",},}), //manifest.json describes what the dynamic link library contains. New webpack.dllPlugin ({path: Path. join(__dirname, dllPath, "[name]-manifest.json"), // Keep the same as the name in output.library process.cwd(), }), ], }Copy the code

3. Set the DLL command

Add the following configuration to package.json

"dll": "webpack -p --progress --config ./webpack.dll.config.js"
Copy the code

Terminal operation

npm run dll
Copy the code

4. Ignore the compiled files

In order to save compilation time, at this time we need to tell Webpack that the public library file has been compiled, reducing the compilation time of WebPack to the public library. Find vue.config.js in the project root directory (if not new) and configure it as follows:

const webpack = require('webpack') const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin"); module.exports={ ... configureWebpack:{ plugins:[ ... new webpack.DllReferencePlugin({ context: process.cwd(), manifest: require("./public/vendor/vendor-manifest.json"), }), New AddAssetHtmlPlugin({// DLL file location filepath: Path.resolve (__dirname, "./public/vendor/*.js"), // DLL reference path publicPath: "./vendor", // DLL final output directory outputPath: "./vendor", }), ] }Copy the code

Add-asset-html-webpack-plugin can inject DLLS into the generated HTML template without manual import in public/index.html <script src="./vendor/vendor.dll.js"></script>