[webpack] Module Bundling

https://webpack.js.org/

webpack은 자바스크립트 모듈을 하나의 파일로 묶어주는 모듈 번들러이다.

 

JavaScript 모듈 번들링

webpack을 사용하기 위해서 webpack 모듈을 설치한다.

npm install webpack webpack-cli --save-dev

webpack 설정파일인 webpack.config.js을 작성한다.

https://webpack.js.org/concepts/

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // 모듈간 의존성 분석을 위한 진입점
  output: {
    path: path.resolve(__dirname, "dist"), // 번들링 출력파일 경로
    filename: 'main.js' // 번들링 출력파일명
  },
  target: 'node', // 실행환경, default는 'web'
  mode: 'none' // production(default) | development | none 
}

아래와 같이 진입점이 되는 index.js 파일과 모듈파일을 작성한다.

// index.js
import myModule from './myModule';
console.log(myModule);

// myModule.js
export default { data1: 1, data2: 2 }

번들링 실행을 위해서 package.json에서 scripts를 등록한다.

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

또는 shell에서 cli 명령으로 실행이 가능하다.

npx webpack

모듈들이 번들링된 최종 결과파일(main.js)를 실행하면 원하는 결과가 출력된다.

 

JSX를 JavaScript로 변환해주는 Babel 설정

https://babeljs.io/docs/en/babel-preset-react

 

Babel 모듈 및 로더를 설치한다.

npm i -D @babel/core @babel/preset-react babel-loader

Babel 설정을 위해서 .babelrc 파일을 작성한다.

// .babelrc
{
    "presets": [ "@babel/preset-react" ]
}

Webpack 설정파일에 Babel을 추가한다.

// webpack.config.js
module: {
    rules: [
        { test: /\.js$/, use: { loader: "babel-loader" }}
    ]
}

Webpack을 수행하면 js파일의 JSX문법이 모두 JavaScript로 변환된다.

 

css 파일을 읽어들이는 로더

css 파일을 js에서 import 문으로 읽어들일 수 있다. 그러면 html 파일에 css 파일을 직접 연결하지 않아도 Webpack의 출력파일에 모두 포함되어 있어서 해당 스타일이 적용된다. 아래와 같이 관련 로더를 설치한다.

npm i -D css-loader style-loader

Webapck 설정을 수정한다.

// webpack.config.js
module: {
    rules: [ ...
        {
            test: /\.css$/i,
            use: [{
                loader: 'style-loader' // css를 <style> 태그로 출력
            }, {
                loader: 'css-loader' // css 파일을 js에서 import 가능
            }]
        }
    ]
}

아래와 같이 js에서 import 문으로 읽어들일 수 있다.

import './styles.css';

css-loader 설정을 아래와 같이 수정하면 css의 클래스명을 css 모듈의 속성명으로 사용가능하며, 속성값은 고유값으로 자동으로 설정된다.

// webpack.config.js
  ...
{
    loader: 'css-loader',
    options: { modules: true }
}

/* style.css */
.blue { color: blue; }

import styles from './styles.css';

function component() {
    const element = document.createElement('div');
    element.innerHTML = 'Hello webpack';
    element.classList = styles.blue;
    return element;
}

document.body.appendChild(component());

 

scss 파일을 읽어들이는 로더

css의 전처리기(Preprocessor) 언어인 scss 파일도 js에서 import 문으로 읽어들일 수 있다. 앞의 css 파일을 읽어들이기 위해 설치한 모듈에 추가적으로 아래와 같은 모듈을 더 설치한다.

npm i -D node-sass sass-loader

Webapck 설정을 추가한다. scss은 css로 컴파일되므로, css에서 설정했던 로더들을 동일하게 설정하고 sass-loader도 추가한다.

// webpack.config.js
module: {
    rules: [ ...
        {
            test: /\.scss$/i,
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader',
                options: { modules: true }
            },{
                loader: 'sass-loader'
            }]
        }
    ]
}

아래와 같이 js에서 import 문으로 읽어들일 수 있다.

/* style.scss */
$color1: green;
$color2: black;
p { color: $color1; }
.grey { color: rgba($color2, 0.5); }

import styles from './styles.scss';

class MyComponent extends React.Component {
    render() {
        return (
            <React.Fragment>
                <h1 className={styles.black}>Hello</h1>
                <p>This is green.</p>
            </React.Fragment>
        );
    }
}
ReactDOM.render(<MyComponent />, document.getElementById('root'));