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:移除未使用的代码。
- 缓存优化:输出文件会带上哈希值,以便更好地利用浏览器缓存。