认识`webpack`的配置文件

配置文件的作用

创建并使用默认配置文件在项目根目录下创建一个名为webpack.config.js。其内容如下:

这个文件的意义是导出一个配置项：用来对webpack的打包行为做设置。在操作层面，就是学习如何去使用这个文件。
然后再次运行打包命令，查看产生的main.js文件的内容，对比与之前的变化。

设置入口与出口

入口文件：指定了webpack从哪个文件开始工作。在它的内部会引入其他的模块，这样在打包时就会“顺藤摸瓜”也将其他的文件打包进来。
出口文件：指定了最后打包之后的文件，重点是这个文件的具体位置。

了解默认入口文件修改目录结构，新建一个src目录，并把提前准备好的js文件移动到它下面。

设置入口文件 (1).调整目录结构如下：

(2).然后，修改配置项
在webpack.config.js的配置项中添加entry项

重新打包，测试

指出出口文件在webpack.congif.js中设置output项。

output中的filename⽤来指定打包后的⽂件名字。
output中的path⽤来指定打包后的路径。注意：它必须是绝对路径。所以，这⾥引⽤path模块中的 join和__dirname来⽣成绝对路径。
如果path中的路径不存在，它会⾃动创建。

修改打包模式

webpack.config.js中的mode项⽤来设置打包的⽅式，如果不设置，会默认为production。

webpack给mode 提供了两个模式:

简化打包命令背景
当涉及多个打包配置要指定时，打包命令⽐⽐较复杂，难以记忆。
定制script
可以在package.json中添加script命令来快速启动webpack，格式如下：

注意：在script中不再需要添加npx。它会⾃动在node_modules/.bin中去找命令。
这样，我们就得到了两个可以执⾏的命令: dev, build 。
可以在根⽬录下的⼩⿊窗中通过:
npm run build, npm run dev 来运⾏

三年努力，五年摸鱼-webpack篇（中）