Saya menggunakan paket web dengan HtmlWebpackPlugin, html-loaderdan file-loader. Saya memiliki struktur proyek sederhana di mana saya tidak menggunakan kerangka kerja, tetapi hanya naskah. Jadi, saya menulis kode HTML saya langsung ke index.html. Saya juga menggunakan file HTML ini sebagai templat saya di HtmlWebpackPlugin.
Karena semua situs web harus saya masukkan gambar yang merujuk ke PNG di folder aset saya. file-loaderharus memuat file dengan benar memasukkan nama file baru di dalam srctag tetapi bukan itu yang terjadi. Sebagai gantinya, sebagai nilai srctag, saya punya [object Module]. Saya menganggap file-loadermemancarkan beberapa objek dan diwakili seperti ini ketika .toString()metodenya dijalankan. Namun, saya dapat melihat bahwa file-loaderfile telah diproses dengan sukses dan dipancarkan dengan nama baru ke jalur output. Saya tidak mendapatkan kesalahan. Ini adalah konfigurasi webpack saya dan index.html.
const projectRoot = path.resolve(__dirname, '..');
{
entry: path.resolve(projectRoot, 'src', 'app.ts'),
mode: 'production',
output: {
path: path.resolve(projectRoot, 'dist'),
filename: 'app.bundle.js'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.html$/i,
use: 'html-loader'
},
{
test: /\.(eot|ttf|woff|woff2|svg|png)$/i,
use: 'file-loader'
},
{
test: /\.scss$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: false
}
},
{
loader: 'css-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
},
{
exclude: /node_modules/,
test: /\.ts$/,
use: 'ts-loader'
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(projectRoot, 'src', 'index.html')
}),
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[id].[hash].css',
ignoreOrder: false
})
]
};index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body class="dark">
<header>
<nav class="navigation">
<div class="left">
<img src="assets/logo.png" class="logo"> <!-- This logo is output as [object Module] -->
</div>
<div class="right">
</div>
</nav>
</header>
</body>
</html>Struktur proyek:
config/
webpack.config.js
dist/
src/
styles/
assets/
logo.png
index.html
app.tsEdit dependensi package.json saya:
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"ts-loader": "^6.2.1",
"typescript": "^3.7.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"