「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」
1. webpack 的配置文件
上一篇文章讲到，执行 npm run build 命令可以运行 build 脚本中的命令，利用 webpack 对代码进行打包。这里就有个问题，webpack 是怎么知道从哪个文件开始进行打包的呢？也就是说 webpack 打包的入口文件是哪个呢？之前的打包过程看起来是把 basic_webpack/src/index.js 文件默认作为打包的入口文件了。
事实上，使用 webpack 进行打包时，在默认情况下，webpack 会将 ./src/index.js 文件（即当前目录下的 src 下的 index.js 文件）作为入口文件开始进行打包。
可以这样验证：把当前项目中的 index.js 文件改名为 main.js，再来执行打包：
可以看到，命令行终端报错了，因为找不到默认的入口文件（./src/index.js）。
但有时候，我们就是想要修改入口文件的名称，比如就叫 main.js，那么又该怎么指定 webpack 的入口文件呢？我们可以这样做：
npx webpack --entry ./src/main.js
上面的命令中，--entry 后面指定了应用程序的入口文件，也就是我们打包时的入口文件。之前打包的结果都是会放到 ./build/main.js 文件中，其实，打包的出口（目录）也可以指定：
npx webpack --entry ./src/main.js --output-path ./build
--output-path 可以简写为 -o，后面指定了 webpack 打包后生成的文件的输出位置（输出到哪个文件夹下），打包效果是这样的：
知道了如何指定打包的入口和出口，如果还想使用 npm run build 命令实现相同的效果，就需要去修改 package.json 中的脚本内容了：
{
...
"scripts": {
"build": "webpack --entry ./src/main.js -o ./build"
},
...
}
但是，我们思考一下，webpack 的配置肯定有很多，如果以这种方式来写，看起来不太优雅，而且如果把所有配置全写在命令的后面也不太现实，也不方便管理。因此，我们通常会单独建一个 webpack 的配置文件进行配置。我们在项目目录下新建一个 webpack.config.js 文件（这个文件的名称一般就叫这个，当然，也可以自定义，后面会讲到），它会被 webpack 自动识别为配置文件，后续打包时，webpack 会自动去读取该文件中的配置信息。
下面我们就把刚才的配置写到配置文件（webpack.config.js）中：
const path = require('path'); // 引入 Node.js 的 path 模块，用于下面绝对路径的获取
// 这里必须使用 CommonJS 的方式导出配置信息（一个对象），而不能使用 ES Module 的方式导出，因为 webpack 是在 Node 环境下运行的，读取配置文件的过程也是在 Node 环境下进行的，要想在 Node 环境下支持 ES Module，是需要做额外的配置的。
module.exports = {
entry: './src/main.js', // 打包的入口（应用程序开始执行的地方）
output: { // 和输出有关的配置
path: path.resolve(__dirname, './build'), // 注意，output.path 对应的必须是一个绝对路径（直接写出绝对路径可能太长了，因此这里通过 path 模块的 resolve() 方法解析出绝对路径，__dirname 可以获取当前文件所在的路径，resolve() 方法会从右往左处理参数，拼接出绝对路径，详解见官网：https://nodejs.org/dist/latest-v16.x/docs/api/path.html#pathresolvepaths）
filename: 'bundle.js' // 输出的文件名
}
}
同时，修改 package.json 中的 build 脚本的内容，只需要保留 webpack 即可：
{
...
"scripts": {
"build": "webpack"
},
...
}
再来运行 npm run build 命令查看效果：
可以看到，成功把代码打包进了 ./build/bundle.js 中。
如果你想修改 webpack 配置文件的名称，比如改为 wp.config.js，那么再想成功打包，就需要在命令行中使用 --config 标志给 webpack 命令指定配置文件。我们修改 package.json 中的对应脚本：
{
...
"scripts": {
"build": "webpack --config wp.config.js"
},
...
}
再来进行打包：
可以看到，也能成功打包。但在这里，建议还是改回原来的 webpack.config.js 这个名称（也不用 --config 来指定配置文件了）。
现在，我们已经有了 webpack 的配置文件，到时候通过 webpack 对项目进行打包的时候，它就会读取配置文件中的信息，根据配置信息决定如何对项目进行打包。所以，这个配置文件是非常重要的。后面我们要讲的很多东西都会基于这个配置文件进行讲解。
