Webpack 开发服务器 - 热模块替换错误
Webpack dev server - error with Hot Module Replacement
我使用 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
标志,开发服务器可以工作(没有热模块替换功能)。
+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 在使用 inline 时被 hot-reloader 使用,因此只有在使用 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
之后添加错误引用的丢失文件 运行。
我设法通过从我的配置中转储 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']
},
(自我提示:不要盲目安装 plug-ins,直到你完全确定你需要它们。)
我使用 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
标志,开发服务器可以工作(没有热模块替换功能)。
+1 这个问题。当我使用 inline: true
.
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 在使用 inline 时被 hot-reloader 使用,因此只有在使用 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
之后添加错误引用的丢失文件 运行。
我设法通过从我的配置中转储 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']
},
(自我提示:不要盲目安装 plug-ins,直到你完全确定你需要它们。)