[웹팩] 웹팩 설정하기.

웹팩으로 개발하기.

웹팩은 ES5으로 자동 변환 기기이므로 해당 설정하기만하면 너무 쉽다.

 

그런데, 그만큼 설정이 지랄맞다.

드럽게 어렵다.

그 이유가 문서가 개판.

https://webpack.kr/concepts/

Concepts | 웹팩

부가 설명이 불친절하기때문이다.

 

npm install webpack webpack-cli html-loader css-loader style-loader file-loader url-loader dotenv-webpack svgr-webpack --save-dev
npm install react react-dom @babel/core @babel/preset-env @babel/preset-react babel-loader --save
npm install -D @babel/plugin-transform-runtime
npm install @svgr/webpack --save-dev
npm install react react-dom --save

dot-env는 솔직히 필요가 없다. 다른 방법으로 진행해도 된다.

 

.babelrc 파일을 만든다.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": []
}

webpack.config.js 파일을 만든다.

이때, 그냥 만들면 react의 경우 react가 뭐냐 라는 에러문구를 직면하게 된다.

브라우저에서 주입해줘야 한다.

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.html$/,
        use: ['html-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // in bytes
              name: 'images/[name].[ext]',
            },
          },
        ],
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
  plugins: [
  	new webpack.ProvidePlugin({
      React: 'react',
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    // new Dotenv(), 해당 부분은 못 쓰고, 다른 것으로 진행해야 접근이 가능하다. 다른거 찾아보시길.
  ],
  resolve: {
    extensions: ['.js', '.jsx','json'], // json의 경우 자동 변환이 되므로 뻘짓할 필요가 없다.
  },
};

웹팩 코드를 만들어놓긴했는데, 해당 코드는 chatgpt가 만든 샘플코드라 안될가능성이 있다.

거기에 내가 조금만 양념을 뿌림.

 

나는 작동되는 코드가 있지만 공개할 생각은 없다.

노력하라~