티스토리 뷰

ETC...

[webpack] webpack 4 사용하기

버미노트 2018. 9. 6. 11:22

webpack

webpack v4와 ES6 이상의 자바스크립트를 사용하기 위한 babel loader, css를 모듈화 하기 위한 css loader와 style loader를 사용하는 방법을 이야기 하려고 합니다. (webpack의 기본 개념을 이해하면 이번 포스트를 이해하는데 도움이 될 것 같습니다. 이곳에서 webpack의 기본 개념을 읽어주세요.)

1. Package 설치하기

webpack + babel + css 를 사용하기 위해서, webpack과 loader 등의 package들을 설치해야 합니다.

npm init -y

package.json의 뼈대를 생성합니다.

npm init -y로 package.json을 생성합니다.

1) webpack 설치하기

webpack을 설치합니다.

npm install webpack webpack-cli --save-dev

webpack을 설치합니다.

npm install webpack webpack-cli --save-dev로 webpack과 webpack-cli를 로컬로 설치합니다. webpack 4는 webpack-cli를 함께 설치해 주어야 합니다.

2) babel-loader 설치하기

ES6 이상의 자바스크립트를 ES5 버전의 자바스크립트로 변환해 주는 트랜스파일러인 babel을 설치합니다.

# webpack 4.x | babel-loader 8.x | babel 7.x
npm install babel-loader @babel/core @babel/preset-env --save-dev
# webpack 4.x | babel-loader 7.x | babel 6.x
npm install babel-loader@7 babel-core babel-preset-env --save-dev

webpack에서 babel을 사용하기 위해서는 babel loader와 babel core, babel preset env 3개의 package를 설치해야 합니다. 버전 별로 설치해야 하는 package가 다릅니다.

npm install babel-loader @babel/core @babel/preset-env --save-dev로 최신 버전(babel-lader 8, babel 7)으로 설치를 하도록 하겠습니다.

3) css-loader, style-loader 설치하기

css-loader와 style-loader를 설치합니다.

npm install css-loader style-loader --save-dev

css-loader와 style-loader를 설치합니다.

css-loader는 스타일시트를 webpack이 읽어들일 수 있는 자바스크립트 파일로 변환시켜 주는 loader입니다.

#result {
    background-color: green;
}

webpack이 번들 할 CSS 코드입니다.

위의 CSS 코드가 번들 된 파일을 열어보면,

exports.push([module.i, \"#result {\\r\\n    background-color: green;\\r\\n}\", \"\"]);

css-loader는 css를 자바스크립트로 변경하여 줍니다.

위의 코드와 같이 CSS가 자바스크립트로 변경된 것을 확인 할 수 있습니다. style-loader는 자바스크립트로 변경된 css를 DOM에 추가해주는 loader입니다. 보통 css-loader와 style-loader 함께 사용됩니다.

4) html-webpack-plugin 설치하기

html-webpack-plugin을 설치합니다.

npm install html-webpack-plugin --save-dev

html-webpack-plugin을 설치합니다.

html-webpack-plugin은 번들 된 파일을 <script />로 로드한 html 파일을 자동으로 생성해 주는 plugin입니다. 설정의 따라 새로운 html 파일을 생성할 수도, 기존의 html에 번들 된 파일을 <script />로 로드한 html 파일을 생성 할 수도 있습니다. 해시 된 파일 이름을 사용하는 webpack 번들을 로드하는데 유용하게 사용됩니다.

2. src 작성하기

예제 코드는 모두 src 디렉토리를 생성하여 그 밑에 추가하도록 하겠습니다.

src/
index.html
index.js
module.js
style.css

위와 같이 src 디렉토리 밑에 index.html, index.js, module.js, style.css 파일을 생성해 보도록 하겠습니다.

1) index.html

html 파일을 아주 간단하게 작성해 보겠습니다.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div>Index.html</div>
        <div id="result"></div>
    </body>
</html>

어떠한 자바스크립트 파일을 로드하지 않았습니다.

위의 코드에서 주목할 점은 <script />로 어떠한 자바스크립트 파일을 로드하지 않았다는 점입니다. 이후의 webpack으로 빌드되어 생성된 index.html에서는 <script />로 번들 된 파일이 로드 된 것을 확인 할 수 있습니다. 또한 스타일시트 역시 <link />로 로드 되어 있지 않습니다.

2) style.css

CSS도 아주 아주 간단하게 작성해 보겠습니다.

#result {
    background-color: green;
}

index.js에 import 되는 CSS입니다.

<div id="result" />의 배경색을 바꾸는 간단한 CSS 입니다. index.js에 import 되어 사용될 CSS 파일입니다.

3) module.js

이번에도 아주 아주 아주 간단한 모듈 하나를 작성해 보겠습니다.

const numbers = [1, 2, 3];
export default numbers;

index.js에 import 되는 모듈입니다.

단순 리스트를 export 하는 모듈입니다. index.js에 import 되어 사용될 것입니다.

4) index.js

지금까지 만든 style.css와 module.js를 import하여 사용할 자바스크립트 파일을 만들어 보겠습니다.

import './style.css';
import numbers from './module';

class Square {
    constructor(numbers) {
        this.numbers = numbers;
    }

    get() {
        document.querySelector('#result').innerText = this.numbers.map(x => x * x);
    }
}
const test = new Square(numbers);
test.get();

webpack과 loader들이 정상 동작하는지 확인하기 위해 class, import를 사용했습니다.

  • style.css와 module.js를 import 합니다.
  • Square 인스턴스를 만들 때, numbers를 인자로 받습니다.
  • Squrare 클래스의 get 매소드는 this.numbers의 제곱 값을 <div id="result" />에 그려줍니다.

index.js는 babel을 사용하여 ES6 버전의 자바스크립트가 ES5 버전으로 변환되는지 확인하기 위해 class 메소드를 사용하여 구현하였습니다.

3. webpack.config.js 작성하기

마지막으로 이제까지 작성한 코드를 webpack으로 묶어주기 위한 설정 파일을 작성하도록 하겠습니다. webpack.config.js라는 파일을 생성하여 설정을 작성하고, npm script를 작성할 것입니다.

1) webpack.config.js

webpack은 npm script로 config 파일의 위치를 설정하지 않으면, 기본 값으로 루트 디렉토리의 webpack.config.js 파일을 읽어오게 됩니다. webpack 4는 config 파일이 꼭 필요하지 않습니다. 하지만 loader나 plugins를 사용하는 등의 상세한 설정을 해야 할 때 config 파일을 작성하는 것이 좋습니다.

src/
index.html
index.js
module.js
style.css
package.json
webpack.config.js

예제 프로젝트의 루트에 webpack.config.js 파일을 생성합니다. 정리하면 현재는 위와 같은 디렉토리 구조를 가지게 됩니다.

// const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    /* 이 부분은 entry와 output의 기본값으로 생략 가능합니다.
    entry: './src/index.js',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist')
    }, */
    module: {
        rules: [
            {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        })
    ]
};

entry와 output은 기본값을 사용했습니다.

  • mode : webpack 생성 할 번들 모드를 설정하는 부분입니다. development로 설정하였습니다.
  • module.rules : loader를 정의하는 부분입니다. babel-loader와 style-loader, css-loader을 사용하여 설정하였습니다.
  • babel-loader의 options : presets로 @babel/preset-env를 설정하여, babel에서 미리 정의해둔 환경으로 ES6에서 ES5로 변환합니다. 이 부분이 정의되어 있지 않다면 ES6에서 ES5로 정상적으로 변환되지 않습니다.
  • plugins : plugin들을 설정하는 부분입니다. HtmlWebPackPlugin을 사용하였습니다.
  • HtmlWebPackPlugin의 template : 복사하는 파일의 경로를 나타냅니다.
  • HtmlWebPackPlugin의 filename : template의 파일을 붙여넣을 파일의 경로를 나타냅니다. 즉 template에서 filename으로 번들 된 파일이 <script />로 추된 html 파일이 복사됩니다. ./src/index.html 파일이 ./dist/index.html로 복사됩니다,

위의 코드에는 entry와 output이 정의하지 않았습니다. entry의 기본값인 ./src/index.js가 entry가 되고, output의 기본값인 ./dist/main.js로 번들 된 파일이 생성됩니다.

2) npm script

package.json파일에 script를 추가합니다.

"scripts": {
  "build": "webpack"
},

package.json에 scripts에 "build": "webpack"을 추가합니다.

* 참고 - webpack npm script 플래그

  • --config : webpack의 config 파일 경로를 지정해 줍니다. webpack --config webpack.prod.js 일 때, webpack.prod.js를 읽어 옵니다.

  • --mode : webpack이 생성 할 번들의 모드를 설정해 줍니다. webpack --mode production은

      module.exports = {
      mode: 'production'

    와 동일합니다.

  • --output : entry와 output을 설정해 줍니다. webpack ./src/index.js --output ./dist/main.js은

      module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
      }
  }

    와 동일합니다.

4. 결과

npm run build로 webpack을 실행합니다.

dist/
index.html
main.js

명령어 실행이 종료되면, 위와 같이 dist 디렉토리가 생성되고, 그 밑으로 index.html과 main.js가 생성되는 것을 확인 할 수 있습니다.

webpack 결과
index.html을 실행한 결과입니다.

index.html을 실행한 결과는 위의 그림과 같습니다. webpack이 실행되어 생성된 main.js와 index.html 파일을 간단히 살펴보면,

1) main.js

webpack으로 번들 된 자바스크립트 파일입니다. class는 ES6에서 추가된 문법입니다. main.js 파일에는 class가 사용되지 않는 것을 확인 할 수 있습니다.

2) index.html

HtmlWebPackPlugin으로 생성된 html 파일입니다.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div>Index.html</div>
        <div id="result"></div>
    <script type="text/javascript" src="main.js"></script></body>
</html>

번들 된 자바스크립트 파일을 로드하고 있습니다.

main.js는 webpack으로 번들 된 자바스크립트 파일로, HtmlWebPackPlugin으로 생성된 index.html 파일은 자동으로 main.js를 로드하게 됩니다. 즉 HtmlWebPackagePlugin을 사용하면 자동으로 <script type="text/javascript" src="main.js"></script>이 추가되어 html 파일이 생성됩니다.

지금까지의 코드는 https://github.com/beomy/webpack4-example에서 확인 할 수 있습니다.

참고

저작자표시

'ETC...' 카테고리의 다른 글

[Svelte] 스벨트 입문 A부터 Z까지  (1) 2020.08.07
[Browser] 렌더링 최적화  (0) 2019.12.09
[디자인패턴] Flux, MVC 비교  (11) 2018.09.22
[디자인패턴] MVC, MVP, MVVM 비교  (57) 2018.09.15
[webpack] webpack 개념  (0) 2018.09.03
댓글
공지사항
최근에 올라온 글