webpack热更新（webpack compiling...），95% emit webpack-dev-server停止了

Question

问题步骤重现：

1、修改了React的component组件文件（不管哪个js文件都一样），保存
2、webpack启动热更新，compiling...
3、95% emit，然后webpack-dev-server停止了

报错图如下：

webpack.config.js

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var AssetsPlugin = require('assets-webpack-plugin');
// var assetsPluginInstance = new AssetsPlugin();
// var proxy = require('http-proxy-middleware');

//配置远程路径
var remotePath = "./__build__/";
fs.readdir(remotePath, function (err, files) {
    if (!err) {
        for (var i = 0; i < files.length; i++) {
            var filesName = files[i];
            if (filesName.indexOf("chunk.js") > 1) {
                fs.unlink('./__build__/' + filesName);
            }
        }
    }
});


module.exports = {
    entry: {
        bundle: "./web_app/index.js"
    },
    devtool: 'cheap-module-eval-source-map',
    output: {
        path: __dirname + '/__build__',
        filename: '[name].js',
        chunkFilename: (new Date()).getTime() + '[id].chunk.js',
        publicPath: '/__build__/'
    },

    // 解决跨域问题
    devServer: {
        hot: true,
        inline: true,
        proxy: {
            '*': {
                changeOrigin: true,
                //target: 'xxx',
                target: 'xxx',
                secure: false
            }
        }
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV),
            },
        }),

        // new webpack.HotModuleReplacementPlugin(),

        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./__build__/dll/lib-manifest.json')
        }),

        // 部分代码
        new AssetsPlugin({
            filename: '__build__/webpack.assets.js',
            processOutput: function (assets) {
                return 'window.WEBPACK_ASSETS = ' + JSON.stringify(assets);
            }
        }),

        new webpack.ProvidePlugin({ //加载jq
            $: 'jquery',
            jQuery: 'jquery'
        }),

        //压缩代码
        // new webpack.optimize.UglifyJsPlugin({
        //     mangle: {
        //         except: ['$super', '$', 'exports', 'require']
        //     },
        //     compress: {
        //         warnings: false,
        //     },
        //     output: {
        //         comments: false,
        //     },
        // }),

        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
    ],
    resolve: {
        extensions: ['', '.js', '.jsx'],
        resolve: {
            alias: {
                moment: "moment/min/moment-with-locales.min.js"
            }
        }
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                // loaders: ['babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-0'],
                loader: 'babel-loader',
                query: {
                    plugins: ["transform-object-assign", "add-module-exports"],
                    presets: ['es2015', 'stage-0', 'react']
                },
                include: path.join(__dirname, '.')
            }, {
                test: /\.css$/,
                loader: 'style!css'
            }, {
                test: /\.less$/,
                loader: 'style!css!less'
            }, {
                test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
                exclude: /^node_modules$/,
                loader: 'file-loader?name=[name].[ext]'
            }, {
                test: /\.(png|jpg)$/,
                exclude: /^node_modules$/,
                loader: 'url?limit=0&name=[name].[ext]' //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
            }
        ]
    }
};

package.json

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dll": "webpack --config dll.config.js",
    "start": "npm run dev",
    "dev": "webpack-dev-server --progress --colors --host 0.0.0.0 --port 8888 --inline --hot",
    "build": "webpack"
  },
  "author": "",
  "dependencies": {
    "antd": "^2.9.3",
    "compression": "^1.6.1",
    "cross-env": "^1.0.8",
    "echarts": "^3.5.3",
    "echarts-for-react": "^1.2.0",
    "echarts-wordcloud": "",
    "element-resize-event": "^2.0.9",
    "es6-promise": "^4.0.5",
    "eslint": "^3.19.0",
    "eslint-plugin-babel": "^4.1.1",
    "eslint-plugin-react": "^6.10.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "flux": "^3.1.0",
    "fullcalendar": "",
    "history": "^3.0.0",
    "isomorphic-fetch": "^2.2.1",
    "jqGrid": "^5.1.1",
    "jquery": ">=2.1.4",
    "md5": "^2.2.1",
    "moment": "^2.15.1",
    "object-assign": "^4.1.0",
    "rc-pagination": "^1.6.2",
    "rc-time-picker": "",
    "react": "^15.4.1",
    "react-addons-create-fragment": "^15.4.1",
    "react-addons-shallow-compare": "",
    "react-addons-test-utils": "^15.4.1",
    "react-adsense": "^0.0.1",
    "react-datepicker": "^0.39.0",
    "react-dom": "^15.4.0",
    "react-router": "^3.0.0",
    "react-select2-wrapper": "",
    "react-test-renderer": "^15.4.0",
    "uxcore": "^0.14.2"
  },
  "devDependencies": {
    "assets-webpack-plugin": "",
    "babel-cli": "^6.6.0",
    "babel-core": "^6.18.2",
    "babel-eslint": "^7.2.2",
    "babel-loader": "^6.2.8",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-es3-member-expression-literals": "*",
    "babel-plugin-transform-es3-property-literals": "*",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-react-hmre": "^1.0.0",
    "babel-preset-stage-0": "^6.16.0",
    "bundle-loader": "^0.5.4",
    "css-loader": "^0.28.0",
    "element-resize-event": "^2.0.9",
    "express": "^4.14.0",
    "express-urlrewrite": "^1.2.0",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.24.1",
    "http-proxy-middleware": "",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "open-browser-webpack-plugin": "0.0.3",
    "react-addons-css-transition-group": "^15.3.0",
    "react-load-script": "0.0.3",
    "storybook": "",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.3",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.16.2",
    "ztree-for-react": "^0.1.5"
  },
  "license": "ISC"
}

Answer 1

在以上 webpack.config.js 中图片所示位置，再添加一行 exlude: /node_modules/ 即可

具体原因未知，个人猜测是如果不排除 node_modules 中的文件，node_modules 中有些文件编译出错，导致webpack挂起

Answer 2

谢邀，webpack还是初学中，简单搜索了下，这儿有个链接，你看看能不能解决你的问题
https://github.com/webpack/we...

Answer 3

报错信息显示的是js堆内存溢出，应该是你的js代码写的有问题，排查一下哪里会产生大量的js对象，主要留意数组，循环等地方代码

Answer 4

有很大的可能使你的输出路径包含了无效的字符，导致了webpack的挂起