一、袁老师的笔记

webpack提供的cli支持很多的参数，例如--mode，但更多的时候，我们会使用更加灵活的配置文件来控制webpack的行为

默认情况下，webpack会读取webpack.config.js文件作为配置文件，但也可以通过CLI参数--config来指定某个配置文件

配置文件中通过CommonJS模块导出一个对象，对象中的各种属性对应不同的webpack配置

注意：配置文件中的代码，必须是有效的node代码
因为配置文件中的代码需要在打包过程中运行的，注意区分的是对于src下面的文件，webpack仅仅是作为一个打包，并不会运行

当命令行参数与配置文件中的配置出现冲突时，以命令行参数为准。

基本配置：

  1. mode：编译模式，字符串，取值为development或production，指定编译结果代码运行的环境，会影响webpack对编译结果代码格式的处理
  2. entry：入口，字符串（后续会详细讲解），指定入口文件
  3. output：出口，对象（后续会详细讲解），指定编译结果文件

二、自己的总结

2.1 大体认识

webpack的配置文件简单来说就是webpack.config.js文件。为什么需要这个文件？

  • 首先，我们比如说在安装好webpack之后需要打包一个dist下面的文件，如果是直接npx webpack，会有警告提示你没有设置mode。没有设置mode怎么解决呢？
  • 解决方式有三个
  • 意识直接命令行中npx webpack —mode=development / production
  • 第二个是在package.json中设置脚本，在脚本中配置上面的命令分别是dev 和 build ，然后分别对应 npm run dev 或者是 npm run build.
  • 第三个方法就是本节课的方法，也就是我们通过自己创建一个webpack.config.js文件（这个文件其实webpack自己就有，只是在初始化的时候不显示，需要自己手动的建立）

    2.2 注意的细节点

  1. 配置中的代码，必须是有效的node端的代码 为什么？

解释：首先，webpack为我们提供的服务是根据我们的入口文件打包我们的模块，然后在dist目录下生成一个main.js。
接下来，配置文件是webpack进行打包的基础，webpack会根据我们在配置文件中写的键值对来进行文件的生成、读取，所以说必须在node环境下运行。
本质：配置文件本身上就是一个js文件，配置文件最终导出的是一个用commonJS语法写成module.exports的对象。

2.3 实际测试

  1. 首先自己创建文件并写入下面的内容（在node环境下面，npm初始化，安装webpack和webpack-cli）

image.png
2.测试
image.png
我们发现最终输出的文件已经更改
image.png