mig*_*omp 58 webpack webpack-dev-server
我正在尝试在一个项目中做一些事情,我不确定它是否可能,我是错误的方式或误解了什么.我们正在使用webpack,其想法是提供多个html文件.
localhost:8181 - >提供index.html
localhost:8181/example.html - > serve example.html
我正在尝试通过设置多个入口点,遵循文档:
文件夹结构是:
/
|- 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>
有人知道我做错了什么吗？
谢谢.
And*_*gle 84
将入口点视为树的根,它引用了许多其他资源,如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']
})
]
请注意在chunks数组中引用入口点的名称,因此在您的示例中应该是这样exampleEntry.将模板移动到特定文件夹而不是将它们直接放在根src文件夹中也可能是个好主意.
希望这可以帮助.
RIC*_*HAM 25
Webpack
webpack.config.js通过直接嵌入以下代码来修改。
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 文件具有相同的名称（以上代码假设）。
| 归档时间： |
|
| 查看次数： |
29203 次 |
| 最近记录： |