多进程打包 thread-loader
    进程启动大概为600ms,进程间通信也有开销
    只有工作消耗时间比较长,才需要进程打包
    {
    test:/.js$/,
    exclude: /node_modules/,
    use:[
    // ‘thread-loader’
    {
    loader: ‘thread-loader’,
    options: {
    workers: 2 // 进程2个
    }
    }
    {
    loader: ‘babel-loader’,
    options:{
    presents: [‘
    ‘@babel/present-env’
    {
    useBuiltIns: ‘usage’,
    corejs: {version:3},
    targets: {
    chrome: ‘60’,
    firefox: ‘50’
    }
    }
    ]
    }
    }
    ]
    }

    externals
    CDN引入后不会被打包,会从CDN中引入并使用相应的包
    const { resolve } = require(‘path’);
    const HtmlWebpakPlugin = require(‘html-webpack-plugin’);

    module.exports = {
    entry: ‘./src/index/js’,
    output: {
    filename: ‘build.js’,
    path: resolve(__dirname,’build’)
    },
    plugins:[
    new HtmlWebpackPlugin({
    template: ‘./src/index.html’
    })
    ],
    mode: ‘production’,
    externals: {
    // 忽略库名 — npm包名
    jquery:’jQuery’ // 拒绝jQuery被打包进来
    }
    }
    注意:需要在HTML中通过CDN引入

    dll 将不同的文件打包为不同的chunk
    webpack.dll.js
    /
    使用dll技术,对某些库(第三方库:jquery、react、vue…)进行单独打包
    需求: 需要运行webpack.dll.js
    —webpack —config webpack.dll.js
    /

    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:[
    new webpack.DllPlugin({
    name: ‘[name]
    [hash]’, // 映射库暴露的内容是什么
    path: resolve(
    dirname,’dll/mainfest.json’) // 输出文件路径
    })
    ],
    mode:’production’
    }

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