webpack 中plugin的作用是什么，有没有自己写过

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 76 (opens in a new tab)

Author 回答者: swingpenguin (opens in a new tab)

loaders的作用是转换其他类型的语言到JS语言, plugins可以做其他所有loaders做不了的事情, 比如:

• bundle optimization(bundle优化)
• assets management(assets管理)
• injection of environment variables(注入环境变量)
• etc.

实际上plugins是webpack的基石, webpack就是在plugin system上建立起来的.

为了使用plugins, 我们需要 require() 并将它加入 plugins 数组.

// webpack.config.js
 
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack"); //to access built-in plugins
 
module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: "raw-loader" }],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};

在上面的例子中, html-webpack-plugin为我们的应用程序生成了一个html文件并自动注入所有生成的bundle.

webpack提供的plugin列表 (opens in a new tab)

reference: webpack官方文档 (opens in a new tab)