babel-webpack 설정

webpack

• babel 설정 이후 셋팅입니다.
• https://royleej9.tistory.com/entry/babel-setting
• https://github.com/royleej9/javascript-sample/tree/master/babel-webpack

---

설치

npm install webpack webpack-cli --save-dev

• 실행 명령어 등록

환경설정

// file - webpack.config.js
const path = require("path");
const webpack = require("webpack");

module.exports = (env, options) => {
  const config = {
    entry: { app: ["./src/index.js"] },
    output: {
      filename: "[name].bundle.js",
      path: path.resolve(__dirname, "dist"),
    },
  };

  return config;
};

명령어

// file - package.json
"scripts": {
    "build": "webpack --config webpack.config.js"
}

---

babel 연동

설치

npm install --save-dev babel-loader

설정

• babel-loader의 option의 presets /plugins 설정시 babel 설정파일(ex:.babelrc.json)이 적용된 해당 내용이 무시됨

• webpack 설정파일에서 babel도 함께 설정을 하고 싶으면 아래 url 참고

  • https://webpack.js.org/loaders/babel-loader/#root

// file - webpack.config.js
const path = require("path");
const webpack = require("webpack");

module.exports = (env, options) => {
  const config = {
      ...
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          include: path.resolve(__dirname, "src"),
          use: {
            loader: "babel-loader",
            // options: {
            //   presets: ["@babel/preset-env"],
            //   plugins: ["@babel/plugin-transform-runtime"],
            // },
          },
        },
      ],
    },
  };
  return config;
};

---

loading css

설치

npm install --save-dev style-loader css-loader

설정

// file - webpack.config.js
const path = require("path");
const webpack = require("webpack");

module.exports = (env, options) => {
  const config = {
    ...
    module: {
      rules: [
        ...
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
  };
  return config;
};

---

플러그인 - CleanWebpackPlugin

• 빌드 폴더를 먼저 삭제 후 빌드 - 빌드 폴더 정리

설치

npm install --save-dev clean-webpack-plugin

설정

// file - webpack.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = (env, options) => {
    const config = {
        ...
        plugins: [new CleanWebpackPlugin()],
    }
}

---

플러그인 - HtmlWebpackPlugin

• build 결과 js 파일을 지정된 html 파일에 자동 추가해줌

설치

npm install --save-dev html-webpack-plugin

설정

// file - webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = (env, options) => {
    const config = {
        ...
        plugins: [
            ...
            new HtmlWebpackPlugin({
            template: path.join(__dirname, "/public/index.html"),
            showErrors: true,
            }),
        ],
    }
}

---

webpack-dev-server

• 코드를 변경할때마다 자동으로 빌드되면서 브라우저에서 바로 확인 가능

설치

npm install --save-dev webpack-dev-server

설정

// file - package.json
"scripts": {
    "dev": "webpack-dev-server --open ",
}

// file - webpack.config.js
module.exports = (env, options) => {
    const config = {
        ...
        devServer: {
        contentBase: "./dis",
        },
    }
}

---

정리

설치

npm install webpack webpack-cli --save-dev
npm install --save-dev babel-loader
npm install --save-dev clean-webpack-plugin
npm install --save-dev html-webpack-plugin
npm install --save-dev webpack-dev-server

설정

// file - package.json
  "scripts": {
    "dev": "webpack-dev-server --open",
    "build": "webpack --config webpack.config.js --mode production",
  },

// file - webpack.config.js
const path = require("path");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = (env, options) => {
  const config = {
    entry: { app: ["./src/index.js"] },
    output: {
      filename: "[name].bundle.js",
      path: path.resolve(__dirname, "dist"),
    },
    devServer: {
      contentBase: "./dist",
    },
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          include: path.resolve(__dirname, "src"),
          use: {
            loader: "babel-loader",
          },
        },
      ],
    },

    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: path.join(__dirname, "/public/index.html"),
        showErrors: true,
      }),
    ],
  };

  return config;
};

---

[참고]

• https://babeljs.io/setup.html#installation
• https://webpack.js.org/
• https://d2.naver.com/helloworld/0239818
• https://ui.toast.com/weekly-pick/ko_20180420/
• https://meetup.toast.com/posts/157