webpack 4부: 내친김에 css도 좀...

public/node_modules/ 에서 여러가지 js 모듈을 가져다 쓰다보니 불편한 문제가 생겼다.

많은 모듈들이 css와 함께 쓰인다는 점이었다.

각각의 css를 public/css/ 에 복사 해 넣고 쓸수도 있지만, 매번 하기도 불편하고 구조적으로 안좋아보인다.

빌드 된 소스만 배포하고 싶은것도 있었다.

css도 webpack으로 묶어서 번들링 하기로 했다.

또 다른 로더들이 필요하다.

css-loader: css파일들을 찾아 읽어준다.

style-loader: node나 react 환경에서 쓰는 듯 한데, <style> 태그로 만들어 헤더쪽에 자동으로 삽입해 준다고 한다. 내가 원하는건 아니었다.

extract-text-webpack-plugin: 이 쓸데없이 긴 이름... css-loader로 읽은 파일들을 하나의 css로 합쳐준다.

나는 nginx + php-fpm 환경이기에, css 파일을 생성하는 편이 맞다고 판단했다.

역시 시작은 설치부터.. style-loader는 안쓰기로 했으니 설치하지 않는다.

public$ npm i -S css-loader extract-text-webpack-plugin

참고로 loader는 번들링 과정에 개입하여 알맞게 해석된 코드로 변환해주고,

플러그인은 번들링 완료 된 파일에 추가 작업하는 방식으로 개입한다고 한다.

설치를 했으면 이제 뭐다?

맞다.

webpack.config.js

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
module.exports = {
    entry: {
        common: "./js/common.js",
        list: "./js/list.js",
        view: "./js/view.js",
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: "/dist/",
        filename: '[name].build.js'
    },   
    resolve: {
        extensions: ['js', 'json'],        
        modules: [
            'js',
            'node_modules'
        ]    
    },
    plugins: [
            new webpack.ProvidePlugin({            
                Promise: 'es6-promise'
            }),
            new ExtractTextPlugin({
                filename: 'style.build.css',
            }),        
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader?presets[]=env'
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    use: 'css-loader'
                }),
            },            
        ],
    }
};

4번 라인에 전역변수를 할당 한 것을 빼먹어선 안되겠다.

common.js 파일의 상단에, node_modules/ 에서 불러다 사용할 css 파일을 require 해준다.

대표적으로 이런 것 되시겠다.

require("bootstrap/dist/css/bootstrap.css");

상황에 따라 다르겠지만, 이 상태에서 번들링을 했더니 오류가 발생했다.

node_modules/ 의 모듈 디렉토리 안에는 css와 css에 사용되는 이미지, 폰트 파일도 들어있었던 것이다.

심지어는 외부에서 url 호출로 가져다 쓰는 css도 있었다. (구글 CDN의 폰트 등)

얘들을 위해서는 loader가 또 필요하다고 한다.. 

애초에 넣어두면 좋을텐데... 라는 생각이 들었다.

필요한건 바이너리 파일을 읽어줄 file-loader와 원격 파일을 읽어줄 url-loader 이다.

슬슬 빡치지만 거의 다 온것같으니 힘을 내어 설치 해 본다.

public$ npm i -S file-loader url-loader

다시 webpack.config.js 를 연다.

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
module.exports = {
    entry: {
        common: "./js/common.js",
        list: "./js/list.js",
        view: "./js/view.js",
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: "/dist/",
        filename: '[name].build.js'
    },   
    resolve: {
        extensions: ['js', 'json'],        
        modules: [
            'js',
            'node_modules'
        ]    
    },
    plugins: [
            new webpack.ProvidePlugin({            
                Promise: 'es6-promise'
            }),
            new ExtractTextPlugin({
                filename: 'style.build.css',
            }),        
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader?presets[]=env'
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    use: 'css-loader'
                }),
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]'
            }, {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader?name=fonts/[name].[ext]'
            }, {
                test: /\.(jp(e)g|gif|png)?$/,
                loader: 'file-loader?name=img/[name].[ext]'
            }
        ],
    }
};

loader 부분에 여러가지를 추가 해 주었다.

사실 그냥 해보다가 되는걸로 복사해서 붙여넣은거라 뭐가 뭔지 잘 모르겠다.

천천히 분석해 볼 생각이다.

이제 webpack 명령어를 실행 해 보면 dist 폴더에는 아까보다 많은 파일이 생성된다.

각 .build.js 파일과, style.build.css 파일이 생겨났고,

fonts 디렉토리와 img 디렉토리가 생겨났다.

기존에 정신없이 나열되어 있던 <link> 태그들을 삭제하고, style.build.css 만 불러오도록 했다.

깨지는 곳 없이 스타일이 잘 적용되어 표시된다. 개이득.