webpack 2부: 기초 config

우선, 너무 많으면 좀 정신없으니 list, view 페이지에 쓰일 js 파일이 각각 ./public/js 에 있고, 공통으로 쓰이는 common.js 가 있다고 가정하겠다.

//common.js
 
const common = {
    alertRedirect: function(msg, url) {
        alert(msg);
        top.location.href = url;
    }
 
};
 
export default common;
 
 
 
//list.js
import common from "common.js";
 
function showList(page) {
    //bla bla blah
}
 
 
 
//view.js
import common from "common.js";
 
function viewArticle(id) {
    //blah bla bla
}

webpack은 거의 대부분이 webpack.config.js 파일 설정을 통해 작동하는 거나 마찬가지라 할 수 있겠다.

이 파일은 일단 이렇게 생겼다.

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
 
module.exports = {
    entry: {
    
    },
    output: {

    },    
    resolve: {
        extensions: [],
        modules: []
    },
    plugins: [
        
    ],
    module: {
        loaders: [
            
        ],
    }
};

각 속성에 대한 설명은 이곳에 잘 설명되어 있었다: https://hjlog.me/post/118

공식 문서는 여기에 있다: https://github.com/webpack/docs/wiki/configuration

먼저 entry에 이름에 걸맞게 선수를 입장시키도록 하자.

보시다시피 object 형식으로 되어 있으며, 이것은 이름을 지어줄 수 있다는 얘기이다.

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
 
module.exports = {
    entry: {
        common: "./js/common.js",
        list: "./js/list.js",
        view: "./js/view.js",
    },
    output: {

    },
    resolve: {
        extensions: [],
        modules: []
    },
    plugins: [
        
    ],
    module: {
        loaders: [
            
        ],
    }
};
 

다음은 output에 출력 형식을 설정한다.

어느 경로에 어떤 이름으로 출력할지 정해주는 과정이라고 보면 되겠다.

출력 디렉토리는 ./dist 로 했다. 

npm으로 모듈 설치를 해 보면 많이들 저걸로 쓰길래 그냥 따라했다.

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
 
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: [],
        modules: []
    },
    plugins: [
        
    ],
    module: {
        loaders: [
            
        ],
    }
};
 

위에서 정해준 선수 이름을 output에서 사용한 것을 볼 수 있다.

[name].build.js 이 부분이다.

편집기에서 혼동할 염려가 있어서 파일명과 확장자 사이에 build를 붙여주었다.

왠지 폼도 난다.

다음으로 resolve 이다. 

선수들의 소스에서 import 또는 require 할때 이곳에 설정 된 경로에서 불러다 쓸 수 있다.

npm으로 설치해서 쓰니 node_modules/ 디렉토리를 포함하는건 필수겠고, 혹시 모르니 public/js 경로도 포함시켜보자.

npm에서 검색이 안되는 경우엔 써야할수도 있으니까.

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
 
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: [
        
    ],
    module: {
        loaders: [
            
        ],
    }
};
 

js 파일도 찾지만, json 파일도 찾는다.

node_module의 특정 모듈 디렉토리를 열어보면 package.json이 있는데, 아마도 얘를 읽도록 하는 것 같다.

아마 여기까지만 해도 실행이 될것이다.

터미널에서 public 디렉토리로 가 webpack을 실행 해 본다.

public$ webpack

public/dist 디렉토리에 common.build.js, list.build.js, view.build.js 가 들어 있다면 성공이다.