webpack 뜯어보기

공식 사이트: https://webpack.js.org/

webpack

//npm init
//package.json

...

"scripts": {
	"dev": "webpack"
}

npm run dev

npx webpack

 

const path = require('path'); //node를 설치하면 경로 조작을 쉽게 할 수 있는 path를 준다.
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  name: 'wordrelay', //웹팩 설정 이름
  mode: 'development', // 개발용 | 실서비스: production
  devtool: 'eval', // 개발용 | 실서비스: hidden-source-map
  resolve: {
    extensions: ['.js', '.jsx']
    //webpack이 확장자를 찾는다.
  },

  entry: {
    app: ['./client'],
    //웹팩으로서 합쳐줄 파일들을 배열로 app에 담음. 
    //client.jsx에서 import 되어있는 것까지 모두 합쳐준다.
    //확장자를 적어주기 귀찮으면 확장자를 생략하고 
    //resolve를 이용해 exteinsions에 확장자를 모아준다.
  }, // 입력
  module: {
    rules: [{ //여러개의 규칙
      test: /\.jsx?$/, //정규표현식. js파일과 jsx파일을 적용하겠다.
      loader: 'babel-loader', //바벨로
      options: { //바벨의 옵션
        presets: [
          ['@babel/preset-env', {
            targets: {
              browsers: ['> 1% in KR'], // browserslist
            },
            debug: true,
          }],
          '@babel/preset-react',
        ],
        plugins: [
          '@babel/plugin-proposal-class-properties',
          'react-refresh/babel',
        ],
      },
    }],
  },
  output: {
    path: path.join(__dirname, 'dist'), 
    //path.join: path를 알아서 합쳐줌. 현재 폴더 안에 들어있는 'dist'를 만듦
    filename: 'app.js',
    //파일 이름은 app.js 로
    publicPath: '/dist/',
  }, //출력
  devServer: {
    publicPath: '/dist/',
    hot: true
  },
};

entry 에 있는 파일을 읽어서 module을 적용한 후, output으로 뺀다.