使用 webpack 的多个 html 个文件
Multiple html files using webpack
我正在尝试在一个项目中做一些我不确定是否可行的事情，我的方法不对或误解了什么。我们正在使用 webpack，其想法是提供多个 html 文件。
localhost:8181 -> 服务 index.html
localhost:8181/example.html -> 服务 example.html
我正在尝试通过设置多个入口点来做到这一点，遵循 documentation:
文件夹结构为：
/
|- package.json
|- webpack.config.js
/src
|- index.html
|- example.html
| /js
|- main.js
|- example.js
Webpack.config.js:
...
entry: {
main: './js/main.js',
exampleEntry: './js/example.js'
},
output: {
path: path.resolve(__dirname, 'build', 'target'),
publicPath: '/',
filename: '[name].bundle.js',
chunkFilename: '[id].bundle_[chunkhash].js',
sourceMapFilename: '[file].map'
},
...
index.html
<!DOCTYPE html>
<html
<head>
...
<link type="text/css" href="/style/default.css">
</head>
<body>
<div id="container"></div>
<script src="/main.bundle.js"></script>
</body>
</html>
example.html:
<!DOCTYPE html>
<html
<head>
...
<link type="text/css" href="/style/default.css">
</head>
<body>
...
<script src="/example.bundle.js"></script>
</body>
</html>
有人知道我做错了什么吗？
谢谢。
将入口点视为引用许多其他资产（如 javascript 模块、图像、模板等）的树的根。当你定义多个入口点时，你基本上将你的资产分成所谓的块，而不是将所有代码和资产都放在一个包中。
我认为您想要实现的是为不同的应用程序提供多个 "index.html"，这些应用程序还引用您已经使用入口点定义的资产的不同块。
复制一个 index.html 文件或者甚至生成一个引用这些入口点的文件都不是由入口点机制处理的 - 它是相反的。处理 html 页面的基本方法是使用 html-webpack-plugin，它不仅可以复制 html 文件，而且还具有广泛的模板机制。如果您希望为您的捆绑包添加捆绑散列后缀，这非常有用，可以避免在更新您的应用程序时出现浏览器缓存问题。
由于您已将名称模式定义为 [id].bundle_[chunkhash].js，因此您不能再将 javascript 包引用为 main.bundle.js，因为它将被称为 main.bundle_73efb6da.js。
看看html-webpack-plugin。与您的用例特别相关：
你最后可能应该有类似的东西（警告：未测试）
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
filename: 'example.html',
template: 'src/example.html',
chunks: ['exampleEntry']
})
]
请注意在块数组中引用入口点的名称，因此在您的示例中这应该是 exampleEntry。将模板移动到特定文件夹而不是直接将它们放在根 src 文件夹中可能也是一个好主意。
希望对您有所帮助。
如果您不需要两个不同的构建，也可以使用 Copy Webpack Plugin，即，假设您只想使用相同的 main.bundle.js 提供不同的 HTML。
该插件非常简单（仅在 webpack v4 中测试过）：
const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = {
plugins: [
new CopyWebpackPlugin([
{ from: './src/example.html', to: './example.html' }
])
]
}
然后在 example.html 中，您可以从 index.html 加载构建。例如：
<!DOCTYPE html>
<html
<head>
...
<title>Example</title>
</head>
<body>
<div id="container"> Show an example </div>
<script src="main.bundle.js"></script>
</body>
</html>
使用 Webpack 中的多个 HTML 文件使用 HtmlWebpackPlugin :
Modify the webpack.config.js by directly embedding the below code.
const HtmlWebpackPlugin = require('html-webpack-plugin');
let htmlPageNames = ['example1', 'example2', 'example3', 'example4'];
let multipleHtmlPlugins = htmlPageNames.map(name => {
return new HtmlWebpackPlugin({
template: `./src/${name}.html`, // relative path to the HTML files
filename: `${name}.html`, // output HTML files
chunks: [`${name}`] // respective JS files
})
});
module.exports = {
entry: {
main: './js/main.js',
example1: './js/example1.js',
//... repeat until example 4
},
module: {
//.. your rules
};
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
chunks: ['main']
})
].concat(multipleHtmlPlugins)
};
您可以根据需要向 htmlPageNames 数组添加任意数量的 HTML 页。确保每个 HTML 和相应的 JS 文件具有相同的名称（上面的代码假设）。
还有另一种解决方案，假设 Webpack ^4.44.1。也就是说，在您的 JS/TS 应用程序中导入 HTML。
样本webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: { app: './src/index.ts' },
mode: 'development',
devtool: 'inline-source-map',
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Development',
template: path.join(path.resolve(__dirname, 'src'), 'index.ejs')
}),
],
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
include: [path.resolve(__dirname, 'src')],
exclude: /node_modules/,
},
{
test: /\.html$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
],
// this exclude is required
exclude: path.join(path.resolve(__dirname, 'src'), 'index.html')
}
],
},
resolve: {
extensions: ['.ts', '.js'],
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3900
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
对应的应用程序
import './about.html';
console.log('this is a test');
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Question</title>
</head>
<body>
<a href="./about.html">About</a>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
</head>
<body>
<p>This is an about page</p>
</body>
</html>
Webpack 会复制about.html到对应的output文件夹
plugins: [
...templates.map(template => new HtmlWebpackPlugin(template))
]
如果您有很多模板，此代码会有所帮助:)
RICHARD ABRAHAM 的解决方案对我来说效果很好我还添加了 fsreaddir 函数来检测 html 文件
let htmlPageNames = [];
const pages = fs.readdirSync('./src')
pages.forEach(page => {
if (page.endsWith('.html')) {
htmlPageNames.push(page.split('.html')[0])
}
})
console.log(htmlPageNames);
回到@andreas-jägle 点。使用 'html-webpack-plugin':html-webpack-plugin html-webpack-plugin。但是，请优化您的代码以避免重复 文件：
plugins: ['index', 'page1', 'page2'].map(
(file) =>
new HtmlWebpackPlugin({
template: './src/' + file + '.html',
inject: true,
chunks: ['index', 'main'],
filename: './' + file + '.html' //relative to root of the application
})
)
我正在尝试在一个项目中做一些我不确定是否可行的事情，我的方法不对或误解了什么。我们正在使用 webpack，其想法是提供多个 html 文件。
localhost:8181 -> 服务 index.html
localhost:8181/example.html -> 服务 example.html
我正在尝试通过设置多个入口点来做到这一点，遵循 documentation:
文件夹结构为：
/
|- package.json
|- webpack.config.js
/src
|- index.html
|- example.html
| /js
|- main.js
|- example.js
Webpack.config.js:
...
entry: {
main: './js/main.js',
exampleEntry: './js/example.js'
},
output: {
path: path.resolve(__dirname, 'build', 'target'),
publicPath: '/',
filename: '[name].bundle.js',
chunkFilename: '[id].bundle_[chunkhash].js',
sourceMapFilename: '[file].map'
},
...
index.html
<!DOCTYPE html>
<html
<head>
...
<link type="text/css" href="/style/default.css">
</head>
<body>
<div id="container"></div>
<script src="/main.bundle.js"></script>
</body>
</html>
example.html:
<!DOCTYPE html>
<html
<head>
...
<link type="text/css" href="/style/default.css">
</head>
<body>
...
<script src="/example.bundle.js"></script>
</body>
</html>
有人知道我做错了什么吗？
谢谢。
将入口点视为引用许多其他资产（如 javascript 模块、图像、模板等）的树的根。当你定义多个入口点时，你基本上将你的资产分成所谓的块，而不是将所有代码和资产都放在一个包中。
我认为您想要实现的是为不同的应用程序提供多个 "index.html"，这些应用程序还引用您已经使用入口点定义的资产的不同块。
复制一个 index.html 文件或者甚至生成一个引用这些入口点的文件都不是由入口点机制处理的 - 它是相反的。处理 html 页面的基本方法是使用 html-webpack-plugin，它不仅可以复制 html 文件，而且还具有广泛的模板机制。如果您希望为您的捆绑包添加捆绑散列后缀，这非常有用，可以避免在更新您的应用程序时出现浏览器缓存问题。
由于您已将名称模式定义为 [id].bundle_[chunkhash].js，因此您不能再将 javascript 包引用为 main.bundle.js，因为它将被称为 main.bundle_73efb6da.js。
看看html-webpack-plugin。与您的用例特别相关：
你最后可能应该有类似的东西（警告：未测试）
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
filename: 'example.html',
template: 'src/example.html',
chunks: ['exampleEntry']
})
]
请注意在块数组中引用入口点的名称，因此在您的示例中这应该是 exampleEntry。将模板移动到特定文件夹而不是直接将它们放在根 src 文件夹中可能也是一个好主意。
希望对您有所帮助。
如果您不需要两个不同的构建，也可以使用 Copy Webpack Plugin，即，假设您只想使用相同的 main.bundle.js 提供不同的 HTML。
该插件非常简单（仅在 webpack v4 中测试过）：
const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = {
plugins: [
new CopyWebpackPlugin([
{ from: './src/example.html', to: './example.html' }
])
]
}
然后在 example.html 中，您可以从 index.html 加载构建。例如：
<!DOCTYPE html>
<html
<head>
...
<title>Example</title>
</head>
<body>
<div id="container"> Show an example </div>
<script src="main.bundle.js"></script>
</body>
</html>
使用 Webpack 中的多个 HTML 文件使用 HtmlWebpackPlugin :
Modify the
webpack.config.jsby directly embedding the below code.
const HtmlWebpackPlugin = require('html-webpack-plugin');
let htmlPageNames = ['example1', 'example2', 'example3', 'example4'];
let multipleHtmlPlugins = htmlPageNames.map(name => {
return new HtmlWebpackPlugin({
template: `./src/${name}.html`, // relative path to the HTML files
filename: `${name}.html`, // output HTML files
chunks: [`${name}`] // respective JS files
})
});
module.exports = {
entry: {
main: './js/main.js',
example1: './js/example1.js',
//... repeat until example 4
},
module: {
//.. your rules
};
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
chunks: ['main']
})
].concat(multipleHtmlPlugins)
};
您可以根据需要向 htmlPageNames 数组添加任意数量的 HTML 页。确保每个 HTML 和相应的 JS 文件具有相同的名称（上面的代码假设）。
还有另一种解决方案，假设 Webpack ^4.44.1。也就是说，在您的 JS/TS 应用程序中导入 HTML。
样本webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: { app: './src/index.ts' },
mode: 'development',
devtool: 'inline-source-map',
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Development',
template: path.join(path.resolve(__dirname, 'src'), 'index.ejs')
}),
],
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
include: [path.resolve(__dirname, 'src')],
exclude: /node_modules/,
},
{
test: /\.html$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
],
// this exclude is required
exclude: path.join(path.resolve(__dirname, 'src'), 'index.html')
}
],
},
resolve: {
extensions: ['.ts', '.js'],
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3900
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
对应的应用程序
import './about.html';
console.log('this is a test');
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Question</title>
</head>
<body>
<a href="./about.html">About</a>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
</head>
<body>
<p>This is an about page</p>
</body>
</html>
Webpack 会复制about.html到对应的output文件夹
plugins: [
...templates.map(template => new HtmlWebpackPlugin(template))
]
如果您有很多模板，此代码会有所帮助:)
RICHARD ABRAHAM 的解决方案对我来说效果很好我还添加了 fsreaddir 函数来检测 html 文件
let htmlPageNames = [];
const pages = fs.readdirSync('./src')
pages.forEach(page => {
if (page.endsWith('.html')) {
htmlPageNames.push(page.split('.html')[0])
}
})
console.log(htmlPageNames);
回到@andreas-jägle 点。使用 'html-webpack-plugin':html-webpack-plugin html-webpack-plugin。但是，请优化您的代码以避免重复 文件：
plugins: ['index', 'page1', 'page2'].map(
(file) =>
new HtmlWebpackPlugin({
template: './src/' + file + '.html',
inject: true,
chunks: ['index', 'main'],
filename: './' + file + '.html' //relative to root of the application
})
)