webpack 정리

Vue를 하며 웹팩 설정을 간단하게 정리해 놓는다.

웹팩은 모듈 번들러로서 서로 의존성이 있는 것들끼리 하나로 묶어주는 역할을 한다. 따라서 여러개의 파일을 브라우저에서 로딩하지 않아도 된다.

번들링을 시작할 지점(entry), 번들된 결과물을 놓을 위치(output)을 정하고, 파일을 어떤 로더로 부를지, 어떤 플러그인으로 결과물을 처리할 지 정할 수 있다.

webpack js파일 module.exports에 entry, output, loader, plugin을 정의하여 사용한다. 예시로는 아래 코드와 같다.

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');

modules.exports = {
    entry: {
        'app': 'entries/app.js'
    },
    output: {
        path: path.resolve("../backend/target/classes/main/static"),
        filename: './js/app.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: [/node_modules/, /3rd-party/],
                loader: 'babel-loader?cacheDirectory=true',
                query: {
                    presets: ['es2015'],
                }
            },
            {
                test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 20000
                    }
                }]
            },
        ]
    },
    plugins: [
        new UglifyJSPlugin(),
    ],
    resolve: {
        modules: [
            path.join(__dirname, "src/js"),
            "./src/js/components",
            "node_modules",
            path.join(__dirname, "./../backend/src/main/resources")
        ],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    }
}

• entry
    어떤 파일에서 시작하여 번들링할 것인지 정한다. entries/app.js 파일로 지정했는데, webpack은 아래의 resolve의 modules에서 지정한 경로 하위의 entries 폴더 밑 app.js 파일을 찾는다.
  
  
• output
    어떤 경로에 번들링된 파일을 놓을지 정한다. 여기선 Maven의 backend 모듈의 target/classes/main/static/js 폴더에 app.js 라는 이름의 파일로 놓도록 설정했다.
  
  
• module
    rules에 어떤 파일을 어떤 loader로 로딩할 지 선택할 수 있다. js는 babel-loader, vue는 vue-loader 등으로 로딩하도록 하고있다. 특히 babel-loader는 특정 자바스크립트 버전에 맞게 번들링 하여, 여러 브라우저에서 이슈 없이 실행 가능하도록 해준다.
  
  
• plugins
    번들링된 파일을 후처리하는 플러그인을 설정한다. 여기서는 uglifyjs-webpack-plugin만 사용했다.
  

웹팩을 사용하기 위해선 npm의 package.json을 설정해야 한다. package.json은 Maven의 pom.xml과 비슷한 역할을 한다. 이름, 버전, 빌드 옵션, 의존성 등을 설정할 수 있다.

package.json에서 webpack을 사용하도록 하기 위해선 dependencies에 webpack을 추가해야한다.

"dependencies": {
    ...
    "webpack": "^3.6.0",
    ...
}

babel-loader같은 로더, 각종 플러그인 등 webpack에서 사용할 여러가지 의존성도 여기서 설정한다.

웹팩을 빌드하기 위해선 package.json에 아래처럼 빌드 옵션을 줄 수 있다.

"scripts": {
    ...
    "build": "webpack --config webpack.config.js",
    ...
}

위의 예시로 빌드를 실행하려면 "npm run build" nodejs 명령어를 실행하면 된다.

frontend, backend로 나눠진 Maven 다중 모듈 프로젝트에서는 두 모듈의 빌드를 한 번에 수행할 수 있도록 frontend-maven-plugin을 사용한다. 이 플러그인을 frontend의 pom.xml에 설정하여 maven 명령어 (예를 들어, install) 수행 시 수행할 npm 명령을 지정할 수 있다.

frontend-maven-plugin의 자세한 사항은 아래 링크들을 참고하자.

---

참고

Maven 다중 모듈

https://blog.codecentric.de/en/2018/04/spring-boot-vuejs/

webpack

http://blog.jeonghwan.net/js/2017/05/15/webpack.html

frontend-maven-plugin

https://github.com/eirslett/frontend-maven-plugin

http://blog.future2code.com/?p=27