「这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战」

Webpack 的配置文件介绍

1 什么是webpack的配置文件

1.1 配置文件初体验

在前面的webpack初体验中，我们在命令行中输入了指令：

npx webpack ./src/index.js -o ./dist --mode=development

这个指令中包含了一些配置信息：

./src/index.js配置了入口起点文件
-o ./dist配置了输出地址
--mode=development配置了打包模式

事实上，这些配置信息可以统一写在一个js文件中，通过在命令行中指定这个配置文件来执行webpack

1.2 webpack.config.js

前面我们自己创建了config.js作为配置文件，并且在命令行中为webpack指定了配置文件路径

npx webpack --config config.js

事实上如果不指定配置文件路径，webpack默认会搜索当前目录下名为webpack.config.js来作为配置文件，所以通常我们会创建webpack.config.js来作为配置文件

读者可自行尝试将config.js文件名改为webpack.config.js，再输入命令

npx webpack

即不指定配置文件路径，看看webpack是否能正常打包输出

2 管理资源

webpack 最出色的功能之一就是，除了引入 JavaScript，还可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件。

2.1 打包样式资源

前面我们尝试了在index.js中导入了css样式资源后，webpack打包会报错，因为webpack本身不能处理css类型的文件

这时候就需要loader的帮助

loader 用于对模块的源代码进行转换。loader 可以将文件从不同的语言转换为JavaScript

2.1.1 css-loader

这个loader能够帮助webpack解析css文件中等css代码

可以参考官方文档css-loader

2.1.2 style-loader

上一个示例说明css-loader的作用只是解析css代码成一个数组，并不能够让样式生效

style-loader则可以让样式生效：它会创建style标签，并将css-loader解析到到css代码插入style标签，然后将style标签添加到head标签中

可以参考官方文档style-loader

2.1.3 less-loader

通常我们在开发时会使用预处理器来写样式，比如less、sass等，这类文件需要对应的loader将它们解析成css代码

拿less举例，需要用less-loader来将less文件解析成css

可以参考官方文档less-loader

2.1.4 总结

less-loader(或sass-loader)将less(或sass)解析成css
css-loader将css解析成字符串数组
style-loader根据字符串数组创建style标签放到head标签中

官方文档加载CSS

2.2 打包HTML资源

前面我们打包完样式资源之后，都是手动创建一个index.html，并手动将bundle.js引入后，在浏览器查看效果。那有没有什么办法能够自动创建html页面，并且自动引入相关样式以及js代码呢？

webpack能够借助插件解决loader无法实现的事情，打包HTML资源就是其中一件

打包HTML资源需要用到的插件是：html-webpack-plugin

可以参考官方文档plugin

2.3 打包图片资源

对于图片资源，最常用的有2种使用方式：

CSS中的background-image属性
html中的img标签

2.3.1 import image

无论是两种方式中的哪种，都可以通过DOM来设置，故在index.js中import image时，图片需要被打包输出并得到能够访问的url

在webpack5中，可以使用内置的资源模块(Asset Modules)来导出文件并生成url

2.3.2 background-image

在webpack5之前，需要借助url-loader、file-loader来处理css中的背景图片

现在，在使用css-loader时，若遇到url('./my-image.png')，loader会识别这是一个本地文件，并将'./my-image.png'路径，替换成输出目录中图像的最终路径

2.3.3 HTML img

对于HTML中的img标签，需要使用html-loader来处理，图片才能正常显示

类似地，html-loader遇到<img src="./my-image.png"/>，会识别这是一个本地文件，并将'./my-image.png'路径，替换成输出目录中图像的最终路径

可以参考官方文档-加载images图像

2.4 打包fonts字体

和import image类似，只需要为字体图标依赖的ttf、woff等文件添加资源模块类型即可

可以参考官方文档-加载fonts字体

3 DevServer(开发服务器)

前面我们写完代码后需要输入打包指令打包以后才能在浏览器查看效果，这使得我们每次修改完都需要打包，这对开发者来说很麻烦

DevServer可以实现实时重新加载(living reloading)，也就是修改完代码保存后会自动编译、自动打开浏览器、自动刷新浏览器

但是它只会在内存中编译打包，不会有任何输出

可以参考官方文档-DevServer

4 总结

以上就是webpack开发时的基本配置，可以尝试将他们全部写在一起

另外，在开发时并不会将所有文件都放在src一个文件夹中，一般会创建多个文件夹，将不同的文件分开，比如./src/js中放js文件，./src/css中放css文件等等

对于图片、字体等借助资源模块来导出等文件，如果需要在打包时输出到特定文件夹，可以参照官方文档-资源模块-自定义输出文件名添加generator配置

Webpack 配置文件介绍