동영상을 보며 단편적으로 공부한 것들을 몇 개 정리했는데 조각조각난 느낌이 있어서
공식문서를 보고 내 식으로 정리해보려고 한다.
node.js 설치는 구글링을 통해 진행하고 webpack 셋업부터 시작하겠다.
순차적으로 따라하면 되고 내 이해도에 따라서 정리한것이므로 이해가 안되는 부분들이 있을 수 있다.
댓글달아주시면 최대한 해결하도록 찾아보겠습니다.
webpack 으로 작업할 프로젝트 폴더 만들기
npm init -y npm install --save-dev webpack
그럼 아래와 같은 폴더 구조가 된다.
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js하지만 저렇게 폴더와 파일이 자동으로 생성되지는 않더라.
그래서 그냥 위와 같은 구조가 되도록 만들어줬다.
각 파일에 들어갈 코드는 아래를 참조한다.
src/index.js
function component() {
var element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>번들만들기
project
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js폴더구조를 바꿔주고 아래 명령어 실행해서 lodash 설치한다.
npm install --save lodashsrc/index.js
+ import _ from 'lodash';
+
function component() {
var element = document.createElement('div');
- // Lodash, currently included via a script, is required for this line to work
+ // Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());dist/index.html
<html>
<head>
<title>Getting Started</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="bundle.js"></script>
</body>
</html>index.html 에서 lodash, index.js 스크립트 -> bundle.js 라는 하나의 js 파일로 합쳐서 관리할 것이다.
lodash는 index.js 에서 import 시켜서 index.js 에 담겨있으므로 index.js -> bundle.js 로 변신.
아래와 같이 실행하면
./node_modules/.bin/webpack src/index.js dist/bundle.js아래와 같은 결과를 얻는다.
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]src 폴더는 bundle.js 로 묶어주기 전에 널부러져있는 소스들의 폴더이고
dist 폴더는 묶어주고 난 다음의 결과물이 저장되는 폴더이다.
설정 사용하기
project
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};webpack.config.js 를 만들어서 위와같이 적어주자.
./node_modules/.bin/webpack --config webpack.config.js
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]그리고 이렇게 새롭게 설정한 환경으로 웹팩도 돌려보고..
그런데 매번 ./node_module.... 으로 실행하려니 귀찮다.
script를 이용하자.
package.json
{
...
"scripts": {
"build": "webpack"
},
...
}위 파일에 위 코드를 추가.
npm run build로 실행하면
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]와 같은 결과를 얻는다. 좀 더 쉽게 webpack 명령을 실행할 수 있게 되었다.
'개발 > Webpack' 카테고리의 다른 글
| webpack vol.2 - module loader (0) | 2017.09.22 |
|---|---|
| webpack-dev-server 셋팅 (0) | 2017.09.19 |
| package.json - scripts (0) | 2017.09.19 |
| npm intall webpack --save-dev (0) | 2017.09.19 |
