webpack 5부: 마치며..

"마치며.." 라는 말이 한번 써보고 싶었다.

그렇다고 내용이 없다는 건 아님.

2부에서 샘플로 휘갈겨놓은 list.js, view.js를 보면 최상단에서 common.js를 공통적으로 import 하는것을 볼 수 있다.

이 경우에는 문제가 생기는데..

common.js 에서 import 한 모듈들(jquery 라던가, bootstrap 등등)이 제대로 상속이 안되는 문제가 있었고,

import를 산발적으로 각각 하다보니 각각의 파일들이 모두 대용량이었다.

또한 각각의 js들이 번들링 되면서 빌드 된 js 내에서 각각의 인스턴스로 작동하게 되는데,

common 인스턴스가 여러번 생성되는듯 했다.

webpack-commons-chunk-plugin 이라는 물건을 사용할것이다.

의외로 이번엔 설치를 안한다.

내장 된 플러그인을 이용하면 된다.

다음으로 플러그인 배열에 CommonsChunkPlugin을 통해 common.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',
            }),
            new webpack.optimize.CommonsChunkPlugin('common'),        
    ],
    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]'
            }
        ],
    }
};

이렇게 하면 필요한 모듈들을 탑재 한 common.build.js 가 새로 탄생하는데,

list.js 또는 view.js 를 불러오기 전에 <script> 태그를 한줄 추가하여 넣어주면 된다.

서버사이드 언어에서 template을 사용하는 경우 매우 간단할 것이다.

정리하면,

1. common.js 에서 jQuery, bootstrap, jqueryui 등 필요한 모듈들을 import

2. common.js 에서 위에 해당하는 것 중 필요한 css 파일들을 require

3. 1번에서 import 한 애들을 export한다 : export {common, $, vue, ...}; -> export 한 애들은 다른 js들이 import 해서 재사용 할 수 있게 된다.

이렇게 해준 결과, common.js 를 제외한 나머지 .build.js 파일들은 용량이 기적처럼 줄어들었다.

슬슬 쓰기가 귀찮아지기도 하고, 여기까지밖에 안해본 관계로 여기에서 글을 마친다. (갑자기)