我尝试创建一个基本的网站只使用Webpack。我的目的是有一个简单的网址结构,如example.com/about,example.com/contact。
在Webpack中,我可以使用HTMLWebpackPlugin,但我需要为每条路线创建一个示例。因此,我的问题是:有没有办法简化这个问题?
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
port: 5000,
},
plugins: [
new htmlWebpackPlugin({
title: 'Home',
filename: 'index.html',
template: './src/pages/home/index.html',
}),
new htmlWebpackPlugin({
title: 'About',
filename: 'about/index.html',
template: './src/pages/about/index.html',
}),
],
};
2条答案
按热度按时间7vhp5slm1#
Webpack的配置文件是javascript,所以你可以添加一些辅助函数来抽象这个过程,最后只要插入一个页面数组就可以产生预期的效果:
因此,这不是太多的代码,它将允许您在设置webpack时插入您想要的页面数组:
更好的是,您可以创建一个
utils
文件夹,并将代码重构为两个导出的模块,然后只需将populateHtmlPlugins()
导入到您的webpack配置文件中,并保持非常干净。现在,您可以轻松地创建任意数量的页面。
ajsxfq5m2#
在2023年可以使用新的html-bundler-webpack-plugin。使用这个插件,入口点是一个HTML模板,应该加载所有源脚本和样式。
您可以直接在Webpack条目中轻松定义多个HTML模板,例如:
或者您可以生成一个Webpack条目,如上面的答案所示。
例如,index.html
生成的HTML:
HtmlBundlerPlugin插件取代了html-webpack-plugin和mini-css-extract-plugin插件最常用的功能。