Archives
12-05 11:00
Today
7
Total
287,855
관리 메뉴

FILife

webpack 2부: 기초 config 본문

내가 자꾸 까먹어서 쓰는 개발 이야기/JavaScript

webpack 2부: 기초 config

FIL 2018. 2. 20. 10:43
728x90

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//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
}
cs



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


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
 
module.exports = {
    entry: {
    
    },
    output: {

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

cs


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


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


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


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 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: [
            
        ],
    }
};
 
cs



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


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


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


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 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: [
            
        ],
    }
};
 
cs


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


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


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


왠지 폼도 난다.



다음으로 resolve 이다. 


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


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


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 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: [
            
        ],
    }
};
 
cs


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


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




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


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


1
public$ webpack
cs


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

0 Comments
댓글쓰기 폼