vue-cli配置預編譯

(轉載文章)
公司的平臺功能越堆越多，打包也愈來愈費勁，一次十幾分鍾，運維很不爽，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...