Webpack - 1 - 시작하기 / EJS / SASS(SCSS)

October / 2017

jswebpack

시작하기

빈 프로젝트 디렉토리를 생성한 후 터미널을 이용하여, package.json을 생성하세요.

$ npm init -y

그리고 webpack을 설치하세요.

$ npm i -D webpack

webpack.config.js 파일을 생성한 후 아래와 같이 작성합니다.

// webpack.config.js
module.exports = {
  entry: './src/app.js',
  output: {
    filename: './dist/app.bundle.js'
  }
};

src 디렉토리를 만들어 app.js 파일을 추가하고,

// app.js
console.log('Hello Webpack!');

dist 디렉토리를 만들어 index.html 파일을 추가하세요.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack Test</title>
</head>
<body>
  <script src="app.bundle.js"></script>
</body>
</html>

아래와 같은 디렉토리 구조를 만드세요.

webpack-test
  ├─dist
  │  └─index.html
  ├─src
  │  └─app.js
  ├─package.json
  └─webpack.config.js

webpack으로 동작시키기 위해 package.json 파일의 "scripts" 내용을 아래와 같이 수정하세요.

// package.json
"scripts": {
  "dev": "webpack -d --watch",  // 개발용 (development)
  "prod": "webpack -p"  // 제품용 (production)
}

실행

# 개발용
$ npm run dev

# 제품용
$ npm run prod

dist 디렉토리에 app.bundle.js 파일이 생성되면,
index.html파일을 웹브라우저로 열어 개발자 도구로 콘솔 창을 확인하세요.

'Hello Webpack!'

EJS 템플릿 사용하기

EJS 템플릿(template)을 사용해 보겠습니다.

이제 테스트는 끝났으니 dist 디렉토리를 삭제하고,
src 디렉토리에 index.ejs 파일을 생성하고 아래와 같이 작성합니다.

<!-- index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

</body>
</html>

디텍토리 구조을 아래와 같이 만드시면 됩니다.

webpack-test
  ├─src
  │  ├─app.js
  │  └─index.ejs
  ├─package.json
  └─webpack.config.js

그리고 EJS 템플릿을 사용하기 위한 아래의 플러그인을 설치합니다.

HTML Webpack Plugin

$ npm i html-webpack-plugin -D

webpack.config.js 파일의 내용을 아래와 같이 변경합니다.

// webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hello Webpack Project!',
      template: './src/index.ejs'
    })
  ]
};

실행하고 확인해 보세요.

$ npm run dev

디텍토리의 구조가 아래 처럼 변경됩니다.

webpack-test
  ├─dist
  │  ├─app.bundle.js
  │  └─index.html
  ├─src
  │  ├─app.js
  │  └─index.ejs
  ├─package.json
  └─webpack.config.js

마지막으로 플러그인의 몇가지 옵션을 적용해 봅시다.

// webpack.config.js
new HtmlWebpackPlugin({
  title: 'Hello Webpack Project!',
  minify: {
    collapseWhitespace: true
  },
  hash: true,
  template: './src/index.ejs'
})

collapseWhitespace: 문서의 텍스트 노드에서 공백을 제거합니다.
hash: 모든 CSS 혹은 JS 파일에 고유한 웹팩 컴파일 해시를 추가합니다. 캐시 무효화에 유용하다고 하네요.

Style, CSS 그리고 Sass Loaders 사용하기

Loaders 란?

파일을 가져 오거나 ‘Load’할 때 파일을 사전 처리 할 수 있습니다. ‘Gulp’나 ‘Grunt’ 같은 다른 빌드 도구에서의 “Task”과 유사하며 프론트엔드 빌드 단계를 처리하는 강력한 방법을 제공합니다. 파일을 ‘TypeScript’ 같은 다른 언어에서 ‘JavaScript’로 변환하거나 인라인 이미지를 데이터 URL로 변형할 수 있습니다. 자바스크립트 모듈에서 직접 CSS 파일을 가져 오는 것과 같은 일을 할 수도 있습니다.

style-loader 와 css-loader 사용

CSS를 처리하기 위해 먼저 style-loader와 css-loader를 설치합니다.

style-loader: CSS를 <style> 태그로 출력합니다.
css-loader: 자바스크립트 안에 CSS를 해석하고, 모든 의존성을 해결 합니다.

$ npm i style-loader css-loader -D

그리고 webpack.config.js에 module을 추가합니다.

// webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hello Webpack Project!',
      template: './src/index.ejs'
    })
  ]
};

app.css 파일을 생성하고 간단한 css 코드를 추가합니다.

/* app.css */
body {
  background: tomato;
}

app.js 파일로 가져옵니다.

// app.js
var css = require('./app.css');

실행하여 dist/index.html 파일을 실행하면 배경 색상이 변경된 것을 볼 수 있습니다.

$ npm dev run

sass-loader 사용

sass-loader를 설치합니다.

$ npm i sass-loader node-sass -D

설치가 끝나면 css로 작성된 부분들을 scss로 수정합니다.

// webpack.config.js
test: /\.scss$/,
use: [
  'style-loader',
  'css-loader',
  'sass-loader'
]

// app.js
var css = require('./app.scss');

CSS 파일도 확장자를 수정하고, 내용을 Sass(Scss) 문법으로 바꿔보죠.

/* app.sass */
body {
  background: tomato;

  p {
    color: white;
  }
}

그에 맞게 index.ejs 파일도 수정합니다.

<!-- index.ejs -->
<body>
  <p>Hello Sass!</p>
</body>

실행합니다.

$ npm run dev

단일 파일로 추출하기

우리는 app.js파일에 require('./app.css')코드를 사용하여 app.bundle.js파일로 모두 병합했습니다.
그러나 css 파일의 규모가 커지면 번들 파일 내에서 인라인으로 많은 양의 코드가 읽히기 때문에, 구분하여 호출하는 것이 병렬 방식으로 로딩할 수 있어 더 빠르게 동작할 것입니다.

extract text plugin for webpack을 설치합니다.

$ npm i extract-text-webpack-plugin -D

webpac.config.js파일의 내용을 아래와 같이 수정하세요.

// webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// ...
{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      'css-loader',
      'sass-loader'
    ],
    publicPath: '/dist/'  // '../images/'
  })
}
// ...

fallback: CSS가 추출되지 않을 때 사용될 로더
use: CSS 내보내기 모듈로 변환하는데 사용할 로더
publicPath: 경로 재설정

// webpack.config.js
// ...
{
  plugins: [
    new HtmlWebpackPlugin({
      // ...
    }),
    new ExtractTextPlugin('app.css')
  ]
}
// ...

다음으로 로컬에서 사용할 개발용 서버 구성(webpack-dev-server)에 대해서 알아볼께요.

Snowpack, 더 빠른 웹 개발을 위한 새로운 방식의 프론트엔드 빌드 도구

Snowpack은 번들러가 아닙니다! 더 빠른 웹 개발을 위한 최신의 프론트엔드 빌드 도구로, JavaScript의 ESM(ES Modules)을 활용해 기존의 Webpack, Rollup 그리고 Parcel 같은 무겁고 복잡한 번들러의 번들 소요 시간을 절약할 수 있습니다.

PixiJS와 Depth map으로 3D 이미지 만들기

PixiJS는 WebGL을 사용하는 고속 HTML5 2D 렌더링 라이브러리입니다. Canvas Fallback을 지원합니다. PixiJS와 Depth map을 사용해 이미지에 생명력을 불어 넣을 수 있습니다.

Postman에서 API 테스트 자동화

Postman에서 API 요청과 응답에 대한 테스트를 자동화할 수 있습니다.Reqres.in에서 제공하는 로그인 API를 사용합니다.RequestCollection참고 자료(References)RequestPostman에 로그인하고 새로운 Request 탭을 엽 ...

Jest와 Vue Test Utils(VTU)로 Vue 컴포넌트 단위(Unit) 테스트

Vue Test Utils(VTU)는 Vue.js 환경에서 단위 테스트를 하기 위한 공식(Official) 라이브러리입니다. Jest는 페이스북에서 만든 테스트 프레임워크로 Vue Test Utils에서 권장하는 테스트 러너입니다. 두 가지 오픈 소스를 이용해 Vue 애플리케이션의 테스트를 진행합니다.

← 다음 글

Webpack - 2 - Dev Server / Babel

이번에는 Webpack Dev Server에 대해서 알아보고,ES6 이상의 문법을 사용하기 위해 Babel을 구성하겠습니다.프로젝트 구성하기$ npm init -y 아래와 같이 디렉토리를 구성하고 파일을 생성하세요.webpack-test ├─src │ ...

MarkDown 사용법 총정리

마크다운(MarkDown)에 대해서 알고 계신가요?파일 확장자가 .md로 된 파일을 보셨나요?웹 개발을 하면서 아마 README.md라는 이름의 파일을 한 번은 보셨을텐데, 이 파일이 마크다운 문법으로 작성된 파일 입니다.사용법이 매우 쉽고, 빠르게 문서를 정리 ...

이 내용을 72시간 동안 안 보고 싶어요!?