मैं वेबपैक का उपयोग कर रहा हूं HtmlWebpackPlugin, html-loaderऔर file-loader। मेरे पास एक सरल परियोजना संरचना है जिसमें मैं कोई रूपरेखा का उपयोग नहीं करता, लेकिन केवल टाइपस्क्रिप्ट। इस प्रकार, मैं सीधे अपना HTML कोड लिखता हूं index.html। मैं इस HTML फ़ाइल को अपने टेम्पलेट के रूप में भी उपयोग करता हूं HtmlWebpackPlugin।
जैसा कि सभी वेबसाइटों को मुझे एक छवि डालने की आवश्यकता है जो मेरे संपत्ति फ़ोल्डर में पीएनजी को संदर्भित करता है। file-loaderफ़ाइल को सही तरीके से लोड करना चाहिए ताकि srcटैग के अंदर नया फ़ाइल नाम रखा जा सके लेकिन ऐसा नहीं हो रहा है। इसके बजाय, srcटैग के मूल्य के रूप में , मेरे पास है [object Module]। मैं file-loaderकिसी वस्तु को उत्सर्जित करता हूं और इसे इस तरह से प्रस्तुत किया जाता है जब इसकी .toString()विधि चलाई जाती है। हालाँकि, मैं देख सकता हूँ कि file-loaderफ़ाइल को सफलतापूर्वक संसाधित किया गया है और आउटपुट पथ पर नए नाम के साथ उत्सर्जित किया गया है। मुझे कोई त्रुटि नहीं है। यहाँ मेरा वेबपैक विन्यास और है 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>परियोजना संरचना:
config/
webpack.config.js
dist/
src/
styles/
assets/
logo.png
index.html
app.tsमेरा पैकेज संपादित करें । संदेश निर्भरताएँ:
"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"