A tutorial of dllplugin and dllreferenceplugin in webpack practice

Use of dllplugin and dllreferenceplugin

Dllplugin and dllreferenceplugin realize the splitting of bundles in some way, and at the same time greatly improve the construction speed.

1. First add the build folder —– webpack.dll.config.js:

var path = require("path");
var webpack = require("webpack");
module.exports = {
 //Array of modules to package
 entry: {
  vendor: ['vue/dist/vue.esm.js','vue-router']
 },
 output: {
  Path: path.join (U dirname, '.. / static / JS'), // the location of the file output after packing
  Filename: '[name]. DLL. JS', // global variable name exposed in vendor.dll.js.
  Library: '[name]'u Library' // is consistent with 'Name:' [name]'u Library 'in webpack.dllplugin.
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, '.', '[name]-manifest.json'),
   name: '[name]_library', 
   context: __dirname
  }),
 ]
};

2. In the scripts of package.json, add:

"dll": "webpack --config build/webpack.dll.config.js",

3. Run NPM run DLL to generate vendor-manifest.json under static / JS;

4. In build / webpack.base.conf.js, add:

//Add dllreferenceplugin plug-in
 plugins: [
  new webpack.DllReferencePlugin({
   context: __dirname,
   manifest: require('./vendor-manifest.json')
  })
 ],

5. Then import vendor.dll.js into index.html:

<div></div>
<script src="./static/js/vendor.dll.js"></script>

So far, after configuration:

You can seenpm run buildThe time after dist is greatly reduced, and the packing volume of dist is smaller than before. In project optimization, it can greatly speed up the construction of the project and reduce the packaging volume of the project.

summary

The above is a tutorial of dllplugin and dllreferenceplugin for webpack practice introduced by Xiaobian. I hope it can help you. If you have any questions, please leave a message to me, and Xiaobian will reply you in time!