Webpack中 loader和plugins 配置

前言:前面我们说了webpack有很多详细的配置以及功能,今天我们就来了解一下webpack中loader和plugins的配置.

一.loader

loader 用于对模块的源代码进行转换,loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。

(一)使用:

其实loader的使用很简单,基本步骤为:

1.在webpack.config.js中指定loader
2.安装指定的loader配置

注:一些资源转换会用到多个loader配置,这时要注意loader的书写顺序,loader按照从右到左（或从下到上）的顺序执行.

(二)常用的几种loader

1.css-loader
分析 css 模块之间的关系，并合成⼀个 css
(1)安装:

npm i css-loader -D 

(2)webpack.config.js中的配置:

rules: [
	{
		test: /\.css$/,
    	use: ['style-loader', 'css-loader'] },
	}
]

注:可以注意到我不仅使用了css-loader配置,还添加了style-loader,因为要想把css-loader生成的内容添加到html中需要依赖style-loader配置生成style标签
2.style-loader
安装:

	npm i style-loader -D 

3.less-loader
(1)安装:
npm i less-loader -D
(2)webpack.config.js中的配置:

 rules: [
	  { test: /\.less$/, use: ['style-loader','css-loader','less-loader'] },
 ]

4.url-loader
注:url-loader依附于file-loader 先下载file-loader
(1)安装:

npm i url-loader -D 

(2)webpack.config.js中的配置:

rules: [
	{
		test: /\.(png|jpe?g|gif)$/,
    use: {
      loader: "url-loader",
      options: {
        // placeholder 占位符 [name] 源资源模块的名称
        // [ext] 源资源模块的后缀
        name: "[name]_[hash].[ext]", //[hash:10].[ext] 指取图片的hash前十位
        //打包后的存放位置
        outputPath: "./images"
        // 打包后文件的 url
        publicPath: './images',
        // 小于 100 字节转成 base64 格式
        limit: 100, 	
      }
    }
	}
]

5.html-loader
注:html-loader和url-loader的区别在于:url-loader处理css样式中的图片资源,html-loader处理html中的img标签
(1)安装:

npm i html-loader -D

(2)webpack.config.js中的配置:

rules: [
	 //若前面使用 url-loader 解析式图片地址会出现[object Modlue ]问题,
	 //这时需关闭 url-loader,使用options:{esModule:false}
     {test:/\.html$/,loader:'html-loader',options:{esModule:false}}
],

6.raw-loader

注:在 webpack 中通过 import 方式导入文件内容，loader 并不是 webpack 内置的，所以首先要安装
(1)安装:

npm install --save-dev raw-loader

(2)在 webpack.config.js 中进行配置

module.exports = {
  module: {
      rules: [
      {
        test: /\.(txt|md)$/,
        use: 'raw-loader'
    	}
    ]
	}
}

7.sass-loader

把 sass 语法转换成 css ，依赖 node-sass 模块

(1)安装:

npm install --save-dev sass-loader node-sass

(2)在 webpack.config.js 中进行配置

{
	//打包其他资源通过exclude排除其他资源
	exclude:/\.(css|js|html|less)$/, 
	loader:'file-loader'
}

二.plugins:

扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等

常用的plugins:

1.HtmlWebpackPlugin
在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的 js 模块引⼊到该 html 中
(1)安装:

npm install --save-dev html-webpack-plugin

(2)在webpack.config.js中:

//需引入
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  plugins: [
     new HtmlWebpackPlugin({
       title: "My App",
       filename: "app.html",
       template: "./src/html/index.html"
     }) 
  ]
};

2.mini-css-extract-plugin
提取 CSS 到一个单独的文件中
(1)安装:

npm install --save-dev mini-css-extract-plugin

(2)在webpack.config.js中:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
	...,
  module: {
  	rules: [
  		{
  			test: /\.s[ac]ss$/,
  			use: [
  				{	//可取代style-loader
  					loader: MiniCssExtractPlugin.loader
				},
          		'css-loader',
          		'sass-loader'
        	]
		}
  	]
  },
  plugins: [
    new MiniCssExtractPlugin({
    	filename: '[name].css'
    }),
  ]
}

3.optimize-css-assets-webpack-plugin
压缩css
(1)安装:

npm i optimize-css-assets-webpack-plugin-D

(2)在webpack.config.js中:

//引入
const optimize-css-assets-webpack-plugin = require('optimize-css-assets-webpack-plugin)
module.exports = {
  module: {
  	rules: [
  		{
  			test: /\.s[ac]ss$/,
  			use: [
  				{
  					loader: MiniCssExtractPlugin.loader
				},
          'css-loader',
          'sass-loader'
         ]
	  }
  	]
  },
  plugins: [
    new MiniCssExtractPlugin({
    	filename: '[name].css'
    }),
    new optimizeCssAssetsWebpackPlugin()
}

拓展:plugin和loader的区别是什么？

对于loader它就是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss或A.less转变为B.css，单纯的文件转换过程
plugin是一个扩展器它丰富了wepack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务

---

总结:

以上就是webpack中loader和plugins一些简单的最常见的配置,要注意的是在loader中许多loader都会依赖于另一个loader,要记得安装.
loader是转换器,对文件进行编译操作.
plugins是扩展器,不是直接操作文件,丰富webpack.