vue-cli、web pack抽出サードパーティライブラリ---DllPlugin、DllReferencePlugin

インストールするプラグインは

プロファイル

var path              = require('path');
var utils             = require('./utils')

var webpack           = require('webpack');
var config            = require('../config')
var utils             = require('./utils')
var dllConfig         = require('./webpack.dll.conf');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var AssetsPlugin      = require('assets-webpack-plugin');

var chalk = require('chalk')
var rm                = require('rimraf')
var ora = require('ora')
var spinner = ora({
  color: 'green',
  text: 'Dll   ...'
})
spinner.start()
rm(path.resolve(__dirname, '../static'),  err => {
  if (err) throw err
  webpack(dllConfig,function (err, stats) {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
          colors: true,
          modules: false,
          children: false,
          chunks: false,
          chunkModules: false
        }) + '

')

    console.log(chalk.cyan('  dll succeed ！.
'))
  })
});

var path = require('path');
var webpack = require('webpack');       //  webpack  DllPlugin  
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin'); //   css
var AssetsPlugin = require('assets-webpack-plugin'); //      ，  HtmlWebpackPlugin     dll   
var CleanWebpackPlugin = require('clean-webpack-plugin');//     

module.exports = {
    entry: {
        libs: [
            'vue/dist/vue.esm.js',
            'vue-router',
            'vuex',

            'js-md5',
            'js-cookie',

            './src/assets/fastclick',
            './src/assets/base',
            './src/assets/flexible',
            // './src/assets/reset_for_mobile.css',
            './src/assets/localResizeIMG',
            './src/assets/qrious',

            './src/assets/sign',
            './src/assets/uid',
            './src/assets/uuid',


            // 'element-ui',
            // 'element-ui/lib/theme-default/index.css',
            // 'mint-ui',
            // 'mint-ui/lib/style.css',
        ]
    },
    output: {
        path: path.resolve(__dirname, '../static'),
        filename: '[name].[chunkhash:7].js',
        library: '[name]_library'
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.resolve(__dirname, '../static/[name]-mainfest.json'),
            name: '[name]_library',
            context: __dirname //         ，   DllReferencePlugin  
        }),
        new ExtractTextPlugin('[name].[contenthash:7].css'),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
        }),
        new AssetsPlugin({
            filename: 'bundle-config.json',
            path: './static'
        }),
        new CleanWebpackPlugin(['static'], {
            root: path.join(__dirname, '../'), //     
            verbose: true, //         
            dry: false //      
        }),
    ],
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{
                    loader: 'css-loader',
                    options: {
                        minimize: true //    
                    }
                }]
            })
        }, {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            query: {
                limit: 10000,
                name: 'img/[name].[hash:7].[ext]'
            }
        }, {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            query: {
                limit: 10000,
                name: 'fonts/[name].[hash:7].[ext]'
            }
        }]
    },
}

Webpackを変更します。base.conf.js

...
//  
//  webpack
var webpack = require('webpack');

module.exports = {
  entry: {
    ...
  },
  output: {
    ...
  },
  externals: {
    ...
  },
  resolve: {
    ...
  },
  module: {
    ...
  },
  
  //  
  //   DllReferencePlugin  
  plugins: [
      new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require('../static/libs-mainfest.json') //      manifest.json
      }),
  ]
}

Webpackを変更します。dev.conf

...
//  
var bundleConfig = require("../static/bundle-config.json")//        json
...
module.exports = merge(baseWebpackConfig, {
  module: {
    ...
  },
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    ...
    new HtmlWebpackPlugin({
      ...
      //  
      libJsName:bundleConfig.libs.js,
      libCssName:bundleConfig.libs.css,
      env:config.dev.env,
    }),
    ...
  ]
})

Webpackを変更します。prod.conf

...
//  
var bundleConfig = require("../static/bundle-config.json")//        json
var CleanWebpackPlugin = require('clean-webpack-plugin');//     
...
var webpackConfig = merge(baseWebpackConfig, {
    module: {
      ...
    },
    ...
    output: {
      ...
    },
    plugins: [
        ...
        new HtmlWebpackPlugin({
            ...
            //  
            libJsName: bundleConfig.libs.js,
            libCssName: bundleConfig.libs.css,
            ...
        }),
        ...
        //  
        new CleanWebpackPlugin(['dist'], {
            root: path.resolve(__dirname, '../'),    //       
            verbose: true,
            dry: false 
        }),
       ...
    ]
})
...

indexでhtmlは生成するdllを導入する.js、dll.css

...

    

    
    
    

...

package.json

{
  ...
  "scripts": {
    ...
    //  
    "build:dll": "node build/buildDll.js",
    ...
  },
  ...
}