关于webpack: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'
    }
}

其中，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：配置打包模式

但这也只是对于这几个属性最根本的用法，接下来咱们还要独自针对每一个属性去进行一个更具体的学习。