Question

我使用Webpack dev服务器进行开发，并希望使用hot module replacement功能，但是当我运行dev服务器时，我收到错误：

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有关。当使用内联时，热重新加载器使用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']
},

（自我备忘录：不要盲目安装插件，直到你完全确定需要它们为止。）

Webpack dev服务器 - 热模块更换时出错

2 个答案: