qq_45569925的博客

使用webpack处理图标资源、js资源、html资源以及其他资源

修改输出资源的名称和路径，以及自动清空上次打包资源

过去在Webpack4时，我们处理图片资源通过file-loader和url-loader进行处理。现在Webpack5已经将两个Loader功能内置到Webpack里了，我们只需要简单配置即可处理图片资源。

👉 css-loader：负责将CSS文件编译成Webpack能识别的模块。👉 style-loader：会动态创建一个Style标签，里面放置webpack中css模块内容。此时样式就会以Style标签形式在页面上生效。👉 less-loader：负责将Less文件编译成CSS文件。👉 sass-loader：负责将Sass文件编译成CSS文件。👉 sass：sass-loader 依赖 sass进行编译。👉 stylus-loader：负责将Styl文件编译成CSS文件。

开发模式：仅能编译 JS 中的ES Module语法生产模式：能编译 JS 中的ES Module语法，还能压缩 JS 代码。