(轉載文章)
公司的平台功用越堆越多，打包也愈來愈費力，一次十幾分鐘，運維很不爽，so搗鼓了一下預編譯，試了一下也許縮短了七八分鐘，如今覺得還行，如今把它記下來，給須要的童鞋當作參考，也給本身紀錄一下。
項目目次

• build

  • webpack.dll.conf.js(我們本身新建的預編譯設置)
  • webpack.base.config.js
  • webpack.prod.conf.js
  • ….
• static
• package.json

新建文件webpack.dll.conf.js

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var package = require('../package.json')
var outputPath = '../static/dll'

module.exports = {
  output: {
    path: path.join(__dirname, outputPath),
    filename: 'dll.[name]_[hash:6].js',
    library: '[name]_[hash:6]', // 當前Dll的一切內容都邑存放在這個參數指定變量名的一個全局變量下，注重與DllPlugin的name參數保持一致
  },
  entry: {
      //直接援用package內里的
    lib: Object.keys(package.dependencies),
    //也能夠手動設置
    lib:[
        'jquery',
        'vue',
        'vue-router',
        'swiper'
    ]
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, outputPath, '[name]-manifest.json'), // 本Dll文件中各模塊的索引，供DllReferencePlugin讀取運用
      name: '[name]_[hash:6]',  // 當前Dll的一切內容都邑存放在這個參數指定變量名的一個全局變量下，注重與參數output.library保持一致
      context: __dirname, // 指定一個途徑作為上下文環境，須要與DllReferencePlugin的context參數保持一致，發起一致設置為項目根目次
    }),
    new ExtractTextPlugin('[name].css'),
    /*全局庫綁定不在此處設置
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      'window.$': 'jquery',
    }),*/
  ],
  
};

webpack.base.conf.js文件設置,在開闢或打包時能援用或避開預編譯下的內容

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const manifest = require('../static/dll/lib-manifest.json')

增加插件設置

plugins: [
   //自定義dll
    new webpack.DllReferencePlugin({
        context: __dirname+'/static/dll',
        manifest: manifest,
        dll:`${manifest.name}.js`,
    }),
    //全局庫綁定
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        "window.jQuery": 'jquery',
        "window.$": 'jquery',
    }),
],

在webpack.prod.conf.js文件設置打包

var manifest = require('../static/dll/lib-manifest.json')

在HtmlWebpackPlugin設置里增加dll
的援用，以便在index.html里加上我們的預編譯包

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      //在index.html內里援用這個dll
      dll:`/static/dll/dll.${manifest.name}.js`,
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

根目次下的 index.html，body的完畢標籤前加上

<script src="<%= htmlWebpackPlugin.options.dll %>" ></script>

末了一步在package.json裡邊增加上預編譯敕令，srcipt裡邊加上一行：

//預編譯敕令
"dll": "webpack --progress --colors --config build/webpack.dll.conf.js",

預編譯

項目根目次下運轉npm run dll，就會在static目次下發明dll這個文件夾，內里就是預編譯的包和預編譯的援用json。

項目地點： https://github.com/JhonMr/pre…

原創文章,轉載請說明出處 https://www.jianshu.com/p/156…