深入 Webpack5 等构建工具系列二(2) - webpack 手动指定配置文件

251 阅读2分钟

这是我参与8月更文挑战的第15天,活动详情查看:8月更文挑战

我们已经知道,webpack 会自动使用名为 webpack.config.js 的配置文件,那如果我们的配置文件并不叫 webpack.config.js,而是叫其它的名字呢?

  • 比如我们将 webpack.config.js 修改成了 wk.config.js
  • 这个时候我们可以通过 --config 来指定对应的配置文件;

我们可以先来测试一下,首先把 webpack.config.js 修改为 wk.config.js,然后在命令行终端中执行 npm run build 命令(注意,当前 package.json 文件中脚本 "build" 的内容为 "webpack"),结果如下:

image-20210123090634061.png

可见,运行报错了,没有成功打包。这是为甚莫呢?原因非常的简单哈,因为默认情况下,webpack 进行打包时,当我们执行 npm run build 命令时,会找到 package.json 文件中 "scripts" 里我们自己定义的 "build" 这项脚本里的命令(这里也就是 “webpack” 命令啦~不过和直接在命令行中执行 webpack 的区别在于,package.json 里配置的脚本命令 webpack 在执行时会优先使用局部安装的(当前项目中的)webpack,如果没有局部安装的 webpack,则会使用全局安装的 webpack,而直接在命令行中执行 webpack,则会直接使用全局安装的 webpack 哈),接下来,会先查看当前文件夹下面是否存在名为 webpack.config.js 的文件,如果有,则会根据这个文件里的配置开始执行相关的编译过程,如果没有,则依然会去寻找当前文件夹下的 src 文件夹下的 index.js 文件。但是我们这里已经把 src 目录下的 index.js 改名为了 main.js 了,所以最后就找不到 index.js 文件,因此才会出现上图中的报错。

但事实上,我们是有配置文件的,只是它的名字不叫 webpack.config.js,而是叫 wk.config.js,甚至后面我们还会把很多配置文件都放在一个文件夹下(比如叫 config 的文件夹),那这时我们该如何指定某个文件为 webpack 的配置文件呢?

来,我们去查阅下文档

image-20210123100517805.png

可以看到,通过 --config 可以指定 webpack 的配置文件,那么,我们就可以这样做了:修改 package.json 文件中 "scripts" 里的 "build" 一项的内容为 "webpack --config ./wk.config.js"(这里也可以不加 ./),如图:

image-20210123102543769.png

再执行 npm run build,就能正常编译打包了。