webpack - webpack配置中每个条目的多个“[HMR]等待来自WDS的更新信号...”控制台输出

Question

对于我的common.entry对象中的每个条目，我都会将以下内容打印到控制台（在 my 中有 3 个条目webpack.config.js）。这是期望的输出吗？

webpack.config.js

const path              = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge             = require('webpack-merge');
const validate          = require('webpack-validator');
const parts             = require('./lib/parts');

const TARGET            = process.env.npm_lifecycle_event;

const PATHS = {
    app: path.join(__dirname, 'app'),
    test: path.join(__dirname, 'app', 'test.css'),
    style: [
        path.join(__dirname, 'app', 'main.css')
    ],
    build: path.join(__dirname, 'build'),
};

const common = merge(
    {
        entry: {
            app: PATHS.app,
            style: PATHS.style,
            test: PATHS.test
        },
        output: {
            path: PATHS.build,
            filename: '[name].js'
        },
        resolve: {
            extensions: ['', '.js', '.jsx']
        },
        plugins: [
            new HtmlWebpackPlugin({
                title: 'Webpack demo'
            })
        ]
    }
);

var config;

// console.log(JSON.stringify(common,null,2));

switch(TARGET) {
    case 'build':
        config = merge(
            common,
            {
                devtool: 'source-map',
                output: {
                    path: PATHS.build,
                    filename: '[name].[chunkhash].js',
                    chunkFilename: '[chunkhash].js'
                }
            },
            parts.clean(PATHS.build),
            parts.setFreeVariable(
                'process.env.NODE_ENV',
                'production'
                ),
            parts.extractBundle({
                name: 'vendor',
                entries: ['react']
            }),
            parts.minify(),
            parts.extractCSS(PATHS.style)
        );
        break;
    default:
        config = merge(
            common,
            {
                devtool: 'eval-source-map'
            },
            parts.setupCSS(PATHS.style),
            parts.devServer({})
        );
}

// console.log("\n\n-------------\n\n"+JSON.stringify(config,null,2));

module.exports = validate(config);

库/parts.js

常量 webpack = require('webpack'); 常量 CleanWebpackPlugin = require('clean-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin');

exports.devServer = function(options) {
    const ret = {
        devServer: {
            historyApiFallback: true,
            hot: true,
            inline: true,
            stats: 'errors-only',
            host: options.host, // Defaults to `localhost`
            port: options.port // Defaults to 8080
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin({
                multiStep: true
            })
        ]
    };
    if(options.poll) {
        ret.watchOptions = {
            aggregateTimeout: 300,
            poll: 1000
        };
    }
    return ret;
}

exports.setupCSS = function(paths) {
    return {
        module: {
            loaders: [
                {
                    test: /\.css$/,
                    loaders: ['style', 'css'],
                    include: paths
                }
            ]
        }
    };
}

exports.minify = function() {
    return {
        plugins: [
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                    drop_console: true
                },
                mangle: {
                    props: /matching_props/,
                    except: [
                        'Array', 'BigInteger', 'Boolean', 'Buffer'
                    ]
                }
            })
        ]
    };
}


exports.setFreeVariable = function(key, value) {
    const env = {};
    env[key] = JSON.stringify(value);
    return {
        plugins: [
            new webpack.DefinePlugin(env)
        ]
    };
}

exports.extractBundle = function(options) {
    const entry = {};
    entry[options.name] = options.entries;
    return {
        entry: entry,
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: [options.name, 'manifest'],
                minChunks: Infinity
            })
        ]
    };
}

exports.clean = function(path) {
    return {
        plugins: [
            new CleanWebpackPlugin([path], {
                root: process.cwd()
            })
        ]
    };
}

exports.extractCSS = function(paths) {
    return {
        module: {
            loaders: [
                // Extract CSS during build
                {
                    test: /\.css$/,
                    loader: ExtractTextPlugin.extract('style', 'css'),
                    include: paths
                }
            ]
        },
        plugins: [
            // Output extracted CSS to a file
            new ExtractTextPlugin('[name].[chunkhash].css')
        ]
    };
}