Webpack实战：入门、进阶与调优
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.4.4　使用配置文件

为了满足不同应用场景的需求，Webpack拥有非常多的配置项以及相对应的命令行参数。我们可以通过Webpack的帮助命令来进行查看。

npx webpack –h

部分参数如图1-3所示。

图1-3　Webpack配置参数

从之前我们在package.json中添加的脚本命令来看，当项目需要越来越多的配置时，就要往命令中添加更多的参数，那么到后期维护起来就会相当困难。为了解决这个问题，可以把这些参数改为对象的形式专门放在一个配置文件里，在Webpack每次打包的时候读取该配置文件即可。

Webpack的默认配置文件为webpack.config.js（也可以使用其他文件名，需要使用命令行参数指定）。现在让我们在工程根目录下创建webpack.config.js，并添加如下代码：

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
    },
    mode: 'development',
}

上面通过module.exports导出了一个对象，也就是打包时被Webpack接收的配置对象。先前在命令行中输入的一大串参数就都要改为key-value的形式放在这个对象中。

目前该对象包含两个关于资源输入输出的属性——entry和output。entry就是我们的资源入口，output则是一个包含更多详细配置的对象。在Webpack配置中，我们经常会遇到这种层叠的属性关系。这是由于Webpack本身配置实在太多，如果都放在同一级会难以管理，因此出现了这种多级配置。当开发者要修改某个配置项时，通过层级关系找下来会更加清晰、快捷。

之前的参数--output-filename和--output-path现在都成为了output下面的属性。filename和先前一样都是bundle.js，不需要改动，而path和之前有所区别。Webpack对于output.path的要求是使用绝对路径（从系统根目录开始的完整路径），之前我们在命令行中为了简洁所以使用了相对路径。而在webpack.config.js中，我们通过调用Node.js的路径拼装函数——path.join，将__dirname（Node.js内置全局变量，值为当前文件所在的绝对路径）与dist（输出目录）连接起来，得到了最终的资源输出路径。

现在我们可以去掉package.json中配置的打包参数了：

……
  "scripts": {
    "build": "webpack"
  },
……

为了验证最终效果，再对add-content.js的内容稍加修改：

export default function() {
    document.write('I\'m using a config file!');
}

执行npm run build，Webpack就会预先读取webpack.config.js，然后进行打包。完成之后我们打开index.html进行验证，结果如图1-4所示。

图1-4　index.html内容变为了“I’m using a config file！”

上一章目录下一章