使用webpack的多个html文件

我想在一个项目中做一些事情，我不确定它是否可能，我是以一种错误的方式或误解某些东西。我们使用的是webpack，这个想法是为多个html文件提供服务。使用webpack的多个html文件

本地主机：8181 - >供应的index.html
本地主机：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>

有人知道我做错了吗？

谢谢。

来源

2016-09-30 miguelitomp

你能找到解决方案吗？我也在寻找相同的用例。 – monica

将一个入口点看作引用许多其他资产（如javascript模块，图像，模板等）的树的根。当您定义多个入口点时，基本上将您的资产分成所谓的块，从而不会将所有代码和资产都包含在一个包中。

我认为你想实现的目标是为不同的应用程序提供多个“index.html”，这些应用程序也指您已使用入口点定义的不同资产块。

复制一个index.html文件或者甚至生成一个引用这些入口点的文件不是由入口点机制处理 - 这是相反的方式。处理html页面的基本方法是使用html-webpack-plugin，它不仅可以复制html文件，而且还具有广泛的模板机制。如果你希望你的bundle有一个捆绑哈希的后缀，这样可以避免在更新应用程序时出现浏览器缓存问题，这特别有用。

由于您已将名称模式定义为[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文件夹中也是一个好主意。

希望这会有所帮助。

来源

2016-10-02 11:35:37

使用webpack的多个html文件

回答

相关问题