[英]get webpack to include html files
Note : I'm a beginner to webpack. 注意 :我是webpack的初学者。
I'm trying to get webpack to load my .htmls files (index.html and login.html) as they will serve as windows for my electron application. 我正在尝试使Webpack加载我的.htmls文件(index.html和login.html),因为它们将用作我的电子应用程序的窗口。 This is what I have tried so far with no results:
到目前为止,这是我尝试过的结果:
rules: [
{
test: /\.html$/,
use: ["html-loader"]
},
...
and 和
rules: [
{
test: /\.html$/,
loader: "file-loader"
},
...
This is my webpack.config.js file: 这是我的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"
};
What am I doing wrong? 我究竟做错了什么? Webpack builds everything into the
/build
yet the .html files (index.html and login.html, which are under my /src/
directory) are not included. Webpack将所有内容都构建到
/build
但不包括.html文件(位于我的/src/
目录下的index.html和login.html)。
The loader configuration for HTML files will allow require
calls with HTML files to work inside javascript files. HTML文件的加载程序配置将允许对HTML文件的
require
调用可以在javascript文件中工作。 With the file loader you'll get a file path and with the HTML loader you'll get the HTML content as a result of the call. 使用文件加载器,您将获得文件路径,使用HTML加载器,您将获得调用结果的HTML内容。
If you want your HTML files to be copied alongside with your compiled sources you'll have to use a plugin like copy-webpack-plugin or html-webpack-plugin . 如果您希望将HTML文件与已编译的源代码一起复制,则必须使用诸如copy-webpack-plugin或html-webpack-plugin之类的插件 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.