Tôi đang sử dụng webpack với HtmlWebpackPlugin, html-loadervà file-loader. Tôi có một cấu trúc dự án đơn giản trong đó tôi không sử dụng khung, mà chỉ có bản thảo. Vì vậy, tôi viết mã HTML của tôi trực tiếp đến index.html. Tôi cũng sử dụng tệp HTML này làm mẫu của mình HtmlWebpackPlugin.
Vì tất cả các trang web tôi cần phải đặt một hình ảnh đề cập đến một PNG trong thư mục tài sản của tôi. file-loadernên tải đúng tệp đặt tên tệp mới vào trong srcthẻ nhưng đó không phải là điều đang xảy ra. Thay vào đó, như giá trị của srcthẻ, tôi có [object Module]. Tôi giả sử file-loaderphát ra một số đối tượng và nó được biểu diễn như thế này khi .toString()phương thức của nó được chạy. Tuy nhiên, tôi có thể thấy rằng file-loaderđã xử lý tệp thành công và được phát ra với tên mới cho đường dẫn đầu ra. Tôi không nhận được lỗi. Đây là cấu hình webpack của tôi và 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>
Cơ cấu dự án:
config/
webpack.config.js
dist/
src/
styles/
assets/
logo.png
index.html
app.ts
Chỉnh sửa gói phụ thuộc của tôi.json:
"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"