我使用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
标志,dev服务器工作(没有热模块替换功能) .
2 回答
我设法通过从我的配置转储bower-webpack-plugin来解决这个问题 . 这是由@u_glow引用的https://github.com/socketio/socket.io/issues/2109线程上的一张海报所暗示的 .
如果没有该插件,Webpack将不会在bower_components文件夹中查找模块,除非您明确告诉它 . 我通过在webpack.config.js中添加以下内容来实现:
(自我备忘录:在你完全确定需要它们之前,不要盲目地安装插件 . )
1对于这个问题 . 当我在配置中使用
inline: true
添加devServer块时,我刚开始收到此错误 .设置
inline: false
会删除控制台错误 .----编辑----我相信这个问题与https://github.com/socketio/socket.io/issues/2109有关 . 当使用内联时,热重新加载器使用Socket-IO,因此只有在使用热内联时才会出现问题 .
作为一种解决方法,我将这两个脚本添加到我的package.json中:
...在运行
npm install
之后添加了错误引用的丢失文件 .