我有一个基本的webpack配置,其中有两个HTML页面的两个入口点。 现在都可以访问两个页面。在https://localhost:3000/上建立索引,在https://localhost:3000/dialog.html上建立对话框。 现在,我想以编程方式从index.js导航到dialog.html,例如,如果按下了按钮,则使用window.location.href ='./src/dialog/dialog.html'。如何确定该路径指向html-webpack-plugin创建的dialog.html文件的公共位置(dist)?
我想如果我要为html设置文件加载器并将文件导入index.js中,它将把整个html文件放到index.bundle.js中,如果我只想指向hmtl文件的位置。
这里正确的方法是什么?
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
entry: {
index: ['@babel/polyfill', './src/index.js'],
dialog: ['@babel/polyfill', './src/dialog/dialog.js']
},
plugins: [
//new BundleAnalyzerPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
hash: true,
template: './src/index.html',
filename: './index.html',
chunks: ['index']
}),
new HtmlWebpackPlugin({
hash: true,
template: './src/dialog/dialog.html',
filename: './dialog.html',
chunks: ['dialog']
})
],
output: {
filename: '[name].bundle.[contenthash].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
fallback: 'file-loader'
}
},
{
loader: 'image-webpack-loader',
options: {
disable: true
},
},
],
}
]
}
};