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 alias = require('./configs/alias.js');
var postcssModules = require('./configs/postcssModules.js');

var entries = getEntry('./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: 'js/[id].js'
    },
    resolve: {
        alias: alias,
        extensions: ['', '.js', '.vue']
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader?sourceMap')
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                // Image loader, the smaller pictures turn into base64
                loader: 'url',
                query: {
                    limit: 1,
                    name: './images/[name].[ext]'
                }
            }
        ]
    },
    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime']
    },
    vue: {
        loaders: {
            js: 'babel',
            css: ExtractTextPlugin.extract("vue-style-loader", "css-loader!postcss-loader?sourceMap"),
        },
        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({
            compress: {
                warnings: false
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin()
    ]);
} else {
    module.exports.devtool = 'eval-source-map';
    module.exports.output.publicPath = '/View/';
}

var pages = getEntry('./source/pages/**/*.html');
for (var pathname in pages) {
    // Configured to generate the html file, define paths, etc.
    var conf = {
        filename: prod? '../Application/Home/View/' + pathname + '.html' : pathname + '.html', // html output pathname
        template: pages[pathname], // Template path
        inject: true,              // js insertion
        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));
}

// According to the specific needs of the project, output the correct path js and html
function getEntry(globPath) {
    var entries = {},
        basename, tmp, pathname;

    glob.sync(globPath).forEach(function (entry) {
        basename = path.basename(entry, path.extname(entry));
        tmp = entry.split('/').splice(-3);
        pathname = tmp.splice(0, 1) + '/' + basename; // Correct output path of html and js
        entries[pathname] = entry;
    });
    console.log(entries);
    return entries;
}