[Webpack] webpack loader

๊ณ ๋ณ‘ํ‘œยท2022๋…„ 4์›” 24์ผ
0

Webpack

๋ชฉ๋ก ๋ณด๊ธฐ
5/5
post-thumbnail

๐Ÿ’ก ๋กœ๋”(loader)๋Š” ํŒŒ์ผ์„ ์ „์ฒ˜๋ฆฌ(preprocess) ํ•ด์ฃผ๋Š” ๊ฒƒ์ธ๋ฐ, ์ด ๋•Œ ํŒŒ์ผ์€ ๋ชจ๋“ˆ์„ ๋œปํ•˜๋ฉฐ js ํŒŒ์ผ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ img, css, csv ๋“ฑ ๋ชจ๋“  ์ •์  ๋ฆฌ์†Œ์Šค๋ฅผ ํฌํ•จํ•œ๋‹ค. ๋กœ๋”๋Š” ๋ชจ๋“ˆ์„ ์ž…๋ ฅ ๋ฐ›์•„์„œ, ์ƒˆ๋กœ์šด ๋ชจ๋“ˆ๋กœ ์ถœ๋ ฅํ•˜๊ณ  ๋ฒˆ๋“ค๋ง ํ•  ์ˆ˜ ์žˆ๋‹ค.

GitHub - wecode-bootcamp-korea/webpack-react

babel-loader


์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ์ฒ˜๋ฆฌํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด jsx ๋ฌธ๋ฒ•์œผ๋กœ ์ž‘์„ฑ๋œ ๋ฆฌ์•กํŠธ ์ฝ”๋“œ๋ฅผ ์ฒ˜๋ฆฌํ•  ๋•Œ๋„ ํ•„์š”ํ•˜๋‹ค.

module: {
  rules: [
     {
       test: /\.js$/,
       exclude: /node_modules/,
       use: ['babel-loader']
     }
  ]
}
  • js ํ™•์žฅ์ž๋ฅผ ๊ฐ–๋Š” ๋ชจ๋“ˆ์€ babel-loader๊ฐ€ ์ฒ˜๋ฆฌํ•˜๋„๋ก ์„ค์ •ํ•œ๋‹ค.
const presets= {
  presets: ["@babel/preset-react"]
};

module.exports = presets;
  • babel ์„ธํŒ…๋„ ํ•ด์•ผํ•œ๋‹ค. @babel/preset-react ํ”„๋ฆฌ์…‹์„ ์‚ฌ์šฉํ•˜๋„๋ก ์„ค์ •ํ•œ๋‹ค.

css-loader


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'
  ]
}

file-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]'
        }
      }
    ]
}

plugin


ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ๋กœ๋”๋ณด๋‹ค ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ์„ ๊ฐ–๋Š”๋‹ค. ๋กœ๋”๋Š” ํŠน์ • ๋ชจ๋“ˆ์— ๋Œ€ํ•œ ์ฒ˜๋ฆฌ๋งŒ ๋‹ด๋‹นํ•˜์ง€๋งŒ ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ์›นํŒฉ์ด ์‹คํ–‰๋˜๋Š” ์ „์ฒด ๊ณผ์ •์— ๊ฐœ์ž…ํ•  ์ˆ˜ ์žˆ๋‹ค.

 plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
			output: 'index.html'
    }),
]
  • HtmlWebpackPlugin๋Š” html ํŒŒ์ผ์— script ํƒœ๊ทธ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ๋ฒˆ๋“ค๋œ js ํŒŒ์ผ์„ ์ฃผ์ž…ํ•œ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€