webpack dllPlugin usage (based on vue-cli webpack template)

Because the file packaged in this example with a single entry is too large, it is divided into multiple entries.

The main files involved are:

/index.html,

/webpack.dll.config.js,

/build/webpack.base.conf.js,

/build/webpack.dev.conf.js,

/build/webpack.prod.conf.js

  1. new fileWebpack.dll.config.js, can be placed anywhere as long as the path is clear.This example takes the root directory example:
  2. const fs = require('fs')
    const path
    = require('path') const webpack = require('webpack') let vendors = [ [ 'echarts', 'echarts-wordcloud', 'element-ui' ],[ 'vue/dist/vue.esm.js', 'vue-echarts', 'vue-js-modal', 'vue-router', 'vue-waterfall', 'vuex' ] ] module.exports = { entry: {
    // Multiple entries, single entry case, just write one, key value is custom, value value is array vendor0: vendors[
    0], vendor1: vendors[1] }, output: { path: path.join(__dirname, "static/dll"), filename: "[name].[chunkhash].dll.js", library: "[name]_[chunkhash]" }, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname, "dllManifest", "[name]-manifest.json"), name: "[name]_[chunkhash]", context: __dirname }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] }

    On/build/Webpack.base.confIncrease in.Js:

  3.   plugins: [ 
       // This is an array, only one corresponding entry needs to be filled inWebpack.DllReferencePluginExample
    // webpack.DllReferencePlugin Help webpacks know which packages are responsible for by the dll and avoid duplicate packaging ...(
    function () { let max = 2 let res = [] for (let i = 0; i < max; i++) { res.push(new webpack.DllReferencePlugin({ context: path.resolve(__dirname, '../'), manifest: require(resolve(`./dllManifest/vendor${i}-manifest.json`)) })) } return res })() ]

    On/build/Webpack.dev.conf.js, /build/Webpack.prod.confAdd dll attributes to the.Js file HtmlWebpackPlugin instance for easy access inIndex.htmlUse:

  4.     new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true,
          // ----------------------------------------------------
          dll: (function () {
            let max = 2
            let res = []
            for (let i = 0; i < max; i++) {
              const dllName = require(path.resolve(__dirname, `.././dllManifest/vendor${i}-manifest.json`)).name.split('_')
              res.push(`/static/dll/${dllName[0]}.${dllName[1]}.dll.js`)
            }
            return res
          })()
          // ----------------------------------------------------
        })

    Modify/Index.htmlTemplate:

        <!--Be careful where the file is injected so that no dependencies can be found before other js run-->
        <% for (let i of htmlWebpackPlugin.options.dll) { %>
          <script src="<%= i %>"></script>
        <% } %>

     

The main problem to solve this time is that repackaging each code change takes too long.

The solution is done with DllPlugin provided through the webpack, including the naming of dll packaged js files plus hash, and avoiding manual modifications per packageIndex.htmlTemplate issues.

Tags: Javascript Webpack Vue JSON

Posted on Wed, 20 May 2020 12:25:35 -0400 by PHP_ColdFusion