//webpack.dll.conf.js
process.env.NODE_ENV = 'production'
const path = require('path');
var utils = require('./utils')
var vueLoaderConfig = require('./vue-loader.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const webpack = require('webpack');
//vue項(xiàng)目默認(rèn)有一個(gè)static目錄.我就把導(dǎo)出目錄放在了static/dll/目錄下
const srcPath = path.join(__dirname, '../static/dll/');
//需要編譯的模塊
const vendors = ['vue/dist/vue.esm.js',
  'vue-router',
  'vue-localstorage',
  'material-design-icons/iconfont/material-icons.css',
  'iview/dist/styles/iview.css',
  'iview/src/components/tag/tag.vue'
  'muse-ui/src/appBar'
];
webpackConfig = {
  entry: {
    vendor: vendors
  },
  resolve: {
    extensions: ['.js', '.vue', '.json']
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /iview.src.*?js$/,
        loader: 'babel-loader'
      },
      {
        test: /muse-ui.src.*?js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: "css-loader"
        })
      },
      {
        test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          publicPath: './',
          limit: 1000,
          name: 'fonts/[name].[ext]'
        }
      }]
  },
  output: {
    path: srcPath, // 輸出的路徑
    filename: '[name].dll.js', // 輸出的文件，將會(huì)根據(jù)entry命名為vendor.dll.js
    library: '[name]_library' // 暴露出的全局變量名
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].dll.css'
    }),
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    new webpack.optimize.UglifyJsPlugin({ // uglifjs壓縮
      compress: {
        warnings: false
      }
    }),
    new webpack.DllPlugin({
      path: path.join(srcPath, '[name]-mainfest.json'), // 描述依賴對(duì)應(yīng)關(guān)系的json文件
      name: '[name]_library',
      context: __dirname // 執(zhí)行的上下文環(huán)境，對(duì)之后DllReferencePlugin有用
    })
  ]
}
if (process.env.npm_config_report) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig;

|____dll
| |____fonts
| |____vendor-mainfest.json
| |____vendor.dll.css
| |____vendor.dll.js

//head 標(biāo)簽
<link type="text/css" rel="stylesheet" href="./static/dll/vendor.dll.css" rel="external nofollow" >
//body 標(biāo)簽
<script src="./static/dll/vendor.dll.js"></script>

plugins: [
    ...,
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('../static/dll/vendor-mainfest.json') // 指向生成的json文件
    })
  ]

webpack --config ./build/webpack.dll.conf.js

 //package.json
"scripts":{
  "build:dll": "webpack --config ./build/webpack.dll.conf.js",
  "build:dll:report": "npm run build:dll --report"
}