웹팩으로 번들링하기-react

작동 모드

📗webpack-merge 설치

npm install --save-dev webpack-merge

📗*webpack.config 파일 추가
webpack.config.dev.js 추가
webpack.config.prod.js 추가

📗webpack.config 설정

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

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

//const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); 삭제

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    clean: true,
  },
  mode: "none",//모드 변경
  devServer: {
    static: "./dist",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
    }),
    new MiniCssExtractPlugin({
      linkType: false,
    }),
    //new BundleAnalyzerPlugin(), 삭제
  ],
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
    runtimeChunk: "single",
  },
};

📗webpack.config.dev 설정

//webpack.config.dev.js
const { merge } = require("webpack-merge");
const common = require("./webpack.config");

module.exports = merge(common, {
  mode: "development",
  devServer: {
    port: 3001,
  },
});

📗webpack.config.prod 설정

//webpack.config.prod.js
const { merge } = require("webpack-merge");
const common = require("./webpack.config");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

module.exports = merge(common, {
  mode: "production",
  plugins: [new BundleAnalyzerPlugin()],
});

📗package.json 설정

//package.json
  "scripts": {
    "build:dev": "webpack --config webpack.config.dev.js",
    "build:prod": "webpack --config webpack.config.prod.js",
    "dev-server": "webpack serve --open --config webpack.config.dev.js",
  },

eslint, prettier

📗eslint 설치

npm install --save-dev eslint eslint-plugin-react @babel/eslint-parser eslint-plugin-jsx-a11y

📗파일 생성
.eslintrc.js 생성

📗eslintrc 설정

//.eslintrc.js
module.exports = {
  parser: '@babel/eslint-parser',
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  settings: {
    react: {
      version: '17.0.2',//
    },
  },
  rules: {
    'react/react-in-jsx-scope': 0,
    'react/jsx-uses-react': 0,
    'react/prop-types': 0,
  },
};

📗jsx-a11y 관련 에러 대처
🚫 Non-interactive elements should not be assigned interactive roles

//button이 아닌데 onClick이 있는 경우를 말함
<p role='presentation' onClick={() => clickHandler(e)}></p>
//role='presentation' 추가

📗prettier 설치

npm install --save-dev prettier

📗prettier 생성
.prettierrc.js 생성

📗prettier 설정

//.prettierrc.js
module.exports = {
  singleQuote: true,//작은 따옴표
  jsxSingleQuote: true,
};

참고

[Lint] ESLint + Prettier 설정하기
(에러핸들링)Non-interactive elements should not be assigned interactive roles