Archives
11-24 23:50
Today
0
Total
287,672
관리 메뉴

FILife

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

카테고리 없음

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

FIL 2018. 2. 21. 16:14
728x90

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는 안쓰기로 했으니 설치하지 않는다.


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


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


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


설치를 했으면 이제 뭐다?


맞다.


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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// 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'
                }),
            },            
        ],
    }
};
cs


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


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


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


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


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


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


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


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


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


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


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


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


다시 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// 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]'
            }
        ],
    }
};
cs


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


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


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


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


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


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


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


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

0 Comments
댓글쓰기 폼