vue-cli脖祈、web pack提取第三方庫(kù)-----DllPlugin、DllReferencePlugin

需要安裝的插件有

• extract-text-webpack-plugin
• assets-webpack-plugin
• clean-webpack-plugin

npm i -D extract-text-webpack-plugin assets-webpack-plugin clean-webpack-plugin

配置文件

• 在 build 文件夾中新建 buildDll.js

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生產(chǎn)中...'
})
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
        }) + '\n\n')

    console.log(chalk.cyan('  dll succeed 刷晋！.\n'))
  })
});

• 在 build 文件夾中新建 webpack.dll.conf

var path = require('path');
var webpack = require('webpack');       //調(diào)用webpack內(nèi)置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 // 執(zhí)行的上下文環(huán)境，對(duì)之后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, '../'), // 絕對(duì)路徑
            verbose: true, // 是否顯示到控制臺(tái)
            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")//調(diào)入生成的的路徑j(luò)son
...
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")//調(diào)入生成的的路徑j(luò)son
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, '../'),    // 設(shè)置絕對(duì)路徑
            verbose: true,
            dry: false 
        }),
       ...
    ]
})
...

在index.html引入生成的dll.js眼虱、dll.css

...
<body>
    <div id="app"></div>
    <!-- 新增 -->
    <link rel="stylesheet" href="./static/<%= htmlWebpackPlugin.options.libCssName %>">
    <script src="./static/<%= htmlWebpackPlugin.options.libJsName %>"></script>
</body>
...

修改package.json

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

注意

• 無(wú)論是開(kāi)發(fā)環(huán)境還是生產(chǎn)環(huán)境喻奥，都必須先運(yùn)行 npm run build:dll
• dll文件打包的第三方庫(kù)沒(méi)有改變時(shí)，不需要再次運(yùn)行