08多进程打包、externals、dll

多进程打包

进程启动大概为600ms，进程通信也有开销
如果开始进程，需配置：thread-loader0

{
    test: /.js$/,
    exclude: /node_modules/,
    use: [
        /**
         * 开始多进程打包
         * 进程启动大概为600ms，进程通信也有开销。
         * 只有工作消耗时间比较长，才需要多进程打包
         */
        //'thread-loader', // 或者
        {
            loader: 'thread-loader',
            options: {
                workers: 2 // 进程2个
            }
        },
        {
            loader: 'babel-loader',
            options: {
            presets: [
                [
                    '@babel/preset-env',
                    {
                        useBuiltIns: 'usage',
                        corejs: {version: 3},
                        targets: {
                            chrome: '70',
                            firefox: '55'
                        }
                    }
                ]
            ],
            // 开始babel缓存
            // 第二次构建时，会读取之前的缓存
            cacheDirectory: true
            }
        }
    ]
},

externals

externals：忽略打包内容

externals: {
    // 拒绝jQuery被打包进来
    jquery: 'jQuery'
}

dll

• Dll技术:对某些库（第三方库：jquery、react、vue...）进行单独打包
• 只需要一次运行打包：webpack --config webpack.dll.js

/**
 * 使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包
 *  当你运行webpack时，默认查找webpack.config.js配置文件
 *  需求：需要运行webpack.dll.js文件
 *      --> webpack --config webpack.dll.js
 */

const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        // 最终打包生成的[name] --> jquery
        // ['jquery'] --> 要打包的库是jquery
        jquery: ['jquery']
    },
    output: {
        filename: '[name].js',
        path: resolve(__dirname, 'dll'),
        library: '[name]_[hash]' // 打包的库里面向外暴露出去的内容叫什么名字
    },
    plugins: [
        // 打包生成一个 manifest.json --> 提供和jquery映射
        new webpack.DllPlugin({
            name: '[name]_[hash]', // 映射库暴露的内容名称
            path: resolve(__dirname, 'dll/manifest.json') // 输出文件路径
        })
    ],
    mode: 'production'
}

• 需要引入插件add-asset-html-webpack-plugin
  npm install add-asset-html-webpack-plugin -D
• 在webpack.config.json中引入和配置如下：
  需要引入webpack自身插件

 const webpack = require('webpack');
 const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

在plugins配置如下：

// 告诉webpack哪些库不参与打包，同时使用时的名称也得变
 new webpack.DllReferencePlugin({
     manifest: resolve(__dirname, 'dll/manifest.json')
 }),
 // 将某个文件打包输出去，并在html中自动引入该资源
 new AddAssetHtmlWebpackPlugin({
     filepath: resolve(__dirname, 'dll/jquery.js')
 })