HEROPY
Tech
{{ scrollPercentage }}%

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

js webpack

시작하기

빈 프로젝트 디렉토리를 생성한 후 터미널을 이용하여, 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-loadercss-loader를 설치합니다.

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

$ npm i style-loader css-loader -D

그리고 webpack.config.jsmodule을 추가합니다.

// 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)에 대해서 알아볼께요.

공지 이미지
{{ title }}
{{ eventPlace }}
{{ eventDate }}
오늘 하루 그만 보기