Webpack中Entry与Output的基础配置_09

最新推荐文章于 2022-09-28 10:09:12 发布

原创最新推荐文章于 2022-09-28 10:09:12 发布 · 283 阅读

CC 4.0 BY-SA版权

本文主要介绍了Webpack打包文件的相关配置。包括更改打包文件名，使用占位符解决多文件打包文件名冲突问题，还讲解了entry和output在打包多文件时的配置。此外，针对将打包后的HTML给后端、JS文件上传到CDN的场景，介绍了通过output中的publicPath配置项添加域名。

Entry与Output的基础配置

webpack默认打包后的文件名为main.js，但是我们在下面output中做了更改，filename:“bundle.js”，所以打包index.js生成的文件叫做bundle.js
在这里插入图片描述
我们可以看见我们打包后的文件名为bundle.js

现在把webpack中filename注释掉，再次打包

此时默认打包输出的文件名为main.js

这个时候我有另外一个需求，我想要把src下的index.js反复打包两次，生成两个文件，第一个文件叫做main，第二个文件叫做sub
在这里插入图片描述
进行打包命令，如果是webpack5，打包并不报错，但是只生成一个bundle.js文件，如果是webpack4打包会报错

多个文件打包生成的文件名冲突，想要解决这个问题我们可以怎么做呢？
我们可以用[name]占位符，这个name是什么呢？就是前面入口entry的key值，main和 sub。这样配置打包就会生成main.js和sub.js文件
在这里插入图片描述
再次打包发现并不报错，并且dist文件夹下有了这两个文件
此时我们打开打包后的index.html文件，发现这个html同时引入了main.js和sub.js。是因为我们之前使用了html-webpack-plugin，它发现了我们打包要输出两个文件，它就会把这两个文件都放到inex.html模板里面。
在这里插入图片描述
以上我们讲解了entry和output在打包多个文件的时候该如何去配置。
有的时候会遇见这种场景：我把打包后的index.html给后端，作为后端的入口文件，但是把js这些文件上传到cdn这些域名下面。那么打包生成的index.html就不想要这样引入js文件而是前面多一个cdn地址这样的域名 src="http://cdn.com/main.js"，我们手动去改肯定是不靠谱的，该如何做呢？
在这里插入图片描述
我们在webpack.config.js的output中进行配置publicPath

再次运行，打开dist下面的html，发现成功添加域名

所以后台用index.html，而静态资源放到cdn上的情况下，这个时候我们就会用到output中的publicPath配置项