携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情
前言
上文讲解了一个最基本的 Webpack 使用的示例。通过执行 wbpack 命令就可以进行打包，但是这种方式很受限，入口文件必须为 src/index.js，输出文件只能是 dist/main.js。为了更加灵活的使用 Webpack，我们来了解一下它的常用配置，以及配置文件的使用。
常用配置
入口配置
默认为 src/index.js，通过 --entry 参数指定其他文件作为入口文件：
# 使用 src/main.js 作为入口文件，注意路径的写法，必须是绝对路径或者 .、./ 开头的相对路径
pnpm webpack --entry ./src/main.js
输出配置
默认打包出来的文件名为 main.js，位于 dist 目录下。可通过 --output 进行配置。
# --output-path 指定输出目录，--filename 指定输出文件名
pnpm webpack --output-path bundle --output-filename bundle.js
模式配置
项目都会有开发环境和生产环境的分别。
在不同的环境中就需要使用不同的配置进行打包，比如开发环境中为了方便调试，我们希望可以使用 sourceMap，不压缩代码；在生产环境中就需要压缩代码来减少体积。
Webpack 4 推出了 mode 的概念，它有两个值 development 和 production。Webpack 内部为两种模式都已经做了一些基本的最佳配置。在执行打包命令时，通过 --mode 参数指定一个模式，webpack 会自动使用格式的配置进行打包。
pnpm webpack --mode development
来看下两种模式的区别。
production 模式
当执行 webpack 命令时，如果不指定 mode 的值，则默认使用 production ：
打包文件只有 39 字节，而代码只剩下一行：
development 模式
文件大小是 4.1 kb，格式很规整，还有大量的注释：
配置文件的使用
除了上面的 entry ，output，mode，后面还会配置 loader，plugin等内容。
如果都在命令行中手敲这些配置会非常繁琐，所以 webpack 提供了配置文件，将所有的配置项集中管理。
项目根目录下新建一个配置文件 webpack.config.js，
const path = require('path')
module.exports = {
mode: 'development',
// 入口文件必须是 ./ 开头的相对路径或绝对路径
entry: './src/index.js',
output: {
filename: 'main.js',
// 输出路径必须为 绝对路径
path: path.resolve(__dirname, './dist')
}
}
看下这个文件的特点：它使用 module.exports 导出配置内容，这是 CommonJS 规范。因为 webpack 就是基于 Node.js 开发的一个工具，这个文件最终是运行在 node 环境中的，所以必须使用 module.exports 。
同时，该配置文件袋名字为 webpack.config.js，这是因为 webpack 默认会去找这个文件。
假如配置文件的文件为 my.webpack.js，那么在执行 webpack 命令时，需要通过 -c 或者 --config 去指定具体的文件，例如：
pnpm webpack -c my.config.js
小结
本文介绍了 webpack 最基本的三个配置， entry 、output 和 mode，也介绍了配置文件的使用。
后面的文章会介绍关于 webpack 配置的更多的内容，包括使用 loader 来处理多种类型的模块，使用 plugin 扩展 webpack 的功能。
