Webpack学习笔记（2）
1.什么是loader?
上图是Webpack打包简易流程，webpack本身只能理解js和json这样的文件，loader可以让webpack解析其他类型文件，并且将文件转换成模块供我们使用。
test识别出那些文件被转换，use定义转换时使用哪个loader转换
上图意思为：若要解析一个.txt后缀的文件时，在对这个文件进行打包之前，使用raw-loader转换一下。
2.加载css文件
使用css-loader，style-loader。style-loder是将样式放在head的style标签里
index.js中按照下图引用：
预处理工具sass，less等文件。
解析.less文件安装less-loader,less。
index.js中按照下图导入：
style.less:
3.抽离和压缩css
把style中的代码从html文件抽离出来为一个单独文件，安装插件 mini-css-extract-plugin。
mini-css-extract-plugin用于将 CSS 从 JavaScript 文件中分离出来的 Webpack 插件。所以不使用style-loader了。
引入插件后可自定义生成css文件位置和文件名：
最后就会新建一个styles下存放一个随机哈希数.css的文件存放样式，并且会在index.html中通过上述插件加入link引入样式。
发现css文件没有压缩，压缩可以提高效率，所以安装插件css-minimizer-webpack-plugin.
配置这个插件使用的是optimization配置，同时mode需要修改为production：
原因：
- 生产环境通常需要更小的文件来优化加载速度。
- 开发环境中通常不需要压缩，因为压缩会使得调试更加困难。
设置后style文件夹下的css变为：
4.加载images图像
在css内部加载图片资源。
在style.css中：
可以看到style文件下的css正确拿到了图片:
5.加载iconfonts图标
在css内部加载图标字体资源。asset Moudle资源模块来实现。
webpack.config.js中配置：
style.css:
index.js中使用到页面中:
页面中显示：
6.加载数据
其他数据如xml,csv,tsv等资源，使用loader加载,分别是xml-loader,csv-loader，安装后修改配置。
webpack.config.js中配置：
在index.js中引入并打印：
控制台可以看到，xml文件转换为对象输出，csv文件转换为数组：
7.自定义parser模块
将src文件下的toml，yaml，json5的文件导入。
yaml:有key，有value,靠缩进完成子项设置；
toml:通过key=value的格式，子项使用【】；
json5：可以加注释，key不用加引号，值可以用单引号，也可以使用转义字符；
安装：npm install yaml toml json5 -D
webpack.config.js中配置：
index.js中使用一下：
控制台中正确打印：
tips
Webpack 提供了三种模式：
development：启用开发环境的配置，专注于提高构建速度和调试体验。production：启用生产环境的配置，专注于优化性能和输出更小的文件。none：不启用任何默认配置。
当你将 mode 设置为 production 时，Webpack 会自动启用以下优化：
- 代码压缩：JavaScript 文件会被
TerserWebpackPlugin插件压缩。 - 文件优化：CSS 文件和其他资源文件也会被自动优化。
- Tree Shaking：移除未使用的代码。
- 缓存优化：输出文件会带上哈希值，以便更好地利用浏览器缓存。