webpack中的Loaders和plugin

最新推荐文章于 2024-04-10 20:21:12 发布

K--kkkkk

最新推荐文章于 2024-04-10 20:21:12 发布

阅读量757

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/weixin_50889870/article/details/117743200

版权

本文详细介绍了Webpack中的Loaders和Plugins。Loaders用于预处理文件，如处理CSS、LESS、SCSS、JS等，遵循单一原则，按顺序执行。Plugins是对Webpack功能的扩展，用于打包优化、文件压缩等，例如BannerPlugin和UglifyJsWebpackPlugin。

摘要由CSDN通过智能技术生成

什么是loader？

官方说明webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。
Loader就是一个打包的方案，他知道对于某一个特定的文件，Web pack应该如何的进行打包。
本身webpack 对于一些文件是不知道该如何处理的，但是loader知道，所以呢，我们想要打包其他文件格式的话，直接去配置loader可以了

使用

1、打包处理css文件
端运行npm install style-loader css-loader -D安装处理css的loader
在webpack.config.js文件中module.exports下配置

module:{
   
        rules:[
            {
   test:/\.css$/,use：['style-loader','css-loader']}
        ]
    },
 //test表示要打包的文件类型，use表示要调用loader
 //use数组中的loder的顺序是固定的，从后往前调用

配置成功，在src目录下创建css文件夹添加1.css文件，在js下的index.js文件头部添加import '../css/1.css'，即可打包css文件。
2.打包处理less文件
运行npm install less-loader less -D 命令，在webpack.config.js的rules中添{test:/\.less$/, user:['style-loader','css-loader','less-loader']}