webpack 中的 loader 和 plugin 区别是什么 各有什么用？

 

loader即文件加载器：用来预处理文件。

plugin即插件：用来增强功能。

举个栗子:

css-loader解析css文件，并将其处理成<style>标签注入到dom中

安装loader：

配置：

//file.css文件
body{
  background:violet;
}

//index.js文件
import css from './file.css'

//webpack.config.js文件
module.exports = {
  module:{
    rules: [
      {
        test:/\.css$/,
        use:['style-loader', 'css-loader']
      }
    ]
  }
}

小结：

• 处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，最后一个loader最先执行，第一个loader最后执行。
• 第一个执行的loader接受源文件作为参数内容，其他的loader接受前一个loader的返回值作为自己的参数，最后一个执行的loader会返回此模块的JavaScript源码。

plugin即插件：用来增强功能。

举个栗子：

将css提取到一个单独的文件当中。他可以为每一个包含css的js文件创建一个css文件。

安装plugin：

npm install --save-dev mini-css-extract-plugin
or
yarn add mini-css-extract-plugin --dev

配置：

//style.css
body{
  background:skyblue;
}

//index.js
import './style.css'

//webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '/public/path/to/',
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

二者区别：

loader即为文件加载器，操作的是文件，将文件A通过loader转换成文件B，是一个单纯的文件转化过程。

plugin即为插件，是一个扩展器，丰富webpack本身，增强功能 ，针对的是在loader结束之后，webpack打包的整个过程，他并不直接操作文件，而是基于事件机制工作，监听webpack打包过程中的某些节点，执行广泛的任务。