WebPack 사용법

Code/Web 2019. 4. 12. 05:47



* 최신버전 nodejs 설치
https://nodejs.org/
- npm은 덤
- 버전 확인
node -v
npm -v


* npm 초기화
package.json 파일 생성
https://kdydesign.github.io/2017/07/15/nodejs-npm-tutorial/

npm init -y


* npm 패키지 설치
package.json에 있는 의존성 패키지 모두 설치
npm install


* webpack 설치
https://webpack.js.org/guides/installation/

- 로컬로 설치
npm install --save-dev webpack
npm install --save-dev webpack-cli

- 전역으로 설치( 비추)
npm install --global webpack

- --save 와 --save-dev 옵션의 차이
둘다 .node_moduels 폴더에 패키지를 설치하고지만 
--save-dev는 package.json 파일의 devDependencies{}섹션에 기록되고  --production 빌드시 포함되지 않음


- webpack version
npm list webpack
npm view webpack version
.\node_modules\.bin\webpack -v


//====================
* webpack 스크립트 추가
- 명령 간소화
package.json 파일 편집

"scripts": {
    "webpack": "webpack --mode development"
  }

- 명령실행
npm run webpack
./node_modules/.bin/webpack 와 동일


//=============================
webpack.config.js 파일 작성
https://webpack.js.org/configuration/
 - webpack 기본 설정 파일

-  webpack.config.js 생성 명령
npx webpack-cli init


//================
- 수동 작성 예시
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist2'),
filename: 'app.bundle.js'
}
}


//=======================
< 명령, 옵션 >
https://webpack.js.org/api/cli/


--config webpack2.config.js
- 설정파일 설정 : 기본 = webpack.config.js


--mode
"development" or "production"



//====================



//=========================
//참고
https://imskojs.github.io/intro-to-webpack/
https://medium.com/@shlee1353/%EC%9B%B9%ED%8C%A9-%EC%9E%85%EB%AC%B8-%EA%B0%80%EC%9D%B4%EB%93%9C%ED%8E%B8-html-css-%EC%82%AC%EC%9A%A9%EA%B8%B0-75d9fb6062e6
http://www.daleseo.com/webpack-basics/

'Code > Web' 카테고리의 다른 글

ssh 사용법 (윈도우에서 원격 리눅스에 한줄 명령 보내기)  (0) 2019.04.26
Sass 사용법  (0) 2019.04.12
WebPack 사용법  (0) 2019.04.12
부트스트랩 테마 변경  (0) 2019.04.12
리눅스에 mysql 5.7 설치 하기  (0) 2019.04.12
MySql 시간대 한국으로 변경  (0) 2019.04.01
Posted by 코덴스

댓글을 달아 주세요