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)