type
Post
status
Published
date
Feb 6, 2021
slug
kolyq9
summary
本文介绍了在Webpack中使用多进程/多实例解析资源的方法，以及优化Webpack性能的两种方法：在Webpack4中使用hard-source-webpack-plugin插件，在Webpack5中使用cache选项。本文还提到了使用hard-source-webpack-plugin插件的注意事项。
category
技术分享
tags
Webpack
创建时间
Apr 7, 2023 07:15 PM
更新时间
Apr 10, 2023 05:55 AM
password
icon
Task List
引言
年末了，趁着项目排期相对空闲，抽空阅读吴浩麟老师的《深入浅出 Webpack》这本书，准备搞一搞 webpack 中的点点滴滴，出一个 webpack 优化专题。刚好最近在想着做一个适合团队内部的前端中后台脚手架，来学习学习嘿嘿。
配置
在 webpack4.0 中使用 hard-source-webpack-plugin
npm install hard-source-webpack-plugin -D
// webpack.config.js const HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); module.exports = { entry: // ... output: // ... plugins: [ new HardSourceWebpackPlugin() ] }
具体配置可以参考官方文档hard-source-webpack-plugin
在 webpack5.0 中使用 cache 选项
在 webpack5.0 中，此插件的实现已内置到 cache 选项中，所以不能在 5.0 版本中使用，会报错！！
因为在 webpack5.0，这个依赖被删除了！
我在issue中找到了可以使用 cache 选项来配置。
使用说明：
具体配置文档请参考webpack5.0#cache