├──.idea
└──src
│ ├──app
│ ├──assets
│ ├──css
│ └──js
├──index.js
├──template.html
├──.babelrc
├──package.json
├──webpack.common.js
├──webpack.config.js
├──webpack.dev.js
└──webpack.prod.js
웹팩 설정 후 npm run build
를 하면 최상위 경로에 dist
폴더가 생성되고
html, css, js, image
파일이 압축되어 들어갑니다.
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 1
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.[contentHash].js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [new HtmlWebpackPlugin({
template: "./src/template.html"
})]
};
index.html
에 자동으로 추가해주는 플러그인. 템플릿을 지정해서 plugins
에 경로를 지정해줍니다.