webpack 学习笔记（三）：默认配置

在 webpack 学习笔记：快速入门的练习中，我们除了在项目中安装了 webpack 和 webpack-cli 以外，没有对 webpack 做任何配置，但是 webpack 依然帮我们成功的打包了项目中的 JS 文件。

这是为什么呢？它是怎么知道要打包 src/index.js 和 src/a.js 这两个文件的呢？

1. webpack 的默认配置

当我们不对 webpack 做任何配置，直接运行打包命令对项目进行打包操作时，webpack 实际是采用了自身的一些默认配置。

在快速入门的练习中，我们用到了 webpack 的三个默认配置：

1. 打包入口文件
2. 打包出口文件
3. 打包模式

打包入口文件

配置打包入口文件，简单来说就是配置 webpack 要从哪一个文件开始进行打包。

一个前端项目中通常都会有很多的文件，webpack 在构建项目时需要知道到底要从哪一个文件开始进行打包。

webpack 默认的打包入口文件就是 src/index.js，之所以还能将 src/a.js 一同打包，是因为 webpack 在打包前还会分析入口文件中的所有依赖文件，将它们全部加载进来后一同进行打包处理。

我们可以试着将项目中的 src 文件换成其他的名字，例如 public，然后再执行一次打包命令。

从截图中可以看到，打包过程中报错了。而错误提示就是说“没有在 webpack-demo 目录中找到 src 文件”，因为 webpack 还是在按照默认配置去找 src/index.js 入口文件。

打包出口文件

打包出口文件，简单来说就是 webpack 将项目中的代码打包成功后生成的文件。

webpack 默认的打包出口文件就是 dist/main.js。它会自动在项目根目录创建 dist 目录，然后将打包好的 main.js 文件放入其中。

打包模式

打包模式，指的就是 webpack 在打包时是采用“开发模式”还是“生产模式”进行打包。

webpack 默认的打包模式是“生产模式”。最直观的感受就是打包后的文件，代码全都压缩成了一行。

当然生产模式的特点肯定还不止这一点，后续我们还会详细的学习。

2. 更改 webpack 的默认配置

虽然啥配置代码都不写就直接打包操作着是很爽，但是在实际项目开发中 webpack 的默认配置可能并不是随时都适用，因此我们还是要学会去更改 webpack 的这些默认配置。

创建配置文件

webpack 的配置文件是项目根目录下的 webpack.config.js。当我们在执行打包命令 npx webpack 时，webpack 会自动寻找该文件并使用其配置信息进行打包。

如果没有该文件，就会使用默认配置进行打包。

因此，我们想要修改 webpack 的默认配置，就需要自己手动去项目根目录中创建一个 webpack.config.js 文件。

暴露配置对象

所有的构建工具都是基于 Nodejs 平台运行的，因此 webpack 的配置代码，我们也采用的是 CommonJS 的模块化语法（不知道 CommoJS 的可以跳过这句不看，不影响后面的学习）。

在 webpack.config.js 文件中创建一个对象，再通过 module.exports 暴露出去，后续所有关于 webpack 的配置，我们就都会在这个对象中进行设置。

配置入口文件

webpack 默认的入口文件是 src/index.js，我们可以通过配置 entry 属性来对入口文件进行修改。

module.exports = {
    entry: './public/index.js'
}

再重新执行打包命令，就可以成功打包了。

配置出口文件

webpack 默认的出口文件是 dist/main.js，我们可以通过配置 output 属性来对出口文件进行修改。

const path = require('path');
module.exports = {
    entry: './public/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    }
}

• path 属性用于设置打包出口文件所在目录的绝对路径；
• filename 属性用于设置打包出口文件的文件名；

其中 build 是打包文件所在目录文件夹名，bundle.js 是打包后的文件名。这两个属性值可根据自己项目需求自行修改。

配置完成后，运行打包命令，可以看到打包成功的项目根目录中会生成一个 build/bundle.js 出口文件。

配置打包模式

webpack 中提供了生产模式 production 和开发模式 development 两种模式来对项目进行打包。

默认的打包模式是生产模式 production，我们可以通过 mode 属性将 webpack 的打包模式更换为开发模式 development。

const path = require('path');
module.exports = {
    entry: './src/a.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    mode: 'development'
}

执行完打包命令后，我们去查看出口文件，可以看到和生产模式打包出来的代码最直接的区别，就是代码没有压缩成一行了，并且还多了一些其他的代码。

3. 小结

在这一章中，我们学习了 webpack 配置中的三个属性：

• entry：配置打包入口文件
• output：配置打包出口文件
• mode：配置打包模式

但这也只是关于这几个属性最基本的用法，后续我们还会单独针对每一个属性去进行一个更详细的学习。