আমি webpack ব্যবহার করছি HtmlWebpackPlugin, html-loaderএবং file-loader। আমার একটি সাধারণ প্রকল্প কাঠামো রয়েছে যাতে আমি কোনও ফ্রেমওয়ার্ক ব্যবহার করি না, তবে কেবল টাইপস্ক্রিপ্ট। সুতরাং, আমি সরাসরি আমার এইচটিএমএল কোড লিখি index.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"