plugin
插件 是 webpack 的 支柱 功能。Webpack 自身也是构建于你在 webpack 配置中用到的 相同的插件系统 之上!
插件目的在于解决 loader 无法实现的其他事。Webpack 提供很多开箱即用的 插件。
剖析
webpack 插件是一个具有 apply
方法的 JavaScript 对象。apply
方法会被 webpack compiler 调用,并且在 整个 编译生命周期都可以访问 compiler 对象。
ConsoleLogOnBuildWebpackPlugin.js
const pluginName = 'ConsoleLogOnBuildWebpackPlugin'; class ConsoleLogOnBuildWebpackPlugin { apply(compiler) { compiler.hooks.run.tap(pluginName, (compilation) => { console.log('webpack 构建正在启动!'); }); } } module.exports = ConsoleLogOnBuildWebpackPlugin;
compiler hook 的 tap 方法的第一个参数,应该是驼峰式命名的插件名称。建议为此使用一个常量,以便它可以在所有 hook 中重复使用
用法
配置方式
const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); // 访问内置的插件 const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { filename: 'my-first-webpack.bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader', }, ], }, plugins: [ new webpack.ProgressPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }), ], };
ProgressPlugin
用于自定义编译过程中的进度报告,HtmlWebpackPlugin
将生成一个 HTML 文件,并在其中使用 script
引入一个名为 my-first-webpack.bundle.js
的 JS 文件。
Node API 方式
some-node-script.js
const webpack = require('webpack'); // 访问 webpack 运行时(runtime) const configuration = require('./webpack.config.js'); let compiler = webpack(configuration); new webpack.ProgressPlugin().apply(compiler); compiler.run(function (err, stats) { // ... });
配置(Configuration)
你可能已经注意到,很少有 webpack 配置看起来完全相同。这是因为 webpack 的配置文件是 JavaScript 文件,文件内导出了一个 webpack 配置的对象。 webpack 会根据该配置定义的属性进行处理
配置应避免如下操作:
- 当使用 webpack CLI 工具时,访问 CLI 参数(应编写自己的 CLI 工具替代,或者使用
--env
) - 导出不确定的结果(两次调用 webpack 应产生相同的输出文件)
- 编写超长的配置(应将配置文件拆分成多个)
基本配置
const path = require('path'); module.exports = { mode: 'development', entry: './foo.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'foo.bundle.js', }, };
多个 target
导出为多个配置导出多个配置(---后续添加超链接)
使用其它配置语言
Webpack 支持由多种编程和数据语言编写的配置文件。详见配置语言(---后续添加一个超链接)
原文:https://webpack.docschina.org/concepts/plugins/
标签:插件,plugin,配置,js,webpack,path,Configuration,compiler From: https://www.cnblogs.com/withheart/p/17929618.html