[๐Ÿ“š ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ] Webpack Plugin ์‚ฌ์šฉ๋ฒ•

dsfasdยท2022๋…„ 11์›” 23์ผ
0

ํ”Œ๋Ÿฌ๊ทธ์ธ

๋ฒˆ๋“ค๋ง ๊ณผ์ • ์ค‘์— ๊ฐœ๋ฐœ์ž๊ฐ€ ์›ํ•˜๋Š” ๋‹ค์–‘ํ•œ ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ๋กœ๋”์ฒ˜๋Ÿผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ๋กœ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์ž‘์—…์€ ์•„๋‹ˆ์ง€๋งŒ, ๋ฒˆ๋“ค๋ง์— ์œ ์šฉํ•œ ๋‹ค์–‘ํ•œ ํˆด์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.


html-webpack-plugin ์‚ฌ์šฉํ•˜๊ธฐ

html-webpack-plugin์€ ๋ฒˆ๋“ค๋ง ๊ณผ์ • ์ค‘ html ํŒŒ์ผ์„ ์ž์‹ ์ด ์›ํ•˜๋Š” ํ˜•ํƒœ๋กœ ๊ฐ€๊ณตํ•˜์—ฌ ๋ฒˆ๋“ค์— ํฌํ•จํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ค€๋‹ค.

html ํŒŒ์ผ๋„ ๋ฒˆ๋“ค๋ง์— ํฌํ•จ์‹œํ‚ค๊ธฐ ์œ„ํ•ด ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜๊ณ ์ž ํ•œ๋‹ค.
dist/index.html์„ src ๋””๋ ‰ํ„ฐ๋ฆฌ๋กœ ์˜ฎ๊ฒจ๋‘”๋‹ค.

html-webpack-plugin ์„ค์น˜

html-webpack-plugin

webpack.config.js ํŒŒ์ผ์— ํ”Œ๋Ÿฌ๊ทธ์ธ ์ ์šฉ

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin') // ํ”Œ๋Ÿฌ๊ทธ์ธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  
  //ํ”Œ๋Ÿฌ๊ทธ์ธ ์ž‘์„ฑ
  plugins: [new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src", "index.html")
  })]
};

npm run build๋ฅผ ํ†ตํ•ด ํŒŒ์ผ ๋ฒˆ๋“ค๋ง์„ ์‹คํ–‰ํ•˜๋ฉด
dist/index.html ํŒŒ์ผ์ด ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•ด ์•„๋ž˜์™€ ๊ฐ™์€ ์Šคํฌ๋ฆฝํŠธ ์š”์†Œ๊ฐ€ ์ž๋™์œผ๋กœ ์ถ”๊ฐ€๋˜์—ˆ๋‹ค.

<script defer="defer" src="app.bundle.js"></script> 
profile
๊ธฐ๋ก์„ ์ •๋ฆฌํ•˜๋Š” ๊ณต๊ฐ„!

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