[javascript] webpack.config.js 설정

개요

• node.js 문법을 써야 한다.
• entry 에 있는 명령어를 읽어서 변환과정을 거쳐서 output 으로 전달함.
• entry -> module -> plugin -> output 으로 전달됨

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  devServer: {
    compress: true,
    port: 9999,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "2.3 setup webpack & babel",
      template: "index.html"
    }),
  ],
};

• loader
  • 특정 모듈을 변환하는대 사용한다.
  • .js 파일을 babel-loader 를 사용해서 변환해라. /node_modules/ 폴더는 제외하고!!
• plugin
  • 플러그인을 사용하면 번들을 최적화 하거나 애셋을 관리하고 환경변수등을 주입하는게 가능하다.
  • require 를 통해서 플러그인을 요청한다.
  • 다른 목적을 위해 플러그인을 여러번 사용할수 있기 때문에 new 를 사용해서 인스턴스를 만들어야 한다.

참고

https://webpack.kr/concepts/