在多页Webpack项目上导航

时间:2019-05-16 08:51:25

标签: webpack

我有一个基本的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
                        },
                    },
                ],
            }
        ]
    }
};

0 个答案:

没有答案