webpack.config-simple.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

const isProduction = (process.env.NODE_ENV === 'production');

module.exports = {
    mode: isProduction ? 'production' : 'development',
    entry: {
        app: './resources/assets/admin/app.js'
    },
    output: {
        path: path.resolve(__dirname, './public/js/bundle/admin'),
        filename: isProduction ? '[name].js' : 'app.js',
        chunkFilename: '[name].js', // js/[id].[chunkhash].js
        publicPath: isProduction ? '/js/bundle/admin/' : 'http://localhost:8006/'
    },

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.pug$/,
                loader: 'pug-plain-loader'
            },
            {
                test: /\.svg$/,
                loader: 'svg-sprite-loader',
                include: [path.resolve(__dirname, './resources/assets/admin/icons')],
                options: {
                    symbolId: 'icon-[name]'
                }
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                exclude: [path.resolve(__dirname, './resources/assets/admin/icons')],
                options: {
                    name: '[name].[ext]?[hash]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[hash:7].[ext]'
                }
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': path.resolve(__dirname, 'resources/assets/admin')
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true,
        port: 8006,
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
    },
    performance: {
        hints: false
    },
    devtool: '#eval-source-map'
};

if (isProduction) {
    module.exports.devtool = '#source-map';

    // Taken from https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
    module.exports.optimization = {
        runtimeChunk: { name: 'manifest' },
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    };

    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([

        new MiniCssExtractPlugin({            
            filename: '[name].css',
            chunkFilename: 'css/[name].css'
        }),

        new OptimizeCSSPlugin({
            cssProcessorOptions: {
                safe: true
            }
        }),

        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),

        // Utilizado para não adicionar todas as localizações do momentjs
        new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, /^\.\/(en)$/)
    ]);

    if (process.env.npm_config_report === 'true') {
        var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
        module.exports.plugins.push(new BundleAnalyzerPlugin());
    }
}