loader 和plugin的区别

loader

loader：主要用于对模块源码的转换，因为webpack本身只支持js处理，loader描述了webpack如何处理非javascript模块，并且在build中引入这些依赖。loader可以将文件从不同css预处理转换为css,将ts转换为JavaScript，或者将内联图像转换为data URL。比如说：sass-loader、css-Loader，style-Loader、file-loader等。loader本质就是一个间件管道。

plugin

plugin作用在于解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。

常见的plugin

clean-webpack-plugin

清除资源文件

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  plugins: [
    new CleanWebpackPlugin();
  ]
}

html-webpack-plugin

自动生成使用打包结果bundle.js的 HTML

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');//可以多次调用，一个htmlWebpackPlugin 实例生成一个页面
module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: [/node_modules/], // 排除转化第三方插件的 js
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin(),//不传参数，生成的html默认为打包目录下的index.html
    new HtmlWebpackPlugin({
    title: 'webpack plugin sample',//可以在模版中获取这个title
    meta: {
      viewport: 'width=device-width,initial-scale=1.0',
    },
    template: './src/index.html' // 指定模板文件
  }),
   new HtmlWebpackPlugin({
    filename: 'about.html'//生成about.html
  })
  ]
}

./src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>

copy-webpack-plugin

静态资源拷贝

const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
  new CopyWebpackPlugin(['public'])
]

自定义plugin开发-----

插件功能：清除打包结果中多余的注释信息
Plugin 是通过钩子机制实现的。webpack 要求插件plugin 必须是一个函数或者是一个包含 apply 方法的对象；通常将 plugin 定义为一个 class，然后在 class 中定义一个 apply 方法。plugin被要求必须是一个函数或者是包含apply方法的对象。入参是一个compiler对象，其包含构建所需信息，开发时可以通过compiler中hooks属性访问到emit钩子，并通过其tap方法注册一个钩子函数，定制钩子名称和挂载函数。该函数入参为compilation打包上下文，通过遍历compilation下assets的所有键得到所有文件名称。然后根据键的source（）方法拿到对应的content内容，然后对content进行一些处理，并返回给souce函数，以达到插件的目的。

class MyPlugin {
  // apply 方法，在 webpack 启动的时候会自动调用该方法
  // 接收一个 compiler 对象参数
  // webpack 工作过程中最核心的一个对象，包含了此次构建所有的配置信息，
  // 通过这个对象去注册钩子函数
  apply(compiler) {
    // compilation: 此次打包过程中的上下文，
  // 所有打包过程产生的结果都会放在这个对象中
  compiler.hooks.emit.tap('MyPlugin', compilation => {
    // compilation.assets 获取即将写入目录的资源文件信息
    // compilation.assets是一个对象，键是每一个文件的名称 bundle.js,index.html,favicon.ico 。。。
    // 文件内容需要通过 值的 source 方法获取 compilation[name].source();
    for (const name in compilation.assets) {
      if (name.endsWith('.js')) {
        // 获取文件内容
        const contents = compilation.assets[name].source();
        const withoutComments = contents.replace(/\/\*\*+\*\//g, '');
        // 替换原内容
        compilation.assets[name] = {
          // source 返回替换后的内容
          source: () => withoutComments,
          // 返回内容的大小， webpack 规定要这么做的
          size: () => withoutComments.length;
        }
      }
    }
  })
  }
}

//webpack.config.js中引入Myplugin
const Myplugin = require('./Myplugin')
plugins: [
  new MyPlugin()
]

原文地址：https://blog.csdn.net/Michael890818

webpack打包-----plugin

为什么要用插件？