Примечание. Я начинаю пользоваться 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(index.html и login.html, которые находятся в моем каталоге /src/
), не включены.
Конфигурация загрузчика для файлов HTML позволяет require
вызовы с HTML файлами работали внутри файлов javascript. С загрузчиком файлов вы получите путь к файлу и с загрузчиком HTML вы получите содержимое HTML в результате вызова.
Если вы хотите, чтобы ваши файлы HTML были скопированы вместе с вашими скомпилированными источниками, вам нужно будет использовать плагин, такой как copy-webpack-plugin или html-webpack-plugin.