module.exports = {
    mode: '',
    entry: {},
    output: {},
    module: {}, // loader
    plugins: [] // {array},
    resolve: {},
    devtool: '',
    devServer: {}
}

{
    etnry : 'string.js'
}

{
    entry : ['array.js']
}

{
    entry : {
        app: './src/app.js', // 잦은배포
        vendors: './src/vendors.js' // 버전업 잘 없는 경우
    }
}
{
    entry : {
        page1: './src/page1/index.js',
        page2: './src/page2/index.js',
        vendors: './src/vendors.js'
    }
}

{
    output: {
        path: '/home/cdn/assets/[hash]', // 빌드된 번들 파일이 위치할 파일의 절대 경로
        publicPath: 'http://script.auction.co.kr/assets/[hash]/', // 브라우저가 참고할 번들링 결과 파일의 URL주소(CDN 호스트) 반드시 앞뒤 / 추가해 줘야합니다.
        filename: '[name].js' // entry의 key name => name 으로 참조 됩니다.       
    }
}

module: {
    rules: [
        {
            test: /regExp/, // regExp
            use: ['loader name'] // {string} loader name list
        }
    ]
}

module: {
    rules: [
        {
            test: /\.css$/, 
            use: [
                'style-loader', 
                'css-loader'
            ]
        },
        {
            test: /\.png$/,
            use: ['url-loader?limit=1']
        }
    ]
}

{
    test: /backbone/,
    use: [
        'expose-loader?Backbone',
        'import-loader?_=underscore,jquery'
    ]
}

module.exports = {
    plugins: [] // {array}
}

module.exports = {
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery' 
        }), 
        // 모든 모듈에서 사용할 수 있도록 해당 모듈을 변수로 변환한다.
        // 즉 각 모듈(파일)에서 매번 import할 필요 없이 해당 변수를 통하여 참조가능
        new webpack.DefinePlugin({
            PRODUCTION: JSON.stringify(true),
            VERSION: JSON.stringify('5fa3b9'),
            BROWSER_SUPPORTS_HTML5: true,
            TWO: '1+1',
            'typeof window': JSON.stringify('object')
        }),
        // 웹팩 번들링 시작하는 시점에 사용 가능한 상수값 정의 가능
        // 개발계, 테스트계에 따라 다른 설정 적용시 유용하다.
        new ManifestPlugin({
            fileName: 'manifest.json',
            basePath: './dist/'
        }),
        // 번들링시 생성되는 코드에 대한 정보들을 json 파일 안에 담아줘 라이브러리들간 의존성 파악 용의
    ]
}

module.exports = {
    resolve:{
        alias: {
            Utilities: path.resolve(__dirname, 'src/path/utilities/')
        }
    }
}
// 기존 모듈 로딩
import Utility from '../../src/path/utilities/utility';

// resolve alias option 설정 시 모듈 로딩
import Utility from 'Utilities/utility';

module.exports = {
    resolve:{
        modules: ['node_modules'] // defaults
    }
}

module.exports = {
    resolve:{
        modules: [path.resolve(__dirname, 'src'), 'node_modules'] // src/node_modules
    }
}

module.exports = {
    devtool: '#inline-source-map'
}

module.exports = {
  //...
    devServer: {
        publicPath: '/assets', // 절대경로로 지정하고 항상 /를 앞뒤에 붙여야 한다. 
        contentBase: path.join(__dirname, 'dist'), // 서버가 로딩할 static 파일 경로
        // contentBase: false, // 비활성화
        compress: true, // gzip 압축 방식을 이용하여 웹 자원의 사이즈를 줄인다.
        // 파일을 줄이는게 아니라 서버와 클라이언트간 압축방식 정의
        port: 9000
    }
};

const express = require('express');
const webapck = require('webpack');
const webpackDevMiddleware = requrie('webpack-dev-middleware');
const webpackConfig = require('./webpack.config');

const app = express();
const compiler = webpack(webpackConfig);

app.use(webpackDevMiddleware(compiler, {
    publicPath: webpackConfig.output.publicPath, // 일반적으 output에 설정한 publicPath 사용
    stats: {colors: true}, // 번들링 시 webpack 로그 컬러 하이라이팅
    lazy: true // entry point에 네트워크 요청이 있을 때만 컴파일 다시함
}));

app.listen(3000, function() {
    console.log('listening on port 3000');
})

const gulp = require('gulp');
const webpack = require('webpack-stream');
const webpackConfig = require('./webpack.config.js');

gulp.task('default', function(){
    return gulp
    .src('src/entry.js')
    .pipe(webpack(webpackConfig)) // 걸프 테스크 중간에 웹팩 추가
    .pipe(gulp.dest('dist/'));
})

module.exports = {
    entry: {
        main: './app/index.js',
        vendor: [
            'moment',
            'lodash'
        ]
    },
    output: {
        filename: '[name].js', // main.js, vendor.js
        path: path.resolve(__dirname, 'dist')
    }
}

module.exports = {
    entry: {
        main: './app/index.js',
        vendor: [
            'moment',
            'lodash'
        ]
    },
    output: {
        filename: '[name].js', // main.js, vendor.js
        path: path.resolve(__dirname, 'dist')
    },
    module: {},
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor' // output bundle file name
            // or
            names: ['vendor', 'manifest'] // 매 번들시 번들파일에 웹팩 초기화 하는 부트스트랩 코드가 들어가는데 manifest.js 그 부분까지 분리해 낼 수 있다. 매번 번들되는 코드의 양을 좀 더 줄일 수 있다.
        })

        // and 번들된 파일 관리 목록 json
        // npm i webpack-manifest-plugin --save-dev
        new ManifestPlugin({
            fileName: 'manifest.json',
            basePath: './dist/'
        })
    ]
}

path.join('/foo', 'bar', 'baz/asdf');
// '/foo/bar/baz/asdf'

path.resolve('/foo/bar', './baz');
// '/foo/bar/baz'

path.resolve('/foo/bar', '/tmp/file/');
// '/tmp/file'

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');
// 현재 폴더 위치가 /home/myself/node 라면
// '/home/myself/node/wwwroot/static_files/gif/image.gif'