2017-09-10 게시 됨2023-01-14 업데이트 됨Programming / Nodejs12분안에 읽기 (약 1740 단어)

npm과 webpack 기반 빌드

Build tools for Frontend: webpack, gulp 설치

webpack, gulp 설치

typescript, gulp는 global 로 설치하자, 자주 쓰일 수 있다. gulp-cli, 를 글로벌로 설치하고 프로젝트에서 webpack 등 모듈을 설치한다.

1	npm i -g -D gulp-cli typescript

gulp-typescript 를 설치하고 dev 의존성으로 저장한다.

1	npm i -D gulp-typescript

개발용 Http server를 설치한다. 많이 사용되는 서버로 http-server, lite-server가 있다.

npm 으로 HTTP 서버를 띄워서 작업을 쉽게 할 수 있도록 http-server을 글로벌로 설치한다.

1	npm i -g -D http-server

lite-server를 사용해도 되는데, 서버 개발시 실시간 리로딩과 browser-sync (lite-server의 하부 모델)를 이용해 HTML, CSS, JS 를 테스트한다.

1	$ npm i -g -D lite-server

결과를 브라우저에서 확인해 보자.

1	http-server -p 3000 -c-1 ./src"

1 2	$ git add package.json $ git commit -m 'add http-server'

webpack

1 2	npm i -D webpack npm i -D webpack@<version>

로컬 설치시 node_modules/.bin/webpack 으로 실행할 수 있다.

package.json 에 webpack을 시작 명령으로 해준다.

1
2
3

"scripts": {
    "start": "webpack --config webpack.config.js"
}

소스 디렉토리

src 폴더를 html, js 소스를 모두 포함하게 구성하자.

$ cd src
$ mkdir js
$ mv index.js js
$ mv ../index.html .

프로젝트 폴더는 아래 같이 구성된다.

webpack-demo
  |- package.json
  |- /src
     |- /js
        |- index.js
     |- index.html

1 2	$ git add index.html src/ $ git commit -m 'all source at src'

외부 라이브러리

lodash 를 예로 들어 보자, lodash를 설치한다.

1	npm i lodash

ES2015의 import 구문을 이용해 외부 라이브러리를 들여온 후 webpack으로 빌드하면 하나의 최적화된 자바스크립 소스에 내장할 수 있다.

예를 들어 src/js/index.js 에 lodash 를 들여온다.

import _ from "lodash";

function component() {
  var element = document.createElement("div");

  // Lodash, now imported by this script
  element.innerHTML = _.join(["Hello", "webpack"], " ");

  return element;
}

document.body.appendChild(component());

역시 src/index.html 도 <script>로 들여온 lodash를 빌드 결과물 bundle.js 로 스크립트를 변경한다.

1
2
3

<body>
  <script src="js/bundle.js"></script>
</body>

커밋한다.

1 2	$ git add package.json package-lock.json src/ git commit -m 'add lodash and commit to source'

bundle.js

node_modules/.bin/webpack 로 실행할 수 있으므로 src/js/index.js 를 진입점으로 해서 결과를 src/js/bundle.js 로 저장할 수 있다.

$ ./node_modules/.bin/webpack src/js/index.js src/js/bundle.js
Hash: ee3bf1d517f9a2f682ce
Version: webpack 3.8.1
Time: 2511ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./src/js/index.js 255 bytes {0} [built]
   [2] (webpack)/buildin/global.js 488 bytes {0} [built]
   [3] (webpack)/buildin/module.js 495 bytes {0} [built]
    + 1 hidden module

Webpack configuration

ES2015 표준의 import, export 구문은 기존 브라우저들이 지원되지 않는 경우가 많다. 그래서 ECMA6 를 ECMA5 로 전환 컴파일 하려면 Babel 같은 패키지를 사용한다.

이들 패키지지는 webpack 적재시스템을 통해 사용한다. 또 복잡한 프로젝트 요구를 위해서 설정 파일을 이용해 구성 가능하다. 이런 시나리오를 고려해 보자

webpack.config.js 에 소스 및 빌드 디렉토리가 명시되고
src/js/index.js 를 dist/assets/js/app.min.js 로 복사된다.
src/[html,js,css] 를 build/[html,assets/[js,css,images,ext]] 로 복사한다.

webpack configuration 파일은 webpack.config.js에 설정을 구성한다. 설정 구성 내용은 아래 같다.

const path = require("path");

module.exports = {
  entry: "./src/*",
  output: { filename: "", path: path.resolve(__dirname, "") },
  plugins: [],
};

소스와 라이브러리 빌드 구성하기,

CopyWebpack plugin 은 파일 혹은 디렉토리를 빌드 디렉토리로 복사해 준다.

1	npm i -D copy-webpack-plugin

CopyWebpackPlugin은 객체를 생성해 사용한다.

new CopyWebpackPlugin([patterns], options)

pattern: { from: ‘source’, to: ‘dest’ }

webpack.config.js 을 프로젝트 루트에 저장하고 아래 같은 내용을 갖는다. webpack.config.js 파일에 플러그인을 구성한다.

const path = require("path");
var CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "js/bundle.js",
    path: path.resolve(__dirname, "build/"),
  },
  plugins: [new CopyWebpackPlugin([{ from: "src/index.html" }])],
};

webpack 으로 빌드가 이루어지고 복사가 되는지 확인해 보자. webpack 을 시작하고 build 디렉토리를 확인해 보자.

1	$ ./node_modules/.bin/webpack --config webpack.config.js

웹 서버로 build 디렉토리를 시작해서 브라우저에서 확인해 보자.

npm 스크립트

npm으로 빌드와 테스트 서버 시작을 할 수 있도록 다음 같이 수정한다.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "http-server -p 3000 -c-1 ./build",
  "build": "NODE_ENV=developement node node_modules/.bin/webpack --config webpack.config.js"
},

이제 npm으로 build 스크립을 지시할 수 있다.
command and your parameters, e.g. npm run build – –colors.

1	npm run build

그리고 서버를 시작해 브라우저로 결과를 확인해 보자.

커밋한다.

1	$ git add package* webpack.config.js

"start": "node node_modules/.bin/webpack-dev-server --content-base app",
"test": "NODE_ENV=test karma start",

"build": "NODE_ENV=production node node_modules/.bin/webpack --config webpack.config.js && cp src/index.html dist/index.html",

file-loader plugin

file-loader 는

npm i -D webpack-stream

Babel

1 2	npm i -D babel-core babel-loader babel-preset-latest npm install babel-core babel-loader babel-preset-es2015

루트에 .babelrc 파일을 만들고

1	{ "presets": [ "es2015" ] }

### 프로젝트 태스크 관련

1	npm i -D bower-main gulp-load-plugins gulp-rename gulp-uglify gulp-autoprefixer gulp-uglifycss gulp-watch del

gulp-clean-dest

설치한 후 package.json 에 다음 같이 추가된다.

"devDependencies": {
  "bower": "^1.7.9",
  "bower-main": "^0.2.14",
  "gulp": "^3.9.1",
}

devDependencies {
  "gulp-autoprefixer": "^3.1.0",
  "gulp-load-plugins": "^1.2.4",
  "gulp-rename": "^1.2.2",
  "gulp-uglify": "^1.5.4",
  "gulp-uglifycss": "^1.0.6",
  "gulp-watch": "^4.3.8"
}

gulfile.js 관련

앞서 설치한 태스크를 사용한 프로젝트 태스크를 gulpfile.js 에 선언한다. gulp 모듈을 들여오고, 작업을 진행할 source 디렉터리와 결과물을 보관할 build 디렉터리를 지정한다.

var gulp = require("gulp");
const webpack = require("webpack");
const webpackStream = require("webpack-stream");
const webpackConfig = require("./webpack.config.js");

var src = "./src/";
var dest = "./build/";

gulp.task("js", () => {
  gulp
    .src(src + "/js/index.js")
    .pipe(webpackStream(webpackConfig), webpack)
    .pipe(gulp.dest("./dist/js"));
});

run

그리고 package.json의 scripts 부분에 아래와 같은 내용을 추가하고, npm install 명령을 이용해서 최초 구성을 할 때 bower install 명령이 함께 실행되도록 한다.

위 두 가지 내용을 scripts 의 postinstall 과 start 속성으로 추가합니다.

...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "bower install",
    "start": "http-server -a localhost -p 8000 -c-1 ./build"
  },
...

최종적으로,

필요 패키지가 설치됐는지 확인하고,

1	npm install

이제 gulp 빌드를 시작하면 src 디렉터리를 만들고, sample 디렉토리에 디렉토리 js, css, html 를 src 디렉터리에 복사한다.

gulp

gulp로 빌드 태스크를 시작하고 Ctrl+C로 종료한다.

그리고 build 밑에 소스가 생성되었는지 확인다.

$ ll build/
assets/
index.html
view/

http-server를 실행한다.

npm start

angular-seed

angularjs 기본 프로젝트 구성을 가진 저장소로 bower, gulp 기반으로 제공된다.

1	git clone https://github.com/angular/angular-seed.git

참조

https://pawelgrzybek.com/using-webpack-with-gulpjs/
http://webpack.github.io/docs/motivation.html

https://andy-carter.com/blog/a-beginners-guide-to-package-manager-bower-and-using-gulp-to-manage-components

npm과 webpack 기반 빌드

https://blog.thinkbee.kr/build-webpack-gulp-49ad6c6a10b3/

Author

Gangtai Goh

Posted on

2017-09-10

Updated on

2023-01-14

Licensed under

npm과 webpack 기반 빌드

Build tools for Frontend: webpack, gulp 설치

webpack, gulp 설치

webpack

소스 디렉토리

외부 라이브러리

bundle.js

Webpack configuration

소스와 라이브러리 빌드 구성하기,

npm 스크립트

file-loader plugin

Babel

gulfile.js 관련

run

angular-seed

참조

Author

Posted on

Updated on

Licensed under

이 글이 마음에 드시나요? 다음을 통해 후원하실 수 있습니다:

댓글

카탈로그

최근 글

광고