webpack 3.0 설정 방법

설정방법

• devtool : 소스맵을 생성하여 원본 소스랑 맵핑할 수게 있게 설정하는 부분 (참고 : https://webpack.js.org/configuration/devtool/)

module.exports = {
    devtool: 'source-map',
     ....

 

 

 

devtool 옵션	설명
eval-source-map	모든 기능이 포함된 완전한 소스맵을 별도의 파일로 생성합니다. 이 옵션은 최고 품질의 소스맵을 생성하지만 빌드 프로세스가 느려집니다.
source-map	별도의 파일에 칼람 매핑을 제외한 소스 맵을 생성합니다. 칼람 매핑을 생략하면 빌드 속도는 향상되지만 디버깅할 때는 약간의 불편함이 있습니다. 브라우저가 개발자 툴은 원래 소스 파일의 행을 가리킬 수 있으며, 특정 칼람(또는 문자열)을 가릴 수 없습니다.
module-source-map	"eval"을 사용해 파일 안에 전체 소스맵과 소스코드 모듈을 중첩해 번들로 만듭니다. 이 옵션을 사용하면 빌드 시간에 대한 부담 없이 모든 기능이 포함된 소스맵을 생성할 수 있지만 자바스크립트를 실행할 때 성능과 보안이 저하되는 단점이 있습니다. 즉, 개발 중에는 유용하지만 실무 버전을 빌드할 때는 사용하지 않아야 합니다.
cheap-module-eval-source-map	빌드 중에 소스 맵을 생성하는 가장 빠른 방법입니다. 생성되는 소스맵에는 번들 자바스크립트 파일이 칼람 매핑을 제외하고 동일하게 인라인으로 포함됩니다. 이전 옵션과 마찬가지로 자바스크립트 실행 시간에 부정적인 영향을 미치므로 실무용 번들

 

 

• entry : entry 부분이 웹팩이 파일을 읽어들이기 시작하는 부분입니다. 

 module.exports = {
    ...
    entry: [
        // polyfills : 브라우저 호환성을 위해 polyfills 파일을 require 하여 설정합니다. (object-assign, fetch 등...)
        require.resolve('./polyfills'),
        // 변수로 설정한 src/index.js 을 읽도록 설정합니다.
        paths.appIndexJs
    ]
    ...

 

• output : 파일  출력을 설정하는 부분

 module.exports = {
    ...
    output: {
        // output으로 나올 파일이 저장될 경로 (public/dist)
        path: paths.appBuild,
        // 파일 이름을 설정합니다.
        // 다른 옵션으로는 [hash]나 [chunkhash]가 있습니다. [hash]는 매번 웹팩 컴파일 시 랜덤한 문자열을 붙여줍니다.
        // 따라서 캐시 삭제 시 유용합니다. [hash]가 컴파일할 때마다 랜덤 문자열을 붙여준다면 [chunkhash]는 파일이 달라질 때에만 랜덤 값이 바뀝니다.
        // 이것을 사용하면 변경되지 않은 파일들은 계속 캐싱하고 변경된 파일만 새로 불러올 수 있는 장점이 있습니다.
        filename: 'static/js/[name].[chunkhash:8].js',
        // 실무용에서만 사용. 파일을 분리하여 생성할경우만 사용합니다.
        chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
        // 파일들이 위치할 서버 상의 경로입니다.
        publicPath: publicPath
    },
    ...

 

• rules : 로더를 설정하는 부분 (webpack version 1.0에서는 loaders로 사용함)

module.exports = {
    ...
    module: {
        rules: [{
            // 파일 패턴을 설정합니다.
            test: /\.(js|jsx)$/,
            // 로더를 설정 (webpack1에서는 babel 이런식으로 설정할 수 있었지만 2.0 부터는 뒤에 loader를 붙여야 합니다.)
            loader: 'babel-loader',
            // loader의 순서를 설정 (pre or post) 값이 없을 경우는 normal로 설정됩니다.
            enforce : normal
            // 포함될 경로를 설정합니다.
            include: paths.appSrc,
            // 제외할 경로를 설정합니다.
            exclude : paths.config,
            // 로더에 대한 옵션 설정 부분 (로더에 따라 설정 방법이 다릅니다.)
            query: {
                cacheDirectory: true,
                presets: ['es2015', 'stage-0', 'react']
            }
        }]
    ...

 

• node : 일부 라이브러리는 노드 모듈을 가져 오지만 브라우저에서는 사용하지 않으므로 webpack에 empty를 설정하여 빈 moke를 제공하도록 합니다.

 module.exports = {
    ...
    module: {
        node: {
            fs: 'empty',
            net: 'empty',
            tls: 'empty'
        }
    ...