내가 가진 웹팩을 사용하고 HtmlWebpackPlugin, html-loader하고 file-loader. 프레임 워크를 사용하지 않고 typescript 만 사용하는 간단한 프로젝트 구조가 있습니다. 따라서 HTML 코드를에 직접 작성합니다 index.html. 또한이 HTML 파일을의 템플릿으로 사용 HtmlWebpackPlugin합니다.
모든 웹 사이트와 마찬가지로 자산 폴더에 PNG를 나타내는 이미지를 넣어야합니다. 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내 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"