[React] webpack 설정들의 의미

module.exports = {
    name: 'wordrelay-setting', // 그냥 이름
    mode: 'development', // 실 서비스에서는: production
    devtool: 'eval',  // 빠르게 하겠다는 의미
    resolve: {
        extensions: ['.js', '.jsx']
    },
    
    entry: {
        app: ['./client'],
    }, // 입력
    
    module: {
       rules: [{
          test: /\.jsx$/,  // 정규표현식이다. 의미는 js랑 jsx파일에 rule을 적용하겠다.
           loader: 'babel-loader', // js,jsx에 바벨을 적용해서 최신이나 실험적인 문법을 옛날브라우저에서도 
                                   // 호환되는 문법으로 바꿔주겠다는 의미
           options: {
             presets: ['@babel/preset-env', '@babel/preset-react'], // 아까 설치한 preset 모듈들을 주면 된다.
             plugins: ['@babel/plugin-proposal-class-properties'],
           },
       }],
    }, // @babel/preset-env등을 설치 후 이것을 추가해주는데, 이것의 역할은 "entry 라는 
       // 파일을 읽고 거기에 모듈을 적용한 후 output에 뺀다"는 의미이다.
    
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    }, // 출력

    // client.jsx, WordRelay.jsx를 app.js에 합쳐줘야 하는데, 
    // client.jsx에서 이미 WordRelay.jsx를 불러오고 있어서 client.jsx만 불러오면 app.js에 합쳐진다.

    // 📎 resolve에 확장자를 추가해주면 entry에 확장자를 적어줄 
    //    필요가 없이 웹팩에서 알아서 resolve에 리스트 되어있는 확장자 범위 안에서 찾아준다.

    // 실행 방법: npx webpack 을 해주면 dist/app.js에 코드가 합쳐진다.
};

---

※ module에 options에 presets의 또다른 표현법

module: {
      rules: [{
          ...
              presets: [
                  ['@babel/preset-env', {
                    targets:{
                  🔈   browsers: ['last 2 chrome versions'], // 최신 브라우저만 지원할 수 있게 한다.
                    },
                  }],
                  '@babel/preset-react'],
              plugins: ['@babel/plugin-proposal-class-properties'],
          }
      }],
    },
    
 // @babel/preset-env는 자동으로 옛날브라우저들을 호환시켜주는 것인데 이것을 이렇게 조금 더 구체적으로 설정해줄 수 있다.

🔈 밑에와 같은 옵션들이 들어갈 수 있다.

• > 5%: browsers versions selected by global usage statistics. >=, < and <= work too.
• > 5% in US: uses USA usage statistics. It accepts two-letter country code.
• > 5% in alt-AS: uses Asia region usage statistics. List of all region codes can be found at caniuse-lite/data/regions.
• > 5% in my stats: uses custom usage data.
• > 5% in browserslist-config-mycompany stats: uses custom usage data from browserslist-config-mycompany/browserslist-stats.json.

https://github.com/browserslist/browserslist#queries

---

※ 추가적으로 뭔가 하고싶은 것들이 있다면 plugins을 붙인다. (확장프로그램 개념)

module: {
      rules: [{
          test: /\.jsx$/,
          loader: '...',
          options: {
              presets: ['...']
              plugins: ['...'],
          },
      }],
    },
  🔈plugins: [
        new webpack.LoaderOptionsPlugin({ debug: true }),
    ],
    output: {
        path: ...,
        filename: '...'
    },

 

 

 

@babel/preset-env 

브라우저에 맞게 알아서 최신문법을 옛날문법으로 바꿔준다.

 

@babel/preset-react

js를 지원하게 해준다.

 

babel-loader

바벨이랑 웹팩을 연결해준다.