Webpack 5회차 - 모드의 도입
웹팩의 운영 모드
웹팩을 실행하면 WARNING in configration~ 경고문구가 터미널에 출력된다.
웹팩은 굉장히 많은 설정을 갖고 있고 다 기억하기 쉽지 않기 때문에 기본 설정값을 갖고 있다.
기본 설정값에는 개발자 모드(development), 실제 제품으로 배포 되는 모드(production), 아무것도 설정되지 않은 모드(none)가 있다.
터미널의 경고문구에 있는 주소 ( https://webpack.js.org/configuration/mode/)로 이동하면 모드에 대한 설명을 볼 수 있고 아래 사진과 같이 각 모드별 생략된 설정된 옵션들을 볼 수 있다. (아래 사진은 개발자 모드에 생략된 옵션의 사진이다)
따라서 개발을 하기 위한 것인지 서비스를 하기 위한 것인지에 따라 모드를 다르게 설정할 필요가 있다.
모드 설정
webpack.config.js에서 mode를 설정할 수 있다.
const path = require('path');
module.exports = {
mode:"development", //개발자모드로 설정
entry: "./source/index.js",
output: {
path:path.resolve(__dirname, "public"),
filename: 'index_bundle.js'
}
}
모드를 추가하고 웹팩을 실행시키면 터미널에서 더이상 WARNING이 출력되지 않고 번들링 된 파일인 index_bundle.js 의 코드도 변경된 것을 볼 수 있다.
다른 모드 생성
개발을 할 때와 배포를 할 때는 모드가 다를 수밖에 없다.
개발자 모드로 설정된 web.config.js는 그대로 두고 webpack.config.prod.js 파일을 새로 생성한다.
const path = require('path');
module.exports = {
mode:"production", //배포 모드로 설정
entry: "./source/index.js",
output: {
path:path.resolve(__dirname, "public"),
filename: 'index_bundle.js'
}
}
그냥 웹팩을 실행하면 개발자 모드로 실행이 된다.
위에서 생성한 다른 모드로 웹팩을 실행하려면 npx webpack --config wepack.config.prod.js(새로만든 파일명) 명령어를 입력하면 된다. index_bundle.js 파일을 확인하면 또 다른 형태로 번들링 된 것을 확인할 수 있다.
또는 하나의 webpack.config.js 파일을 생성해서 조건문 등을 이용하여 시스템의 환경변수를 어떻게 생성했냐에 따라 적당한 모드로 스위칭 되게 설정할 수도 있다.
Author And Source
이 문제에 관하여(Webpack 5회차 - 모드의 도입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hey880/Webpack-5회차-모드의-도입저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)