Jello's development blog

Jello's development blog

Webpack에서 index.html 생성하기

React를 사용하여 SPA를 개발하려면 Redux를 사용하여 데이터를 관리하고, Webpack을 사용하여 JSX 문법을 컴파일(Babel)하거나 웹 소스, 리소스들을 압축하는 것이 권장된다. React+Redux+Webpack은 웹 개발에서 널리 사용되는 조합 중의 하나이다.

JSX 문법을 사용하는 React에서는 웹 페이지의 구조가 html파일 안이 아니라, js에 코드로 녹아들어있다. 따라서 React 프로젝트의 index.html파일은 대부분 복잡하지 않고 간단하다. 이 index.html을 좀 더 쉽게 배포용 디렉토리로 옮길 수는 없을까? html-webpack-plugin를 사용하면 간단하게 해결된다.

html-webpack-plugin으로 index.html 생성하기

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, '../app/src/app.js'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, '../app/dist')
    },
    module: {
        rules: [
            ...
        ]
    },
    ////////////////////////////////
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, '../app/src/index.html'),
            inject: false,
            filename: path.join(__dirname, '../app/dist/index.html')
        })
    ],
    ////////////////////////////////
    devtool: "source-map"
};

사용법은 간단하다. webpack.config.js파일의 설정에서 plugins에 위와 같이 추가해주면 된다. 자신의 프로젝트에 맞게 옵션을 설정할 수 있다. 위의 코드는 ../app/src/index.html을 그대로 ../app/dist/index.html에 복사하는 기능을 하는 경우이다.

injecttrue'body'로 해놓으면 body태그의 맨 마지막에 bundle.js를 import해주는 태그를 추가해준다. minify 옵션으로 min 파일을 만들 수 있고, ejs템플릿을 사용할 수도 있다. 그 외에도 많은 옵션들을 사용하여 커스터마이징이 가능하니 file-loader나 html-loader를 사용하는 방법보다는 html-webpack-plugin를 사용해보자.