Webpack 기본기 익히기

그동안 web개발할때 직접 구조를 잡아본적이 없던지라, 패드 개발하며 webpack공부가 필요했다. 그래서 뭘 공부해야할지 리스트를 요청해서 잘하는 선배님께 받았다. 이렇게 공부하면 된다구 하셨다.

1. npm init, create package.json

2. webpack install (devDependency) + webpack-cli

3. webpack config 파일 구성 : https://webpack.js.org/concepts/
   3.1 entry
   3.2 output
   3.3 modules
   babel-loader: https://babeljs.io/setup#installation
   loader안에 option property로 설정을 할 수도 있고 .babelrc 파일을 만들어도됨

   (css import 다루지않거나, styled-component 사용시에는 pass)
   style-loader: https://github.com/webpack-contrib/style-loader
   css-loader: https://github.com/webpack-contrib/css-loader
   sass-loader: https://github.com/webpack-contrib/sass-loader

   (url or file import 하지않으면 pass)
   url-loader: https://github.com/webpack-contrib/url-loader
   file-loader: https://github.com/webpack-contrib/file-loader

   eslint-loader: https://github.com/webpack-contrib/eslint-loader
   loader안에 option property로 설정을 할 수도 있고 .eslintrc 파일로 관리해도됨
   airbnb-eslint를 많이 쓰지만, 처음 접하는사람한테는 너무 룰이 강할 수 있음
   eslint-recommand로 시작해도 충분

   3.4 plugin 설정
   build시 마다 dist 청소해주기 - CleanWebpackPlugin
   index.html 구성해주기 + favicon도 넣어보자 - HtmlWebpackPlugin
   3.5 optimization
   초기단계엔 필요없어보입니다.

4. webpack config파일 개발/운영용 분리

5. webpack-dev-server 설치 및 구성

6. package.json에 script 구성
   개발용 빌드&서버기동 > start
   개발용 빌드 > dev
   운영용 빌드 > build

7. react 설치
   npm i react react-dom

   react 바벨 사용을 위해 npm i --save-dev @babel/preset-react
   .babelrc presets에 "@babel/preset-react" 추가
   기존 babel-loader 대상(test)이 js였다면, jsx도 추가
   => test: /.(jsx|js)$/

8. router 설정이 필요한 경우
   npm i react-router-dom: https://reacttraining.com/react-router/web/guides/quick-start

9. lodash 쓸경우
   npm i lodash-es
   lodash는 commonJS 모듈을 사용해서 tree-shaking이 webpack에서는 안된다.
   물론 그것을 해결하기위한 babel-loader plugin과 webpack plugin이 있지만
   추가 구성해야되서 귀찮으므로, lodash esm(es6 module)을 사용한 버전으로 사용하는게 이롭다~

10. 기타 운영용 코드분할, 난독화,압축,캐시 등은 나중에~~ 해도될듯

    keyword는
    optimization

• splitChunks
  plguin
  • UglifyJSPlugin
    CompressionPlugin
    • WorkboxPlugin