[리액트]Webpack 웹팩 이해하기(2)
2020. 5. 16. 18:57ㆍJavascript/React
Webpack 설치
0. package.json 초기화
|
1
|
npm init -y
|
Webpack 인터페이스는 webpack CLI와 webpack-dev-server로 총 2가지가 있다.
인터페이스 별로 Webpack 설치가 다르다. Webpack 설치에 앞서 Node JS 설치가 필요하다.
1-1. Webpack CLI 설치
webpack.config.js 설정 파일과 CLI를 이용해서 옵션을 가지고 온 후에 webpack에 제공한다.
전역에서 Webpack 사용하고 싶을 때,
첫번째 방법(node
|
1
|
install -g webpack
|
두번째 방법
package.json의 scripts에 추가한다. 이후에 npm run build를 하면 webpack 작업을 할 수 있다.
|
1
2
3
4
5
6
|
{
"scripts": {
"build": "./node_modules/.bin/webpack",
...
}
}
|
세번째 방법 (yarn으로 Webpack 설치)
|
1 |
yarn add --dev webpack |
특정 의존성을 설치하고 싶을 때,
|
1
|
npm install --save-dev webpack
|
--save 파라미터를 사용하면 package.json에 자동으로 설치하는 패키지의 Dependency가 추가된다.
1-1. Webpack CLI 설치
'Javascript > React' 카테고리의 다른 글
| [리액트] JSX (0) | 2020.05.24 |
|---|---|
| [리액트] 컴포넌트 (0) | 2020.05.24 |
| [리액트] 리액트 프로젝트 생성 및 설명 (0) | 2020.05.24 |
| Webpack 주요 개념 4가지; Entry, Output, Loader, Plugin (0) | 2020.05.16 |
| [리액트]Webpack 웹팩 이해하기(1) (0) | 2020.05.16 |