Webpack 开发服务器 - 热模块更换错误

Question

我使用 Webpack 开发服务器进行开发并想使用hot module replacement 功能，但是当我运行开发服务器时出现错误：

ERROR in debug (bower component)
Module not found: Error: Cannot resolve 'file' or 'directory' ./dist/debug.js in /Users/and/devel/WebstormProjects/Wonderland_front/node_modules/webpack-dev-server/node_modules/sockjs-client/node_modules/debug
 @ debug (bower component) 1:17-43

package.json

{
  "name": "Wond",
  "version": "0.0.1",
  "description": "Internal evidence application",
  "main": "index.jsx",
  "scripts": {
    "start": "npm run serve | npm run dev",
    "serve": "./node_modules/.bin/http-server -p 8080",
    "dev": "webpack-dev-server -d --hot --inline --progress --colors --port 8090"
  },
  "author": "And",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.2.2",
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "backbone": "^1.2.3",
    "bootstrap": "^3.3.5",
    "bootstrap-select": "^1.9.3",
    "bower-webpack-plugin": "^0.1.9",
    "cookies-js": "^1.2.2",
    "css-loader": "^0.23.0",
    "eonasdan-bootstrap-datetimepicker": "^4.15.35",
    "events": "^1.1.0",
    "extract-text-webpack-plugin": "^0.9.0",
    "file-loader": "^0.8.5",
    "flux": "^2.1.1",
    "html-webpack-plugin": "^1.7.0",
    "http-server": "^0.8.5",
    "immutable": "^3.7.6",
    "immutablediff": "0.4.2",
    "jquery": "^2.1.4",
    "jquery-resizable-columns": "^0.2.3",
    "jquery-ui": "^1.10.5",
    "json-markup": "^0.1.6",
    "less": "^2.5.3",
    "less-loader": "^2.2.2",
    "lodash": "^3.10.1",
    "moment": "^2.10.6",
    "node-sass": "^3.4.1",
    "object-assign": "^4.0.1",
    "path": "^0.12.7",
    "postcss": "^5.0.13",
    "postcss-loader": "^0.8.0",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-hot-loader": "^1.3.0",
    "react-mixin": "^3.0.3",
    "sass-loader": "^3.1.2",
    "select2": "^4.0.0",
    "select2-bootstrap-css": "^1.4.6",
    "style-loader": "^0.13.0",
    "svg-sprite-loader": "0.0.2",
    "typeahead.js": "^0.11.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0",
    "webpack-merge": "^0.5.1"
  }
}

webpack.config.js

var webpack = require('webpack');
var merge = require('webpack-merge');
var BowerWebpackPlugin = require("bower-webpack-plugin");
var autoprefixer = require('autoprefixer');

const TARGET = process.env.npm_lifecycle_event;
console.log("target is event is " + TARGET);

var common = {
    cache: true,
    debug: true,
    entry: './src/script/index.jsx',
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    output: {
        sourceMapFilename: '[file].map'
    },
    module: {
        loaders: [
            {
                test: /\.js[x]?$/,
                loaders: ['react-hot', 'babel'],
                exclude: /(node_modules|bower_components|other_modules)/
            },
            {test: /\.css$/, loaders: ['style', 'css']},
            {test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass']},
            {test: /\.less$/, loaders: ['style', 'css', 'less']},
            { test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]" },
            { test: /\.woff2$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]" },
            {test: /\.(eot|ttf|svg|gif|png)$/, loader: "file-loader"}
        ]
    },
    plugins: [
        new BowerWebpackPlugin()
    ],
    postcss: function () {
        return [autoprefixer({browsers: ['last 3 versions']})];
    }
};

if(TARGET === 'dev' || !TARGET) {
    module.exports = merge(common,{
        devtool: 'eval-source-map',
        devServer: {
            historyApiFallback: true,

            // display only errors to reduce the amount of output
            stats: 'errors-only'
        },
        output: {
            filename: 'index.js',
            publicPath: 'http://localhost:8090/assets'
        }
    });
}

如果我删除 --hot 和 --inline 标志，开发服务器可以工作（没有热模块替换功能）。

Answer 1

+1 解决这个问题。当我使用 inline: true 在配置中添加 devServer 块时，我刚刚开始收到此错误。

config.devServer = {
  contentBase: config.output.path,  // We want to re-use this path
  noInfo: false,
  debug: false, // Makes no difference
  port: 5566,
  https: true,
  colors: true,
  //hot: true,    // Pass this from the command line as '--hot', which sets up the HotModuleReplacementPlugin automatically
  inline: true   // Setting this to false clears the error
};

设置inline: false 会消除控制台错误。

---- 编辑 ---- 我相信这个问题与https://github.com/socketio/socket.io/issues/2109 有关。使用 inline 时，hot-reloader 使用 Socket-IO，因此只有在使用 hot + inline 时才会出现问题。

作为一种解决方法，我将这两个脚本添加到我的 package.json 中：

"scripts": {
  "postinstall": "npm run fixDistDebugRef",
  "fixDistDebugRef": "mkdir -p node_modules/debug/dist && cp node_modules/debug/debug.js node_modules/debug/dist/"
}

...在npm install 运行后添加错误所指的缺失文件。

Answer 2

我设法通过从我的配置中转储 bower-webpack-plugin 来解决这个问题。这是由@u_glow 引用的https://github.com/socketio/socket.io/issues/2109 线程上的一位发帖人提出的。

如果没有该插件，Webpack 不会在 bower_components 文件夹中查找模块，除非您明确告诉它这样做。我通过将以下内容添加到我的 webpack.config.js 来做到这一点：

resolve: {
    modulesDirectories: ['node_modules', 'bower_components']
},

（给自己的备忘录：在确定自己需要插件之前，不要盲目安装插件。）