Loader 主要用于处理模块的内容转换，而 Plugin 则可以用于执行范围更广的任务，包括打包优化、资源管理和注入环境变量等。
工作机制：
- Plugin 是一个具有
apply方法的 JavaScript 对象。apply方法会被 Webpack 编译器调用，并且在整个编译生命周期中可以访问编译器对象。 - 在 Webpack 执行的生命周期中，会触发多个事件。Plugin 可以监听这些事件，并在特定的时机进行特定的操作。
自定义 Plugin：
下面是一个简单的自定义 Plugin 的例子：
// MyPlugin.js
class MyPlugin {
apply(compiler) {
compiler.hooks.done.tap('MyPlugin', (stats) => {
console.log('Webpack 构建完成！');
});
}
}
module.exports = MyPlugin;
在 Webpack 配置文件中使用这个 Plugin：
// webpack.config.js
const MyPlugin = require('./MyPlugin');
module.exports = {
plugins: [
new MyPlugin(),
],
};
这个自定义 Plugin 会在 Webpack 完成构建时输出一条控制台信息。
复杂自定义 Plugin
我们将创建一个名为 HtmlInjectorPlugin 的插件，这个插件将动态地向生成的 HTML 文件中插入自定义内容（如 meta 标签、脚本、样式等）。这个插件可以用来扩展 HTML 文件的功能，比如注入环境变量、添加统计代码等。
1. 创建插件
首先，在项目的根目录下创建一个文件 HtmlInjectorPlugin.js：
// HtmlInjectorPlugin.js
class HtmlInjectorPlugin {
constructor(options) {
this.options = options;
}
apply(compiler) {
// Tap into the 'emit' hook of the compiler
compiler.hooks.emit.tapAsync('HtmlInjectorPlugin', (compilation, callback) => {
// Process each asset in the compilation
Object.keys(compilation.assets).forEach((filename) => {
if (filename.endsWith('.html')) {
let source = compilation.assets[filename].source();
// Inject custom content based on options
if (this.options.meta) {
source = source.replace('</head>', `${this.options.meta}\n</head>`);
}
if (this.options.script) {
source = source.replace('</body>', `${this.options.script}\n</body>`);
}
if (this.options.style) {
source = source.replace('</head>', `${this.options.style}\n</head>`);
}
// Update the asset with the new source
compilation.assets[filename] = {
source: () => source,
size: () => source.length
};
}
});
callback();
});
}
}
module.exports = HtmlInjectorPlugin;
2. 配置插件
接下来，在 Webpack 配置文件 webpack.config.js 中使用这个插件。假设我们要向 HTML 文件中注入一个 meta 标签、一个自定义脚本和一个样式：
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlInjectorPlugin = require('./HtmlInjectorPlugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new HtmlInjectorPlugin({
meta: '<meta name="viewport" content="width=device-width, initial-scale=1">',
script: '<script>console.log("Custom Script Loaded");</script>',
style: '<style>body { background-color: lightblue; }</style>'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
3. 示例 HTML 文件
确保你的项目中有一个 HTML 模板文件，例如 src/index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
4. 构建项目
运行 Webpack 构建项目，生成的 dist/index.html 文件将包含注入的 meta 标签、脚本和样式：
webpack
生成的 dist/index.html 文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>body { background-color: lightblue; }</style>
</head>
<body>
<h1>Hello, World!</h1>
<script>console.log("Custom Script Loaded");</script>
</body>
</html>
总结
这个自定义 HtmlInjectorPlugin 插件展示了如何创建一个复杂的插件来动态修改生成的 HTML 文件。通过这种方式，可以灵活地向 HTML 文件中注入各种内容，如 meta 标签、脚本、样式等，满足实际项目中的不同需求。
HtmlWebpackPlugin
HtmlWebpackPlugin 是 Webpack 的一个非常流行且强大的插件，用于简化 HTML 文件的创建。它主要有以下功能：
主要功能
自动生成 HTML 文件：
HtmlWebpackPlugin可以自动生成 HTML 文件，并且将打包生成的资源（如 JavaScript、CSS 文件）自动插入到 HTML 文件中。这对于单页应用（SPA）特别有用，可以保证生成的 HTML 文件总是引用最新的打包文件。模板支持：你可以指定一个 HTML 模板文件，插件会基于这个模板文件生成最终的 HTML 文件。这使得可以在模板中预定义一些结构、样式或内容。
注入选项：
HtmlWebpackPlugin提供了多种注入选项，可以控制脚本和样式的注入位置，例如注入到<head>或<body>标签中。支持多个 HTML 文件：对于多页面应用，可以使用多个
HtmlWebpackPlugin实例，每个实例生成一个独立的 HTML 文件。
安装
在项目中使用 HtmlWebpackPlugin 之前，需要先安装它：
npm install --save-dev html-webpack-plugin
基本用法
配置示例
假设项目结构如下：
/project
/src
/index.js
/index.html
/dist
webpack.config.js
在 webpack.config.js 中配置 HtmlWebpackPlugin：
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 指定模板文件
filename: 'index.html', // 生成的文件名
inject: 'body' // 脚本注入到 body 底部
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
示例 HTML 模板
在 src/index.html 中创建一个简单的 HTML 模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
</head>
<body>
<h1>Hello, Webpack!</h1>
</body>
</html>
构建项目
运行 Webpack 构建项目：
webpack
构建完成后，dist/index.html 文件会自动包含打包生成的 bundle.js 脚本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
</head>
<body>
<h1>Hello, Webpack!</h1>
<script src="bundle.js"></script>
</body>
</html>
高级用法
多页面应用
对于多页面应用，可以配置多个 HtmlWebpackPlugin 实例：
module.exports = {
entry: {
main: './src/index.js',
admin: './src/admin.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
template: './src/admin.html',
filename: 'admin.html',
chunks: ['admin']
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
自定义模板
可以使用 EJS、Handlebars 等模板引擎来生成 HTML 文件。只需要在配置中指定相应的模板引擎并使用对应的模板文件即可。
new HtmlWebpackPlugin({
template: '!!ejs-compiled-loader!src/template.ejs',
filename: 'index.html'
});
总结
HtmlWebpackPlugin 是一个功能强大的插件，简化了生成 HTML 文件的流程，自动处理资源的注入，支持模板和多页面应用的生成，是 Webpack 项目中非常实用的工具。
EJS 模板引擎
使用自定义模板引擎（如 EJS 或 Handlebars）来生成 HTML 文件，可以使生成的 HTML 更加灵活和动态。以下是详细讲解如何在 Webpack 配置中使用 EJS 模板引擎，并结合 HtmlWebpackPlugin 生成 HTML 文件的步骤。
安装依赖
首先，安装 HtmlWebpackPlugin 和 EJS 编译器 ejs-compiled-loader：
npm install --save-dev html-webpack-plugin ejs-compiled-loader
创建 EJS 模板文件
在 src 目录下创建一个 EJS 模板文件 template.ejs，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<h1><%= htmlWebpackPlugin.options.heading %></h1>
<p><%= htmlWebpackPlugin.options.message %></p>
</body>
</html>
在这个模板文件中，使用了 EJS 模板引擎的占位符 <%= ... %> 来插入动态内容。
配置 Webpack
在 webpack.config.js 中配置 HtmlWebpackPlugin 使用 EJS 模板：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: '!!ejs-compiled-loader!src/template.ejs', // 使用 EJS 模板
filename: 'index.html', // 生成的 HTML 文件名
title: 'My App', // 传递给 EJS 模板的参数
heading: 'Hello, Webpack!',
message: 'This is a message from the template.'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
在这里，我们做了以下几件事情：
模板加载器：使用
ejs-compiled-loader加载src/template.ejs文件。!!是一个特殊的语法，告诉 Webpack 忽略配置中的其他加载器链，仅使用ejs-compiled-loader来处理这个文件。传递参数：通过
HtmlWebpackPlugin的options对象传递参数，这些参数可以在 EJS 模板中使用。
构建项目
运行 Webpack 构建项目：
webpack
构建完成后，生成的 dist/index.html 文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
</head>
<body>
<h1>Hello, Webpack!</h1>
<p>This is a message from the template.</p>
</body>
</html>
总结
通过以上步骤，我们展示了如何在 Webpack 中使用 EJS 模板引擎生成动态 HTML 文件：
-
安装依赖：安装
HtmlWebpackPlugin和ejs-compiled-loader。 -
创建 EJS 模板文件：在
src目录下创建 EJS 模板文件。 -
配置 Webpack：在
webpack.config.js中配置HtmlWebpackPlugin使用 EJS 模板，并传递参数。 - 构建项目：运行 Webpack 构建项目，生成包含动态内容的 HTML 文件。
这种方法使得我们可以使用模板引擎的强大功能来生成更加动态和灵活的 HTML 文件，非常适合需要生成动态内容的项目。
HandleBars 模板引擎
使用 Handlebars 模板引擎生成 HTML 文件的过程与使用 EJS 类似。以下是详细步骤：
安装依赖
首先，安装 HtmlWebpackPlugin 和 Handlebars 编译器 handlebars-loader：
npm install --save-dev html-webpack-plugin handlebars-loader
创建 Handlebars 模板文件
在 src 目录下创建一个 Handlebars 模板文件 template.hbs，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body>
<h1>{{heading}}</h1>
<p>{{message}}</p>
</body>
</html>
在这个模板文件中，使用了 Handlebars 模板引擎的占位符 {{...}} 来插入动态内容。
配置 Webpack
在 webpack.config.js 中配置 HtmlWebpackPlugin 使用 Handlebars 模板：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: '!!handlebars-loader!src/template.hbs', // 使用 Handlebars 模板
filename: 'index.html', // 生成的 HTML 文件名
title: 'My App', // 传递给 Handlebars 模板的参数
heading: 'Hello, Webpack!',
message: 'This is a message from the template.'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
在这里，我们做了以下几件事情：
模板加载器：使用
handlebars-loader加载src/template.hbs文件。!!是一个特殊的语法，告诉 Webpack 忽略配置中的其他加载器链，仅使用handlebars-loader来处理这个文件。传递参数：通过
HtmlWebpackPlugin的options对象传递参数，这些参数可以在 Handlebars 模板中使用。
构建项目
运行 Webpack 构建项目：
webpack
构建完成后，生成的 dist/index.html 文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
</head>
<body>
<h1>Hello, Webpack!</h1>
<p>This is a message from the template.</p>
</body>
</html>
详细说明
安装依赖
npm install --save-dev html-webpack-plugin handlebars-loader
创建 Handlebars 模板
在 src/template.hbs 文件中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body>
<h1>{{heading}}</h1>
<p>{{message}}</p>
</body>
</html>
配置 Webpack
在 webpack.config.js 文件中：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: '!!handlebars-loader!src/template.hbs',
filename: 'index.html',
title: 'My App',
heading: 'Hello, Webpack!',
message: 'This is a message from the template.'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
构建项目
webpack
总结
通过以上步骤，我们展示了如何在 Webpack 中使用 Handlebars 模板引擎生成动态 HTML 文件：
-
安装依赖：安装
HtmlWebpackPlugin和handlebars-loader。 -
创建 Handlebars 模板文件：在
src目录下创建 Handlebars 模板文件。 -
配置 Webpack：在
webpack.config.js中配置HtmlWebpackPlugin使用 Handlebars 模板，并传递参数。 - 构建项目：运行 Webpack 构建项目，生成包含动态内容的 HTML 文件。
这种方法使得我们可以使用模板引擎的强大功能来生成更加动态和灵活的 HTML 文件，非常适合需要生成动态内容的项目。
