bvue-sidebar/webpack.config.dev.js

Vue2Sidebar: Bootstrap 4 sidebar component in Vue 2.0

'use strict';

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: __dirname,
    resolve: {
        modules: [
            path.resolve(__dirname, 'src'),
            'node_modules'
        ],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['.js', '.json', '.vue'],
    },
    entry: {
        app: './src/main.js',
    },
    output: {
        path: path.resolve(__dirname, 'docs'),
        publicPath: '',
        filename: "js/[name].[hash].js",
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader',
                exclude: path.resolve(__dirname, 'node_modules'),
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: path.resolve(__dirname, 'node_modules'),
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
            },
            {
                test: /\.jpe?g$|\.gif$|\.png$/i,
                loader: 'file-loader?name=[name].[hash].[ext]',
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                loader: 'file-loader?name=[name].[ext]?[hash]',
            }

        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            hash: false,
            template: 'index.html',
            minify: {
                removeComments: false,
                collapseWhitespace: false,
                removeAttributeQuotes: false,
                minifyJS: false,
                minifyCSS: false,
                minifyURLs: false,
            }
        }),
        new webpack.ProvidePlugin({
            Vue: ['vue/dist/vue.esm.js', 'default'],
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            $: 'jquery'
        }),
        // https://webpack.js.org/plugins/commons-chunk-plugin/
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function(module) {
                // This prevents stylesheet resources with the .css or .scss extension
                // from being moved from their original chunk to the vendor chunk
                if (module.resource && (/^.*\.(css|scss)$/).test(module.resource)) {
                    return false;
                }
                return module.context && module.context.indexOf("node_modules") !== -1;
            }
        }),
        // Required when devServer.hot = true
        new webpack.HotModuleReplacementPlugin(),
    ],
    // Dev server related configs
    devServer: {
        contentBase: path.resolve(__dirname, ''),
        port: 8000,
        host: 'localhost',
        open: true,
        inline: true,
        hot: true,
        noInfo: false,
        quiet: false,
        stats: 'errors-only'
    },
    devtool: '#cheap-module-eval-source-map',
};