模块。出口={
扩展:['。js ', '。jsx ', '。ts ', ' .tsx '],
}
之前
默认值
扩展:["。js "、" . json”)
之前
<强>使用动态链接库预编译大模块
使用动态链接库,提前编译大模块
原理请见补充3
新建一个文件webpack_dll.config.js,内容如下
const path=要求(“路径”);
const webpack=要求(“webpack”);//复用的大模块放在这里,这样每次都不需要重新编译了
const供应商=[
“反应”,
“react-dom”,
“lodash”
];
模块。出口={
模式:“发展”,
输出:{
路径:路径。解决(__dirname’。/dist '),
文件名:“[名字]. js”,
库:“[名字]”,
},
条目:{
供应商,
},
插件:[
新webpack.DllPlugin ({
路径:路径。解决(__dirname '。/dist/manifest.json '),
名称:“[名字]”,
}),
),
}；
之前
执行<代码> webpack——配置webpack_dll.config.js 进行首次编译(如果更新版本需要再次编译)
然后在你的webpack配置文件中引入manifest.json
插件:[
新webpack.DllReferencePlugin ({
清单:要求(“。/dist/manifest.json”)
}）
),
之前
<强>使用HappyPack同时处理多个装载机编译任务
为了发挥多核CPU电脑的功能,利用HappyPack将任务分发给多个子进程并发执行
const path=要求(“路径”);
const HappyPack=要求(“HappyPack”);//共享5个进程池
const happyThreadPool=HappyPack。ThreadPool({大小:5});
模块。出口={
条目:“。/src/index.js ',
输出:{
文件名:“bundle.js”,
路径:路径。解决(__dirname,“距离”),
},
模块:{//noParse:[/反应\ .production \ .min \ . js/美元),
规则:[{
测试:/\ . js/美元,//和下面插一件id直,happypack才可以找到
用途:[' happypack/装载机# 63;id=巴别塔”),
包括:路径。解决(__dirname“src”)
})
},
插件:[//插件可以实例化多个
新HappyPack ({//与上面对应
id:“巴别塔”,//实际要使用的加载程序
加载器:“babel-loader& # 63; cacheDirectory”,//默认开启进程数
线程:3,//是否允许happyPack打印日志
详细:没错,//共享进程数,如果你使用超过一个happyplugin,官方建议共享进程池
threadPool: happyThreadPool
}）
),
}；
之前
原理见补充4
使用ParallelUglifyPlugin多进程同时压缩文件
ParallelUglifyPlugin是在UglifyJS基础上,增加了多进出处理的能力,加快了压缩速度
从“进口ParallelUglifyPlugin webpack-parallel-uglify-plugin ';
模块。出口={
插件:[
新ParallelUglifyPlugin ({
测试中,
包括,
排除,
cacheDir,
workerCount,
sourceMap,
uglifyJS: {
},
糟蹋:{
}
}),
),
}；
