webpack4和terser-webpack-plugin版本号

webpack 4.x.x 默认使用 terser-webpack-plugin 1.x.x 版本。如果你想使用更高版本的 terser-webpack-plugin，需要手动安装并在 webpack 配置中进行相应的修改。例如，如果你想使用 terser-webpack-plugin 4.x.x 版本，需要执行以下命令安装： ``` npm install terser-webpack-plugin@4.x.x --save-dev ``` 然后，在 webpack 配置中引入并使用新版本的插件： ```js const TerserPlugin = require('terser-webpack-plugin'); module.exports = { // ... optimization: { minimize: true, minimizer: [ new TerserPlugin({ // options }) ] } }; ```

html版本号 webpack_html-webpack-plugin详解

在使用 Webpack 构建项目时，我们可以使用 `html-webpack-plugin` 插件来自动生成 HTML 文件，并且将打包后的 JS/CSS 文件注入到 HTML 文件中。其中，`html-webpack-plugin` 也支持一些配置项来满足不同的需求，其中就包括设置生成的 HTML 文件中的版本号。在生成的 HTML 文件中，我们可以通过以下方式给所有的 JS/CSS 文件添加版本号： ```html <link rel="stylesheet" href="styles.css?v=<%= htmlWebpackPlugin.options.version %>"> <script src="bundle.js?v=<%= htmlWebpackPlugin.options.version %>"></script> ``` 其中，`htmlWebpackPlugin.options.version` 是 `html-webpack-plugin` 的配置项，我们需要将其在 webpack 的配置文件中进行设置。具体操作如下： 1. 安装 `html-webpack-plugin` 插件： ```bash npm install --save-dev html-webpack-plugin ``` 2. 在 webpack 的配置文件中引入 `html-webpack-plugin` 插件： ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); ``` 3. 在 `plugins` 数组中添加 `html-webpack-plugin` 的实例，并设置 `version` 配置项： ```javascript plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', version: '1.0.0' }) ] ``` 其中，`template` 指定了模板文件，`version` 指定了版本号。 4. 在模板文件中使用 `<%= htmlWebpackPlugin.options.version %>` 来引用版本号： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My App</title> <link rel="stylesheet" href="styles.css?v=<%= htmlWebpackPlugin.options.version %>"> </head> <body> <div id="app"></div> <script src="bundle.js?v=<%= htmlWebpackPlugin.options.version %>"></script> </body> </html> ``` 这样，就可以在生成的 HTML 文件中给所有的 JS/CSS 文件添加版本号了。

√ Running tests × The 'compilation' argument must be an instance of Compilation Trace: TypeError: The 'compilation' argument must be an instance of Compilation at JavascriptModulesPlugin.getCompilationHooks (E:\Abysyproject\grafana\test\00\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:206:10) at E:\Abysyproject\grafana\test\00\node_modules\terser-webpack-plugin\dist\index.js:419:67

<think>嗯，用户遇到了一个Webpack相关的错误：“The 'compilation' argument must be an instance of Compilation”。首先，我需要确定这个错误的常见原因。根据错误信息，问题出现在JavascriptModulesPlugin和terser-webpack-plugin的交互中。可能的诱因包括版本不兼容、插件配置错误或者缓存问题。接下来，我应该考虑用户的具体情况。用户之前处理过monaco-editor的问题，现在可能在配置或升级项目时遇到这个问题。可能用户最近更新了Webpack或者相关插件，导致版本不匹配。terser-webpack-plugin和webpack之间的版本兼容性很重要，需要确认他们是否匹配。然后，错误信息中的堆栈跟踪指出问题发生在terser-webpack-plugin的index.js文件中，调用JavascriptModulesPlugin的getCompilationHooks方法时参数不正确。这可能意味着terser-webpack-plugin的版本过旧，无法与当前使用的Webpack 5+兼容，因为Webpack 5引入了破坏性变更。此外，用户可能没有正确清理缓存，导致旧版本的插件或依赖残留。需要建议用户清除node_modules和构建缓存，重新安装依赖。另外，检查其他插件是否与Webpack版本兼容，特别是与terser相关的插件配置是否有误。最后，还需要考虑用户的开发环境，比如是否使用正确的包管理器，是否存在多个Webpack实例导致冲突。可能建议用户检查package-lock.json或yarn.lock，确保所有依赖版本一致。如果问题仍然存在，可能需要更详细的版本信息和配置来进一步排查。</think>遇到`The 'compilation' argument must be an instance of Compilation`错误时，通常由**Webpack插件版本不兼容**引发。以下是分步解决方案： --- ### 一、核心问题定位 ```diff 触发位置：terser-webpack-plugin与webpack版本冲突典型场景：Webpack 5+环境中使用旧版terser-webpack-plugin ``` --- ### 二、强制升级依赖 1. **更新关键包至兼容版本**（重点关注webpack与terser-webpack-plugin的匹配） ```bash # 使用npm npm install webpack@latest terser-webpack-plugin@latest --force # 使用yarn yarn add webpack@latest terser-webpack-plugin@latest ``` 2. **版本对照表** | 依赖包 | Webpack 4兼容版本 | Webpack 5+兼容版本 | |--------|-------------------|--------------------| | `terser-webpack-plugin` | ^4.x | ^5.x 或更高 | | `webpack` | 4.x | 5.x 或更高 | --- ### 三、清除构建缓存 1. **删除旧构建产物** ```bash rm -rf dist/ node_modules/.cache/ ``` 2. **清空npm/yarn缓存** ```bash npm cache clean --force # 或 yarn cache clean ``` --- ### 四、配置验证 1. **检查webpack.config.js**中terser插件初始化方式 ```js // Webpack 5+ 正确配置 const TerserPlugin = require('terser-webpack-plugin'); module.exports = { optimization: { minimizer: [ new TerserPlugin({ parallel: true, terserOptions: { format: { comments: false } } }) ] } } ``` --- ### 五、典型故障排除场景 | 现象 | 原因 | 解决方案 | |------|------|----------| | 使用`webpack@5` + `terser-webpack-plugin@4` | 主版本号不匹配 | 强制升级terser-webpack-plugin至5.x | | 存在多个webpack实例 | node_modules中有重复安装 | 执行`npm dedupe` 或删除lock文件后重装 | | 自定义构建脚本调用方式错误 | 未通过`compiler.hooks`正确接入 | 参考webpack 5官方插件编写规范 | --- ### 六、辅助验证手段 1. **查看版本树结构** ```bash npm ls webpack terser-webpack-plugin # 确保无重复安装且版本符合上表 ``` 2. **创建最小复现demo** ```bash mkdir webpack-test && cd webpack-test npm init -y npm install webpack@5.89.0 terser-webpack-plugin@5.3.10 # 添加基础配置文件后运行测试 ``` --- > 若问题仍未解决，请提供以下信息： > 1. `webpack -v` 和 `npm ls terser-webpack-plugin` 输出 > 2. 完整的webpack配置代码片段 > 3. 操作系统和Node.js版本（通过`node -v`获取）

阅读全文

webpack4和terser-webpack-plugin版本号

html版本号 webpack_html-webpack-plugin详解

相关推荐

Webpack v4.8.3官方版

imagemin-webp-webpack-plugin:Webpack插件，可将图像转换为WebP格式，同时保留原始文件

webpack-aliyun-oss-plugin:webpack阿里云oss上传插件

前端开源库-sw-precache-webpack-plugin

前端开源库-replace-in-file-webpack-plugin

extract-text-webpack-plugin用法详解

基于 vue-skeleton-webpack-plugin 的骨架屏实战

sw-precache-webpack-plugin：Webpack插件，它使用sw-precache生成服务工作者，该服务工作者将缓存webpack捆绑软件发出的资产。 您可以选择通过此插件将sw-precache配置选项传递给webpack

vue-2-webpack-4-boilerplate：准备使用带有Webpack 4配置的Vue 2+项目进行开发和生产

掌握Webpack插件：appcache-webpack-plugin应用教程

Webpack自动化版本控制插件 - git-revision-webpack-plugin

掌握前端开发：html-res-replace-webpack-plugin使用指南

Webpack-sentry-plugin：实现Webpack与Sentry源地图上传的插件

Cannot find module 'script-ext-html-webpack-plugin'

Error: Cannot find module 'script-ext-html-webpack-plugin'\

compression-webpack-plugin 对 webpack 的版本依赖和当前已安装的 webpack 版本不匹配。

大家在看

读写通达信股票软件二进制dat文件

CMOS反相器的掩膜版图-集成电路版图设计

调制解调文档

Windows系统kb2577795-kb2553549 补丁

ISO/IEC 27005:2022 英文原版

最新推荐

解决vue-cli项目开发运行时内存暴涨卡死电脑问题

智慧园区3D可视化解决方案PPT(24页).pptx

虚拟串口软件：实现IP信号到虚拟串口的转换

【Python进阶篇】：掌握这些高级特性，让你的编程能力飞跃提升

后端调用ragflow api

IE6下实现PNG图片背景透明的技术解决方案

【欧姆龙触摸屏故障诊断全攻略】

Educoder综合练习—C&C++选择结构

VBS简明教程：批处理之家论坛下载指南

【欧姆龙触摸屏：新手必读的10个操作技巧】

sw-precache-webpack-plugin：Webpack插件，它使用sw-precache生成服务工作者，该服务工作者将缓存webpack捆绑软件发出的资产。您可以选择通过此插件将sw-precache配置选项传递给webpack