medium sample code

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

// 개발환경인지 아닌지 판단하여 맞으면 true를, 아니면 false를 저장한다
const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
    // 개발모드를 설정
    mode: process.env.NODE_ENV,
    // 빌드시 중심이 될 파일을 설정한다. 여기서는 Vue프로젝트의 root파일인 index.js파일을 설정했다.
    entry: './resources/landing/index.js',
    devtool: 'eval',
    output: {
        // 위에서 설정했던 환경에 따라 저장하는 폴더를 다르게 설정한다.
        path: isDevelopment ? path.resolve(__dirname, './resources/dev') : path.resolve(__dirname, './resources/dist/js'),
        // 빌드 결과물은 landing.js로 저장하고
        filename: 'landing.js',
        // 이미지 파일과 같은 asset들의 기본 경로를 설정한다.
        publicPath: '/',
        // 해당 js파일을 불러올 경우 landing이라는 라이브러리 이름으로 사용할 수 있다.
        library: 'landing'
    },
    module: {
        rules: [
            // vue확장자를 위한 가장 기초적인 설정이다.
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // js파일에 대해서 babel설정을 적용한다. 다만 node_modules폴더를 제외했다.
            {
                test: /\.m?js$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader'
            },
            // css파일에 대한 loader를 설정한다.
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            // scss확장자에 대한 loader를 설정한다. 이게 있어야 scss파일을 사용할 수 있다.
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            // 여러가지 이미지 확장자를 같이 빌드하도록 설정한다
            {
                test: /\.(png|ico|svg|jpg|gif)$/,
                use: isDevelopment ? 'file-loader?name=./resources/dist/images/[name].[ext]' : 'file-loader?name=../../../resources/dist/images/[name].[ext]'
            }
        ]
    },
    // 아래의 확장자를 순서대로 진행하게 된다.
    resolve: {
        extensions: ['.vue', '.js', '.scss']
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};