Question

我无法配置Webpack开发模式，因此它将使用自己的js和scss文件提供多个HTML文件。它在开发中效果很好，但是当我尝试通过webpack-dev-server查看我的应用程序时，出现了错误。我可以打开HTML文件但不附加JavaScript，也可以使用可运行的js打开文件，但可以实时重新加载。我使用两个文件作为Webpack配置： -webpack.common.js， -webpack.dev.js：

我尝试了很多事情，但唯一可行的方法是在编译之前手动附加js文件，但在这种情况下，构建我的捆绑包时会附加错误的文件。

webpack.common.js：

module.exports = {
    entry: {
        index: './src/js/index.js'
    },
    module: {
        rules: [
            {
                test: /\.(html)$/,
                use: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: '../img'
                } 
            }
        ]
    }
};

const htmlFiles = ['example1', 'example2'];
const createEntrys = () => {
    htmlFiles.map(file => {
        module.exports.entry[file] = `./src/js/${file}.js`
    })

};
createEntrys();

webpack.dev.js：

const htmlFiles = ['example1', 'example2'];
const createPage = (fileName) => {
    return new HtmlWebpackPlugin({
        template: 'src/html/' + `${fileName}.html`,
        filename: `../html/${fileName}.html`,
        chunks: [fileName]
    });
};

module.exports = merge(common, {
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: `../index.html`,
            chunks: ['index'],
            inject: true
        }),
        ...htmlFiles.map(file => createPage(file))
    ],
    devServer: {
        contentBase: path.join(__dirname, 'src'),
        watchContentBase: true,
        port: 8080
    }
});

webpack-dev-server不会将JavaScript文件附加到多个html文件

0 个答案: