记一次Webpack配置的过程

webpack 以其稀烂的文档而著称。和其他的技术不一样，你看文档多半是解决不了问题的，你需要的是踩坑后形成的经验。虽然很难用，但 webpack 出的很早，生态庞大，已被广泛使用。如果你的项目很简单，可以考虑使用其他的打包工具，但如果很复杂，多半还是要用 webpack 的。

webpack 为什么这么难用？- 知乎

需求

需要将一个 js 文件放到 html-webpack-plugin 插件设置的模板文件（index.html）下。之前花了些时间没解决，最后用外链的方法临时解决了。现在没有开发任务，刚好有时间去研究 webpack 的配置问题，最后成功改为本地引用的的方式。外链链接到的还是我自己的个人服务器上，这个有很大风险，开发的时候还好，现在要交付了，得赶紧把资源放到本地。

过程

首先我们要用 copy-webpack-plugin 插件，将我们需要的文件拷贝到构建目录。找个公共目录放下 juniper_mode.min.js 文件，然后在 webpack.config.js 加上配置。

1
2
3
4
5
6
7
8


const CopyPlugin = require("copy-webpack-plugin");

plugins: [
    new CopyPlugin({
        patterns: [{ from: resolve(__dirname, './src/assets/juniper_mod.min.js')}]
    })
	// ...
]

试着运行一下，然后报错了：compilation.getLogger is not a function。看起来是版本的问题，我想一定有人遇到和我一样的问题，所以搜索引擎搜了一下，发现了 copy-webpack-plugin 项目下的 issue。相关人员提供的解决方案是将 webpack4 升级为 webpack5，我很惊讶，这可是主版本的升级，是允许 API 的不兼容的，有引入不可控缺陷的风险，如果项目小，不是很复杂，那自然是可以。对此，相关人员的回答是：“no big breaking change, migration is very easy”。说是这么说，谁知道里面会不会有什么坑，而且还是要做迁移的，实在算不上什么好的解决方案。这个报错的产生，我猜是 copy-webpack-plugin 调用了 webpack 的某个不稳定的 API 导致的，只要版本号对了，就能正常工作。往下看，发现有人给出了修改为指定的版本可以正常运行，不需要升主版本号。我试了下，结果成功了。虽然不知道为什么，但它就是行了，算是比较好的方案吧。

然后是给 index.html 加上 script 标签。一开始打算直接在 html 文件下加，但发现开发和生产环境的的 publicPath 不一样，那大概是得在 html-webpack-plugin 插件下配置了。看了下配置项，好像没有要的。不过它列出了基于它的钩子（hook）的功能加强插件，然后我就发现了符合我们需求的 html-webpack-tags-plugin 插件。配置为：

1
2
3
4
5
6


const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin');

plugins: [
    new HtmlWebpackTagsPlugin({ tags: [['juniper_mod.min.js'], append: true}),]
	// ...
]

运行了，可以，挺好用。

于是，我们成功地实现了 webpack 配置引用本地 js 文件的效果。

记一次Webpack配置的过程

需求

过程

See Also: