๐ก ๋ก๋(loader)๋ ํ์ผ์ ์ ์ฒ๋ฆฌ(preprocess) ํด์ฃผ๋ ๊ฒ์ธ๋ฐ, ์ด ๋ ํ์ผ์ ๋ชจ๋์ ๋ปํ๋ฉฐ js ํ์ผ ๋ฟ๋ง ์๋๋ผ img, css, csv ๋ฑ ๋ชจ๋ ์ ์ ๋ฆฌ์์ค๋ฅผ ํฌํจํ๋ค. ๋ก๋๋ ๋ชจ๋์ ์ ๋ ฅ ๋ฐ์์, ์๋ก์ด ๋ชจ๋๋ก ์ถ๋ ฅํ๊ณ ๋ฒ๋ค๋ง ํ ์ ์๋ค.
GitHub - wecode-bootcamp-korea/webpack-react
์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์ฒ๋ฆฌํ๋ค. ์๋ฅผ ๋ค์ด jsx ๋ฌธ๋ฒ์ผ๋ก ์์ฑ๋ ๋ฆฌ์กํธ ์ฝ๋๋ฅผ ์ฒ๋ฆฌํ ๋๋ ํ์ํ๋ค.
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
}
const presets= {
presets: ["@babel/preset-react"]
};
module.exports = presets;
css ํ์ผ๋ ๋ชจ๋๋ก ์ฌ์ฉํ ์ ์๋๋ก ํด์ค๋ค.
yarn add sass-loader css-loader mini-css-extract-plugin sass -D
sass๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด sass-loader๋ฅผ ์ถ๊ฐํ๊ณ , js ๋ง๋ค css๋ฅผ importํด์ ์ฌ์ฉํ ์ ์๋๋ก MiniCssExtractPlugin.loader ๋ฅผ ์ฌ์ฉํ์๋ค.
{
test: /\.(sa|sc)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
yarn add file-loader -D
ํ์ผ๋ก๋๋ฅผ ์ฌ์ฉํ์ง ์์ผ๋ฉด root ๊ฒฝ๋ก์ ๋ชจ๋ ํ์ผ์ด ๋ฒ๋ค๋๋ค. ๊ฐ๋ฐ๋ชจ๋์์ ์ฌ์ฉํ ๊ฒฝ๋ก๋๋ก ๊ทธ๋๋ก ํ์ผ์ด ๋ฒ๋ค๋๊ธธ ๋ฐ๋ผ๋ฉด file-loader๋ฅผ ์ฌ์ฉํ์. ๊ทธ๋ฆฌ๊ณ name์ค์ ์ ํ์ง ์์ผ๋ฉด ํ์ผ ์ด๋ฆ์ ํด์๊ฐ์ด ํฌํจ๋๋ฉฐ ๋ธ๋ผ์ฐ์ ์บ์ฑํจ๊ณผ๋ฅผ ํ์ฉํ ์ ์๋ค.
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
}
ํ๋ฌ๊ทธ์ธ์ ๋ก๋๋ณด๋ค ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ๊ฐ๋๋ค. ๋ก๋๋ ํน์ ๋ชจ๋์ ๋ํ ์ฒ๋ฆฌ๋ง ๋ด๋นํ์ง๋ง ํ๋ฌ๊ทธ์ธ์ ์นํฉ์ด ์คํ๋๋ ์ ์ฒด ๊ณผ์ ์ ๊ฐ์ ํ ์ ์๋ค.
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new HtmlWebpackPlugin({
template: './public/index.html',
output: 'index.html'
}),
]