webpack中的Loaders和plugin

什么是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']}

3、打包处理scss文件
运行npm install sass-loader node-sass -D命令，在webpack.config.js的rules中添加{test:/\.scss$/, user:['style-loader','css-loader','sass-loader']}
4、配置post CSS自动添加css的兼容前缀
运行npm install postcss-loader autoprefixer -D命令，在项目根目录创建postcss.config.js文件，并配置。

const autoprefixer=require('autoprefixer')//导入自动添加前缀的插件
module.exports={plugins:[autoprefixer],//挂载插件,
}

在webpack.config.js文案中的module rules数组中，将css对应条目更改为{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
5、打包处理JS文件中的高级语法
安装babel转换器相关的包npm install babel-loader @babel/core @babel/runtime -D
安装babel语法插件相关的包npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
在项目根目录中创建babel配置文件babel.config.js

module.exports={presets:['@babel/preset-env'],plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

在webpack.config.js文件中rule数组中添加规则{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
6、打包样式表中的图片和字体文件
运行npm install url-loader file-loader -D，在webpack.config.js的rules数组中添加规则{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woof|woof2$/, use:'url-loader?limit=16940'},
7、配置vue组件加载器
运行npm install vue-loader vue-template-compiler -D，在webpack.config.js中添加vue-loader配置项

const VueLoaderPlugin=require('vue-loader/lib/plugin')
module.exports={plugins:[htmlPlugin,new VueLoaderPlugin()],module:{rules:[//...其他规则{test:/\.vue$/,use:'vue-loader'}

loade的注意点

单一原则

一个loader只做一件事情
多个loader会按照从右至左、从下到上的顺序执行

例如: 从右至左
[ ‘style-loader’, ‘css-loader’ ]
先执行css-loader解析css文件关系拿到所有内容,
再执行style-loader将内容插入到HTML的HEAD代码中
例如: 从下至上
[{
loader: “style-loader”
},{
loader: “css-loader”
}]
先执行css-loader解析css文件关系拿到所有内容,
再执行style-loader将内容插入到HTML的HEAD代码中

总结

loader用来解析js以外的东西
style-loader------读取css，输出js字符串。解析css文件、import

css-loader-----------输出字符串

postcss-loader----让webpack解析、处理css文件的loader，给浏览器加前缀的

autoprefixer-------结合postcss-loader使用，告诉postcss-loader哪些可以加前缀

file-loader----------将文件编译到js中，引入文件（图片/字体）

url-loader-----------将文件编译到js中，以base64形式将文件放在bundle里

less-loader---------编译less

babel-loader--------将es6语法编译为es5等能被浏览器识别的语法

什么是plugin

简单的理解就是对于webpack现有功能的扩展，比如打包优化、文件压缩功能。与loader的区别在于loader更像是一个加载器，专门将css,less，js，vue等文件进行打包加载的。

使用

1.一个最简单的插件，为打包的文件添加版权声明
该插件名字叫BannerPlugin,属于webpack自带插件
按照下面的方法来修改webpack.config.js的文件：

2.重新打包程序，查看bundle.js文件的头部，看到如下信息：

js压缩plugin
1.使用一个第三方插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致。

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

2.修改webpack.conifg.js文件，使用插件：

3.查看打包后的bundle.js文件已经是被压缩过的了。

注意点

loader和plugin的区别：

loader主要用于转换某些类型的模块，它是一个转换器和加载器。
plugin是插件，它是对webpack本身的扩展，是一个扩展器。

总结

plugin是插件的意思，通常是用于对某个现有的框架进行扩展。
webpack中的插件，就是对wenpack现有功能的各种扩展，比如打包优化，文件压缩等等。