说明
玩转 webpack 学习笔记
插件的运行环境
插件没有像 loader 那样的独立运行环境
只能在 webpack 里面运行
插件的基本结构：
基本结构：
class MyPlugin { // 插件名称 apply(compiler) { // 插件上的 apply 方法 compiler.hooks.done.tap('My Plugin', ( // 插件的 hooks stats /* stats is passed as argument when done hook is tapped. */ ) => { console.log('Hello World!'); // 插件处理逻辑 }); } } module.exports = MyPlugin;
插件使用：
plugins: [ new MyPlugin() ]
搭建插件的运行环境
const path = require("path"); const DemoPlugin = require("./plugins/demo-plugin.js"); const PATHS = { lib: path.join(__dirname, "app", "shake.js"), build: path.join(__dirname, "build"), }; module.exports = { entry: { lib: PATHS.lib, }, output: { path: PATHS.build, filename: "[name].js", }, plugins: [new DemoPlugin()], };
开发一个最简单的插件
src/demo-plugin.js
module.exports = class DemoPlugin { constructor(options) { this.options = options; } apply() { console.log("apply", this.options); } };
加入到 webpack 配置中
module.exports = { plugins: [new DemoPlugin({ name: "demo" })] };
实战
1、新建项目
新建文件夹 my-plugin 文件夹，执行 npm init -y
2、安装 webpack 环境
npm i webpack@4.39.1 webpack-cli@3.3.6 -D
3、添加 webpack.config.js 配置
const path = require('path'); const MyPlugin = require('./plugins/my-plugin.js'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, 'dist'), filename: 'main.js' }, mode: 'production', plugins: [ new MyPlugin({ name: 'my plugin kaimo313' }) ] }
4、添加 src 以及 my-plugin.js
src 里面添加 index.js 文件
新建 plugins 文件夹，里面添加 my-plugin.js 文件
class MyPlugin { constructor(options) { this.options = options; } apply(compiler) { console.log('my plugin options---->', this.options); } } module.exports = MyPlugin;
5、运行构建
执行 webpack
