웹팩의 사용할때 기본설정을 알아보도록 하겠습니다.
기본적으로 node.js,npm,webpack,webpack-dev-server가 설치되어 있어야 합니다.
추가로 뷰cli를 통해 webpack-simple을 설치하게 되면 webpack.config.js 파일이 생성됩니다.
이 파일에서 웹팩에 대한 설정을 할 수 있습니다.

기본로딩

var path = require('path');
var webpack =  require('webpack');

빌드시 사용할 경로를 지정해주는 파일로딩 라이브러리와 웹팩을 로드합니다.

entry

entry : './src/main.js',

웹팩으로 빌드할 파일을 main.js로 지정합니다.

output

output : {
    path : path.resolve(__dirname,'./dist'),
    publicPath : '/dist/',
    filename : 'build.js'
}

빌드시 파일 경로를 지정합니다.
html 파일에서는 이 js파일을 사용합니다.

module

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                'vue-style-loader',
                'css-loader'
            ],
        },
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {}
            }
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        }
    ]
},

총 4종류의 파일에 대해서 모듈을 적용하여 변환시킵니다.
첫번째로 css파일을 vue-style-loader와 css-loader를 적용합니다.
vue 파일에는 vue-loader를 적용하여 vue 파일의 template,script,style등의 내용이 자동으로 변환됩니다.
js 파일에는 babel-loader를 적용하여 es6 문법도 호환이 가능하게 해줍니다.
끝으로 이미지 파일은 file-loader를 적용하여 js파일로 변환합니다.

resolve

resolve : {
    alias : {
        'vue$' : 'vue/dist/vue.esm.js'
    },
    extensions : ['*','.js','.vue','.json']
}

뷰 라이브러리의 유형중 어떤걸 사용할지 지정합니다.

devServer

devServer : {
    historyApiFallback : true,
    noInfo : true,
    overlay : true
}

webpack-dev-server 관련된 속성을 지정합니다.
자세한 정보는 https://github.com/webpack/webpack-dev-server 에서 확인이 가능합니다.

performance

performance : {
    hints : false
}

웹팩으로 빌드한 파일의 크기가 250k를 넘으면 경고메시지를 표시할지 설정합니다.

devtool

devtool : '#eval-source-map'

웹팩으로 빌드된 파일을 구동했을 때 개발자 도 구에서 디버깅 방식을 지정합니다.
자세한 정보는 https://webpack.js.org/ 에서 확인이 그낭합니다.

배포옵션

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

개발자도구 분석옵션을 #source-map으로 사용하고,
자바스크립트 파일을 줄이기 위해 Uglify 플러그인 설정을 추가했습니다.

로직을 보자면 main.js 파일에 App.vue 파일과 뷰 라이브러리를 불러와서 동작시키고
App.vue 에서는 이미지 등을 호출시켜 웹페이지를 구성하는 구조입니다.
웹팩은 파일간의 관계에 따라 build.js 파일을 생성시키고 index 파일에서 호출합니다.