webpack.config.js

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

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var glob = require('glob');

var postcssModules = require('./configs/postcssModules.js');

var entries = getEntries('./source/pages/', 'js'); // Obtain entry js file
var chunks = Object.keys(entries);

module.exports = {
    entry: entries,
    output: {
        path: path.resolve(__dirname, 'public'),   // Output path html, css, js, image files and other resources, and all the resources files in the Public directory
        publicPath: '/public/',                    // Path html, css, js, image files and other resources on the server
        filename: 'js/[name].js',                     // Js file is generated for each entry configuration
        chunkFilename: '[id].js'
    },
    devServer: {
        quiet: false,
        noInfo: false,
        stats: {
            assets: true,
            colors: true,
            version: false,
            hash: false,
            timings: true,
            chunks: false,
            chunkModules: false
        }
    },
    resolve: {
        alias: {
            '@blocks': path.resolve(__dirname, './source/blocks'),
            '@library': path.resolve(__dirname, './source/library'),
            '@layouts': path.resolve(__dirname, './source/layouts'),
            '@source': path.resolve(__dirname, './source'),
            '@styles': path.resolve(__dirname, './source/styles'),
            '@images': path.resolve(__dirname, './source/images'),
            '@helpers': path.resolve(__dirname, './source/resources/helpers'),
            '@directives': path.resolve(__dirname, './source/resources/directives'),
            '@mixins': path.resolve(__dirname, './source/resources/mixins'),
            '@plugins': path.resolve(__dirname, './source/resources/plugins')
        },
        extensions: ['', '.js', '.vue']
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules(?!\/vue-smart-table\/src\/components)/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                // Image loader, the smaller pictures turn into base64
                loader: 'url',
                query: {
                    limit: 10000,
                    name: './static/[name].[ext]'
                }
            }
        ]
    },
    vue: {
        loaders: {
            js: 'babel',
            css: ExtractTextPlugin.extract("vue-style-loader", "css-loader!postcss-loader"),
        },
        postcss: postcssModules
    },
    postcss: postcssModules,
    plugins: [
        // Extraction common module
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common', // The name of the common module
            chunks: chunks,  // chunks need to extract module
            minChunks: chunks.length
        }),
        // Configured to extract style files
        new ExtractTextPlugin('css/[name].css')
    ]
};

var prod = process.env.NODE_ENV === 'production';
module.exports.plugins = (module.exports.plugins || []);
if (prod) {
    // module.exports.devtool = 'source-map';
    module.exports.plugins = module.exports.plugins.concat([
        // Environment Configuration
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: 'production'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin()
    ]);
} else {
    // module.exports.devtool = 'eval-source-map';
    module.exports.output.publicPath = '/';
}

var pages = getEntries('./source/pages/', 'html');
for (var pathname in pages) {
    // Configured to generate the html file, define paths, etc.
    var conf = {
        filename: pathname + '.html', // html output pathname
        template: pages[pathname], // Template path
        inject: true,              // js insertion
        favicon: './source/pages/static/favicon.png',
        minify: {
            removeComments: true,
            collapseWhitespace: false
        }
    };
    if (pathname in module.exports.entry) {
        conf.chunks = ['common', pathname];
        conf.hash = false;
    }
    // We need to generate a html file on several HtmlWebpackPlugin object configuration
    module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

function getEntries(context, extension) {
    if (context[context.length - 1] !== '/') {
        context += '/';
    }

    extension = '.' + extension;

    var files = glob.sync(context + '**/*' + extension),
        entries = {};

    files.forEach(function (file) {
        entries[file.replace(context, '').replace(extension, '')] = file;
    });

    return entries;
}