这是一个模板HTML

--- title: 掌握webpack（一）一张图让你明白webpack中output的filename、path、publicPath与主流插件的关系 date: 2022-12-31 tags: - webpack --- 开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，[点击查看活动详情](https://juejin.cn/post/7167294154827890702 "https://juejin.cn/post/7167294154827890702") webpack的核心概念，放到2022年相信很多的小伙伴都已经非常清楚了。但是，对于webpack配置中的output.path、output.filename以及output.publicPath，还有很多小伙伴还不理解。本文讲围绕output.filename、output.path与output.publicPath，讲解它们的功能，并分析这些配置与webpack中常使用到的MiniCssExtractPlugin、HtmlWebpackPlugin等插件的关系。直接上总结图 ![160-v3-path-filename-publicPath](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a6f79fadf614c538e60fe67cf7e46b5~tplv-k3u1fbpfcp-zoom-1.image) # 基础环境搭建我们现在基于webpack搭建了一个前端项目，完成项目初始化，并安装webpack三件套： ```shell yarn init yarn add -D webpack webpack-cli webpack-dev-server ``` 安装完成以后，我们在项目根目录下创建一个webpack.config.js，一个极简的配置如下： ```js const {resolve} = require('path'); module.exports = { mode: 'development', entry: { main: resolve(__dirname, 'src', 'index.js') }, output: { filename: 'main.js', path: resolve(__dirname, 'dist') } } ``` 然后，在package.json中添加脚本： ```diff + "scripts": { + "build": "webpack --config webpack.config.js" + }, "devDependencies": { "webpack": "^5.75.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" } ``` 接着，我们在src目录下创建一个index.js文件，这个js文件的内容就是从dom上找到id为app的元素，并给其内部添加一个文本`"hello, world"`： ```js document.getElementById('app').innerText = 'hello, world' ``` 最后，我们运行webpack的构建过程： ``` yarn build ``` 运行以后，就会在项目根目录下的dist目录下生成main.js。 ![010-base-config](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fbef5770d0d54509838273f5f31b2d98~tplv-k3u1fbpfcp-zoom-1.image) *注意：这里并没有配置关于js的解析，因为webpack默认就会处理js文件。* ## 引入HtmlWebpackPlugin 仅仅是生成目标js文件，可能还不是我们期望的效果。对于一个项目来说，我们通常还希望有一个html来展示UI，并运行js代码，但是手工创建可能不能是一个好的方案。这里，我们引入本项目的第一个插件：**HtmlWebpackPlugin**。 ``` yarn add -D html-webpack-plugin ``` HtmlWebpackPlugin插件**基础**功能： 1. 它会使用一个模板来生成一个html； 2. 在生成的html中插入节点（譬如，js对应的script节点等）。安装好该插件以后，在之前的webpack配置中，我们适当的修改： - 引用插件，并new一个HtmlWebpackPlugin实例（不添加其他配置） ```diff const {resolve} = require('path'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { @@ -7,5 +8,10 @@ module.exports = { output: { filename: 'main.js', path: resolve(__dirname, 'dist') - } + }, + plugins: [ + new HtmlWebpackPlugin({ + + }) + ] } ``` 让我们再次运行构建脚本后，我们会发现，dist目录中，不仅仅生成了main.js，还生成一个index.html： ![020-a-new-indexhtml](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2f9ed7260884f3582287af29920f582~tplv-k3u1fbpfcp-zoom-1.image) 通过检查这个index.html的内容可以看到，这个插件不仅仅帮我们生成了一个html，还在这个html中的head节点中创建了一个script节点，并且src属性填写的是main.js。 ![030-check-new-indexhtml](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/11ab9fc5bc694eb9b3d8f27ab09b8625~tplv-k3u1fbpfcp-zoom-1.image) 此时，我们使用浏览器直接打开这个index.html，尽管是在文件系统，但浏览器还是可以通过script节点中的属性`src="main.js"，从index.html所在同级目录中加载main.js。然而，运行起来有报错： ![040-raw-indexhtml-script](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/540cdbc1ca5d4f5682ae25cac97ded5d~tplv-k3u1fbpfcp-zoom-1.image) > PS：这里有同学可能会认为是script节点在body以前加载的，所以会报错。但是实际不是这样的，这里script节点中有一个`defer`属性，这个属性表明，文档加载完毕以后才会执行main.js（[MDN - defer](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script#attr-defer)），所以，我们不用担心由于DOM未加载完就执行js代码而造成报错。 **这个地方的问题在于：我们的main.js中会执行查找id为app的元素，但是实际生成的html是没有这个元素的。** 为了解决上述的问题，我们希望能够自定义生成index.html。通常的做法就是： 1. 在项目根目录创建一个public目录，在其中创建一个index.html（项目根目录/public/index.html），内容如下（重点是body里面添加了`

`）： ```html 这是一个模板HTML

``` 2. 然后，修改webpack配置中，关于HtmlWebpackPlugin的配置，配置插件`template`参数，表明使用上述的创建的index.html： ```diff plugins: [ new HtmlWebpackPlugin({ + template: resolve(__dirname, 'public', 'index.html') }) ] ``` 我们再次运行构建，可以看到在dist目录下的index.html是基于我们提供的模板生成： ![050-indexhtml-by-custom](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35f93ab2f58d435e934c568931f90355~tplv-k3u1fbpfcp-zoom-1.image) 此时，我们再次打开这个html，可以看到正确的处理后的结果： ![060-right-handle](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4b0bc72f2b6478480e249c0cecda667~tplv-k3u1fbpfcp-zoom-1.image) # output.path与output.filename 让我们回到关于output.path与output.filename上来。回顾我们的webpack配置： - output.filename：确定js最终生成的文件名 - output.path：确定js所在的根路径 js最终生成的路径是： `output.path（绝对路径） + output.filename（文件名，可以有相对路径前缀）` 做一个简单的实验便可知，例如，我们修改配置如下，把output.filename改为`"js/main.js"`，output.path改为`'resolve(__diranme, "my-dist")'`： ```diff output: { - filename: 'main.js', - path: resolve(__dirname, 'dist') + filename: 'js/main.js', + path: resolve(__dirname, 'my-dist') }, ``` 重新经过构建以后，我们会看到`my-dist`目录被创建，并且这个目录下面还会创建`js`目录，`js`目录中会有main.js，正好匹配了`output.path（项目根目录/my-dist） + output.filename（js/main.js）`。 ![070-new-output-path-and-filename](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c3994e5a5554516880316e29daf8265~tplv-k3u1fbpfcp-zoom-1.image) 但是，output.filename与output.path仅仅影响js的生成吗？不然，让我看看这两个参数对于HtmlWebpackPlugin的关联关系。 ## 与HtmlWebpackPlugin的关联对于上述生成结果，我们会注意到，在webpack配置中的HtmlWebpackPlugin插件部分，我们没有编写过任何关于index.html的生成路径的配置，但这个index.html最终也生成到了`"my-dist"`目录下（与output.path一致）；此外，我们还可以发现，生成的index.html里面的script节点的src属性，是`"js/mian.js"`（与output.filename一致）。我们可以整理一个图，来描述相关配置与js构建、HtmlWebpackPlugin插件的关联关系：![080-v1-path-filename](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5b7979c02114c23a78d4fe38034ad75~tplv-k3u1fbpfcp-zoom-1.image) 总结来说，output.path与output.filename不能单纯只作为输出js的配置，HtmlWebpackPlugin也会使用它们： - HtmlWebpackPlugin会使用**output.path** + **插件本身的filename配置**，作为html的生成路径； - HtmlWebpackPlugin会使用**output.filename**作为生成的html中script节点src属性的js路径（**特别注意：这里还不准确，后续会补充修正！**）。读者可以根据上述的表格，自己进行实验验证。 ## 关于output.filename的注意点对于output.filename，需要注意的是，不能是一个绝对路径，譬如：`"/js/main.js" or "/main.js"`，一旦配置成了绝对路径，就会看到报错： ``` configuration.output.filename: A relative path is expected. However, the provided value "/js/main.js" is an absolute path! Please use output.path to specify absolute path and output.filename for the file name. ``` 你只能写成：`"js/main.js"`或`"./js/main.js"`。然而，由于生成的html中script节点属性src的值，来源于这个output.filename值，如果我们有需求，希望生成的src等于一个绝对路径，譬如：`src="/js/main.js"`，仅仅靠output.filename是不行的。于是乎，output.publicPath就登场了！ # output.publicPath 首先，在webpack中，这个参数不配置的话，默认是空字符串`""`。然后，我们需要**纠正我们前面的一个结论**： - ~~HtmlWebpackPlugin会使用**output.filename**作为生成的html中script节点src属性的js路径~~ 实际上，script节点的src属性的路径，并不只是output.filename来决定的，而是由output.publicPath与output.filename共同决定： `src = output.publicPath（还有斜杠的特殊处理，后面讲）+ output.filename` 只是因为output.publicPath默认是空字符串，所以我们前面生成出来的只是`src="js/main.js"`。这里，我们可以做一个简单的实验，配置publicPath为`"/"`，则生成的节点就会成为：`