1.3.3 Webpack的配置文件

本节配套代码示例是webpack1-2。

Webpack默认的配置文件是项目根目录下的webpack.config.js文件，在我们执行npx webpack命令的时候，Webpack会自动寻找该文件并使用其配置信息进行打包，如果找不到该文件就使用默认参数打包。

现在我们在项目根目录下新建webpack.config.js文件，其代码如下。

对以上配置可以简单描述为：将a.js作为入口文件开始打包，将打包后的资源输出到当前目录下的bundle.js文件中。下面我们对这个配置文件里的代码进行详细解释。

第1行引入了path模块，path模块是Node.js里的路径解析模块，因为Webpack是基于Node.js的，所以这里可以使用Node.js的功能。读者如果不熟悉Node.js，可以将path模块看成一个普通的JS对象，该对象的一些方法可以供我们使用。后面我们会使用path模块的resolve方法，该方法的作用是将其接收的参数解析成一个绝对路径后返回。

接下来的module.exports是CommonJS模块导出语法，它导出的是一个对象，该对象提供了Webpack打包要使用的参数。

该对象有三个参数，分别是entry、output和mode。

1）entry：Webpack打包的入口文件，这里的入口文件是a.js。

2）output：：Webpack打包后的资源输出文件，它有两个属性，其中path表示输出的路径，filename表示输出的文件名，这里把打包后的文件输出为当前目录下的bundle.js文件。

3）mode：Webpack的打包模式，默认是production，表示给生产环境打包。在不同的打包模式下，Webpack会做不同的优化处理，例如production模式下会对打包后的代码进行压缩。这里设置成none模式，这样代码就不会被压缩了。在后续没有特别说明的情况下，我们都把mode设置为none，以减少Webpack打包模式的干扰。

在使用resolve方法的时候，我们使用了__dirname。__dirname是Node.js的一个全局变量，表示当前文件的路径。这样，path.resolve（__dirname，''）表示的其实就是当前文件夹根目录的绝对路径。

在命令行中执行npx webpack命令后，Webpack就开始打包了，等待几秒就完成了打包。打包完成后，我们把HTML文件里引入的JS文件改成根目录下的bundle.js，然后在浏览器中打开HTML文件，浏览器控制台正常输出数字2022。

新的index.html文件内容如下。

现在，我们学会了Webpack命令行参数打包与配置文件打包两种打包方法。在实际项目中，我们使用的都是配置文件打包。对于简单的项目，我们使用默认的webpack.config.js文件，对于复杂的项目，可能会区分开发环境、测试环境与线上环境而分别使用不同的配置文件，这些在后续章节中还会讲解。

注意：

要真正掌握path.resolve的解析规则，需要时间练习，本书中只会使用该方法解析简单的资源出口路径，即path.resolve（__dirname，''）。此处该方法接收了两个参数，可以近似地理解为把两个路径参数用字符串拼接的方式连接起来。如果你不想深入学习Node.js项目开发，则不必深入研究path.resolve方法。