vue +webpack 打包配置優化

1.利用DllPlugin，DllReferencePlugin ，UglifyJsPlugin分離第三方庫文件，使打包后的vendor文件變小。

DllPlugin通過entry獲取config中library的第三方庫，和我們開發代碼進行分離，生成一個獨立的js 文件

UglifyJsPlugin 是將js 進行打包 ，DllReferencePlugin 引入解析打包后的第三方庫文件

首先需要添加webpack.dll.conf.js 文件，該文件的配置如下：

const path = require('path')
const webpack = require('webpack')
const {library} = require('../config')
module.exports = {
  entry: library.entry,
  output: {
    path: path.join(__dirname, '../dll'),
    filename: `[name].${library.version}.dll.js`,
    library: '[name]_library' // vendor.dll.js中暴露出的全局變量名
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name].manifest.json'),
      name: '[name]_library'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

　在config.的index.js 中配置第三方庫

  /**
   * 庫文件
   */
  library: {
    /**
     * node_module
     */
    entry: {
      'vueBucket': [
        'vue',
        'vue-router',
        'vuex',
        'axios',
        'moment'
      ]
    },
    pluginsCss: {
      global: [{
        name: 'element-ui',
        path: './src/assets/css/theme-default/index.css',
        font: './src/assets/css/theme-default/fonts'
      },
      {
        name: 'vue2-animate',
        path: './node_modules/vue2-animate/dist/vue2-animate.min.css'
      }, {
        name: 'iconfont',
        path: './src/assets/css/iconfont.css',
        font: 'src/assets/css/fonts'
      }
      ]
    },
    // 版本
    version: 'v1.0'
  },

　　在webpack.base.conf.js 中配置引用

 plugins: [
    // 解析DllPlugin 打包的node_module
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('./vueBucket.manifest.json')
    })
  ]

　在package.json 中配置，打包第三庫文件的命令

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

　執行 npm run dll ，后再次打包，發現vendor 文件變小了