![](/img/trans.png)
[英]Webpack: include html files and their js scripts alongside standalone js scripts
[英]get webpack to include html files
注意 :我是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文件的加載程序配置將允許對HTML文件的require
調用可以在javascript文件中工作。 使用文件加載器,您將獲得文件路徑,使用HTML加載器,您將獲得調用結果的HTML內容。
如果您希望將HTML文件與已編譯的源代碼一起復制,則必須使用諸如copy-webpack-plugin或html-webpack-plugin之類的插件 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.