webpack 配置文件

像上一节中，我们每次在打包文件时都需要手动输入源文件名和输出文件名，这样会比较麻烦，要解决这个问题，我们可以使用配置文件来进行管理。

本节我们来学习 webpack 的配置文件 webpack.config.js ，由于 webpack 配置文件是导出一个对象的 JavaScript 文件，因此很少有 webpack 的配置看起来是完全相同的。

因为 webpack 配置是一个标准的 Node.js 模块，所以在配置文件中可以执行以下操作：

• 通过 require() 导入其他文件。
• 通过 require() 使用 npm 的工具函数。
• 使用 JavaScript 控制流表达式，例如 ?: 操作符。
• 对常用值使用常量或变量。
• 编写和执行函数以生成配置的一部分。

创建webpack.config.js配置文件

webpack 在执行打包命令的时候，除了在命令行传入参数，例如 webpack 入口文件路径 输出文件路径 。还可以通过指定的配置文件来执行。默认情况下，会搜索项目中的 webpack.config.js 文件，这个文件是一个 Node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。

通常 webpack.config.js 文件放在项目的根目录下，例如我们在 xkd_webpack 项目根目录下创建一个 webpack.config.js 文件，在这个文件中来配置处理入口文件和输出文件。

示例：

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

这样我们只需要在命令行中执行 webpack 命令，就会开始自动打包文件啦。

执行 webpack 命令后，出现如下图所示内容说明文件打包成功：

可以看到，执行 webpack 命令的运行结果和上一节的中 webpack index.js -o bundle.js 命令的运行执行结果是一样的，但是很显然，执行 webpack 命令要方便很多。

这样还有一个问题，就是每次我们修改了源文件之后都需要重新执行 webpack 命令，所以我们可以通过在配置文件中添加 watch 属性来自动检测文件变化并重新打包。

示例：

将配置文件修改为如下内容，这样我们每次修改源文件后都会自动重新打包：

module.exports = {
    entry:'./index.js',
    output:{
        path:__dirname,
        filename:'./bundle.js'
    },
    mode: 'development',
    watch: true
}

下面是几个基本的 webpack 命令：

• webpack：最基本的启动 webpack方法。
• webpack -w：提供 watch 方法，实时进行打包更新。
• webpack -p：对打包后的文件进行压缩，提供 production。
• webpack -d： 提供 source map，方便调试。

模式

webpack4.0 中可以设置 mode，通过设置 mode 的值，可以轻松设置打包环境，可取值有：

选项	描述
development	开发模式，通过 DefinePlugin 插件将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin
production	生产模式，默认值。通过 DefinePlugin 插件将 process.env.NODE_ENV的值设为 production。启用 FlagDependencyUsagePlugin、 FlagIncludedChunksPlugin、ModuleConcatenationPlugin、 NoEmitOnErrorsPlugin、 OccurrenceOrderPlugin、 SideEffectsFlagPlugin 和 TerserPlugin
none	通过 DefinePlugin 插件将 process.env.NODE_ENV 的值设为 node。使用默认的优化项

如果将值设置为 development，将获得最好的开发阶段体验。这得益于 webpack 针对开发模式提供的特性：

• 浏览器调试工具。
• 注释、开发阶段的详细错误日志和提示。
• 快速和优化的增量构建机制。

如果将值设置为 production，webpack 将专注项目的部署：

• 开启所有的优化代码。
• 更小的 bundle 大小。
• 去除掉只在开发阶段运行的代码。
• Scope hoisting 和 Tree-shaking 。

在配置文件中设置mode ：

module.exports = {
  mode: 'development'
};

或者可以将其作为 CLI 参数传递：

webpack --mode=development

自定义打包命令

除了直接输入 webpack 命令来执行文件打包，我们还可以自定义打包命令。例如我们可以使用 npm 来引导任务执行，对其进行配置后可以使用简单的 npm run 命令来代替这些繁琐的命令。

其实也很简单，只需要在 package.json 文件中对 npm 的脚本部分进行一些修改，例如：

"scripts": {
    "build": "webpack --config webpack.config.js" 
}

这样通过 --config 参数加 webpack.config.js 来指定要执行的文件，此时要进行文件打包，就只需要执行 npm run build 命令即可。其中 build 是我们自己定义的，除了 build 我们也可以使用其他的名字，例如使用的是 test ，那执行的就是 npm run test 命令了。