플러그인 - 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- TODO: HtmlWebpackPlugin에서 빌드 환경을 주입하도록 웹팩을 구성하세요 -->
<title>검색</title>
<!-- TODO: HtmlWebpackPlugin에서 엔트리 포인트(main.css)를 로딩하도록 웹팩을 구성하세요 -->
</head>
<body>
<div id="app">
<header>
<h2 class="container">검색</h2>
</header>
<div class="container">
<form class="FormView">
<input type="text" placeholder="검색어를 입력하세요" autofocus>
<button type="reset" class="btn-reset"></button>
</form>
<div class="content">
<div id="tabs"></div>
<div id="search-keyword"></div>
<div id="search-history"></div>
<div id="search-result"></div>
</div>
</div>
</div>
<!-- TODO: HtmlWebpackPlugin에서 엔트리 포인트(main.js)를 로딩하도록 웹팩을 구성하세요 -->
</body>
</html>
// webpack.config.js
const path = require("path");
module.exports = {
mode: "development",
entry: {
main: "./src/app.js"
},
output: {
filename: "[name].js",
path: path.resolve("./dist")
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(png|jpg|svg|gif)$/,
loader: "url-loader",
options: {
name: "[name].[ext]?[hash]",
limit: 10000 // 10Kb
}
}
]
}
/**
* TODO: 아래 플러그인을 추가해서 번들 결과를 만들어 보세요.
* 1. BannerPlugin: 결과물에 빌드 시간을 출력하세요.
* 2. HtmlWebpackPlugin: 동적으로 html 파일을 생성하세요.
* 3. CleanWebpackPlugin: 빌드 전에 아웃풋 폴더를 깨끗히 정리하세요.
* 4. MiniCssExtractPlugin: 모듈에서 css 파일을 분리하세요.
*/
};