목록IT/Webpack (11)
darait
uglifyjs-webpack-plugin vs terser-webpack-plugin 요즘 npm 사용되는 minimization 관련 추세 https://www.npmtrends.com/babel-minify-vs-babel-minify-webpack-plugin-vs-uglifyjs-webpack-plugin-vs-terser terser-webpack-plugin가 2019년도 부터 uglifyjs-webpack-plugin 보다 더 많이 사용되고 있다.
webpack 4 일땐, 자동으로 es5 형식으로 묶어준다. function(){} webpack 5 일땐, 자동으로 es6 형식으로 묶어준다. () => {} webpack 5 부터는 webpack 설정에 target: ['web', 'es5'] 와 같이 설정이 필요하다. 또는 아래와 같이 flugin 을 설정해 줄 수 있다. { ... new TerserPlugin({ terserOptions: { parse: { ecma: 8 }, compress: { ecma: 5, warnings: false, comparisons: false, inline: 2, // pure_funcs: ['window.console.log', 'console.log'], // console.log()만 제거 }, mang..
module.exports = { ... optimization: { splitChunks: { chunks: 'all' } } ... }; build 를 할때 위와 같이 설정을 하면 code splits 를 할 수 있다. 코드에 추가하는 기능의 bendor 를 따로 bundling 하여서 코드와 vendor 을 두개로 bundle 되어 생성된다. 둘다 적용하기 위해서는 따로 따로 태그에 걸어서 사용해야 한다.
yarn uninstall webpack -g yarn add -D eslint babel-eslint yarn dev package.json { ... "dev": "NODE_ENV=development webpack -w --config ./webpack/webpack.config.dev.js --progress", ... } webpack dev 설정은 각자 알아서 하시길...
blog.doitreviews.com/development/2020-04-30-webpack-advanced/
성능 최적화 임으로 prod 에만 넣어주면 된다. brunch.co.kr/@swimjiy/24 번들링도 미니멀리즘이 필요하다: Tree Shaking 더 가벼운 서비스를 위한 webpack 최적화 방법을 알아보자 | 프런트엔드 프로젝트를 배포하기 위해서 주로 webpack을 이용하여 여러 모듈을 묶어서 빌드합니다. 이 과정을 번들링이라고 하죠. 번들 brunch.co.kr
devServer { proxy 옵션 관련 } hoons-up.tistory.com/26 [Develop/React] proxy 수동 설정(setupProxy) proxy 수동 설정(setupProxy) React에서 백엔드 서버로 API 요청 시 호출 할 때 발생 할 수 있는 CORS 관련 오류를 방지하기 위하여 Proxy를 설정하여 준다. 간단하게 설정하는 방법과 수동으로 커스터마이 hoons-up.tistory.com
웹팩 설정을 하나로 합쳐주는 것 웹팩 머지는 단어 그대로 여러 개의 웹팩 설정 파일을 하나로 병합해주는 라이브러리입니다. 실행 모드에 따라 웹팩 설정하기에서도 언급했지만 일반적으로 웹 애플리케이션을 제작할 떄는 웹팩 설정을 개발(Development)용과 배포(Production)용으로 나누어 적용합니다. 앞에서 배운 것처럼 실행 모드에 따라 조건 문으로 설정을 구분할 수 있으나 실제로 파일을 아예 나눠놓는 게 더 권장하는 방식입니다. 웹팩 머지는 이러한 상황에서 더 빛을 발휘할 수 있습니다. webpack.config.common.js webpack.config.dev.js webpack.config.prod.js