Używam webpack z HtmlWebpackPlugin, html-loaderi file-loader. Mam prostą strukturę projektu, w której nie używam ram, a jedynie maszynopis. Dlatego piszę mój kod HTML bezpośrednio na index.html. Używam również tego pliku HTML jako mojego szablonu HtmlWebpackPlugin.
Jak wszystkie strony internetowe, muszę umieścić obraz, który odnosi się do PNG w moim folderze zasobów. file-loaderpowinien poprawnie załadować plik, umieść nową nazwę pliku w srctagu, ale tak się nie dzieje. Zamiast tego srcmam wartość tagu [object Module]. Zakładam, że file-loaderemituje jakiś obiekt i jest on reprezentowany w ten .toString()sposób po uruchomieniu jego metody. Widzę jednak, że file-loaderplik został przetworzony pomyślnie i został wysłany z nową nazwą do ścieżki wyjściowej. Nie dostaję błędów. Oto moja konfiguracja pakietu internetowego i 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>Struktura projektu:
config/
webpack.config.js
dist/
src/
styles/
assets/
logo.png
index.html
app.tsEdytuj zależności My package.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"