让webpack包含html文件

get webpack to include html files(让webpack包含html文件)

本文介绍了让webpack包含html文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

注意:我是webpack的初学者。

我正在尝试让webpack加载我的.htmls文件(index.html和login.html),因为它们将作为我的电子应用程序的窗口。这就是我到目前为止尝试的方法,但没有结果:

rules: [
            {
                test: /.html$/,
                use: ["html-loader"]
            },
...

rules: [
            {
                test: /.html$/,
                loader: "file-loader"
            },
...

这是我的webpack.config.js文件:

const path = require("path");
const { spawn } = require("child_process");

const srcDir = path.resolve(__dirname, "src/renderer");
const outDir = path.resolve(__dirname, "build/client");

const defaultIncludes = [srcDir];

module.exports = {
    entry: `${srcDir}/index`,

    output: {
        path: outDir,
        filename: "app.bundle.js"
    },

    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json", ".html"]
    },

    module: {
        rules: [
            {
                test: /.html$/,
                loader: "file-loader"
            },
            {
                // Include ts, tsx, and js files.
                test: /.(tsx?)|(js)$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                include: defaultIncludes
            },
            {
                test: /.scss$/,
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS
                ]
            },
            {
                test: /.(ttf|eot|woff|woff2)$/,
                loader: "file-loader",
                options: {
                    name: "fonts/[name].[ext]"
                }
            }
        ]
    },

    devServer: {
        inline: true,
        contentBase: outDir,
        compress: true,

        stats: {
            colors: true,
            chunks: false,
            children: false
        },

        before() {
            spawn("electron", ["."], {
                shell: true,
                env: process.env,
                stdio: "inherit"
            }).on("close", code => process.exit(0)).on("error", spawnError => console.error(spawnError));
        }
    },

    target: "electron-renderer",
    mode: "development"
};

我做错了什么?Webpack将所有内容构建到/build中,但不包括.html文件(在我的/src/目录下的index.html和login.html)。

Html

推荐答案文件的加载器配置将允许require对Html文件的调用在Java文件中工作。使用文件加载器,您将获得文件路径,而使用HTML加载器,您将获得作为调用结果的HTML内容。

如果希望将您的HTML文件与已编译的源代码一起复制,则必须使用copy-webpack-plugin或html-webpack-plugin这样的插件。

这篇关于让webpack包含html文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:让webpack包含html文件

基础教程推荐