调用webpack-dev-server时出现以下错误：
ERROR in ./~/sockjs-client/~/faye-websocket/lib/faye/websocket/client.js
Module not found: Error: Can't resolve 'net' in '/Users/lololo/src/lalala/node_modules/sockjs-client/node_modules/faye-websocket/lib/faye/websocket'
@ ./~/sockjs-client/~/faye-websocket/lib/faye/websocket/client.js 2:13-27
@ ./~/sockjs-client/~/faye-websocket/lib/faye/websocket.js
@ ./~/sockjs-client/lib/transport/driver/websocket.js
@ ./~/sockjs-client/lib/transport/websocket.js
@ ./~/sockjs-client/lib/transport-list.js
@ ./~/sockjs-client/lib/entry.js
@ (webpack)-dev-server/client/socket.js
@ (webpack)-dev-server/client?http://localhost:8080
@ multi main
我的package.json看起来像：
{
"name": "editor",
"version": "0.1.0",
"dependencies": {
"backbone": "^1.3.3",
"bootstrap-sass": "^3.3.7",
"highlight.js": "^9.6.0",
"marked": "^0.3.6",
"moment": "^2.14.1",
"node-sass": "^3.8.0",
"nuka-carousel": "^2.0.2",
"react": "^15.2.0",
"react-dom": "^15.2.0",
"react-redux": "^4.4.5",
"react-router": "^2.0.0",
"react-tooltip": "^3.1.6",
"redux": "^3.5.2",
"store": "^1.3.20"
},
"devDependencies": {
"babel-cli": "^6.16.0",
"babel-core": "^6.13.2",
"babel-eslint": "^7.0.0",
"babel-jest": "^15.0.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-es2017": "^6.14.0",
"babel-preset-react": "^6.0.14",
"babel-preset-stage-0": "^6.5.0",
"body-parser": "^1.15.0",
"chalk": "^1.1.3",
"css-loader": "^0.24.0",
"enzyme": "^2.4.1",
"eslint": "^3.7.1",
"eslint-plugin-react": "^4.1.0",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.9.0",
"jest": "^15.1.1",
"jest-cli": "^16.0.0",
"json-loader": "^0.5.4",
"lodash": "^4.15.0",
"ncp": "^2.0.0",
"node-sass": "^3.8.0",
"react-addons-test-utils": "^15.3.2",
"react-test-renderer": "^15.3.2",
"sass-loader": "^4.0.0",
"selenium-standalone": "^5.1.0",
"sinon": "^1.17.6",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webdriverio": "^4.0.9",
"webpack": "^2.1.0-beta.22",
"webpack-dev-server": "^2.1.0-beta.9"
},
"scripts": {
"test": "jest --no-cache",
"lint": "eslint app/es6",
"clean-distx": "rimraf dist && mkdir dist",
"wp": "webpack --env.dev -p",
"build": "jest && npm run clean-dist && webpack --env.prod -p && npm run copy-files",
"copy-files": "babel-node --presets es2017 tools/copy.js",
"purgeDist": "rm dist/*.pem",
"deploy": "npm run purgeDist && firebase deploy",
"server": "webpack-dev-server --env.dev --content-base dist",
"start": "npm run clean-dist && npm run copy-files && npm run server"
},
"jest": {
"automock": true,
"unmockedModulePathPatterns": [
"react",
"react-dom",
"react-addons-test-utils",
"fbjs",
"enzyme",
"cheerio",
"htmlparser2",
"underscore",
"lodash",
"domhandler",
"object.assign",
"define-properties",
"function-bind",
"object-keys",
"moment",
"store"
],
"modulePathIgnorePatterns": [
"integrationTests"
],
"moduleNameMapper": {
"models/(.*)": "<rootDir>/app/es6/models/$1",
"controllers/(.*)": "<rootDir>/app/es6/controllers/$1",
"components/(.*)": "<rootDir>/app/es6/components/$1",
"stores/(.*)": "<rootDir>/app/es6/stores/$1",
"reducers/(.*)": "<rootDir>/app/es6/reducers/$1"
}
}
}
和webpack配置是：
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const jsConfig = env => ({
target: 'web',
context: __dirname + '/app',
entry: './es6/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'bundle.js'
},
// Important! Do not remove ''. If you do, imports without
// an extension won't work anymore!
resolve: {
modules: [path.resolve(__dirname, 'app'), 'node_modules'],
extensions: ['.js', '.jsx'],
aliasFields: ['components'],
alias: {
es6: 'es6',
components: 'es6/components',
controllers: 'es6/controllers',
models: 'es6/models',
stores: 'es6/stores',
reducers: 'es6/reducers'
},
},
devtool: env.prod ? false : 'eval',
// externals: [
// 'sockjs'
//
// ],
module: {
loaders: [
{ test: /\.json$/, loader: 'json'},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: [['es2015', {'modules': false}], 'react', 'stage-0']
}
}
]
},
devServer: {
contentBase: './app',
inline: true,
hot: true
},
plugins: [
new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/),
new webpack.optimize.UglifyJsPlugin(),
new webpack.ProvidePlugin({
React: 'react',
ReactDOM: 'react-dom'
})
]
});
const cssConfig = env => ({
context: __dirname + '/app',
entry: './sass/main.scss',
output: {
filename: 'main.css',
path: path.resolve(__dirname, 'dist/styles')
},
module: {
loaders: [
{
test: /\.s?css/,
loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css!sass' })
},
{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=public/fonts/[name].[ext]' },
{ test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]' },
{ test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]' }
]
},
plugins: [
new ExtractTextPlugin('main.css')
]
});
module.exports = env => [jsConfig(env), cssConfig(env)];
我还没有在网上找到任何有完全相同问题的人参考。
答案 0 :(得分：0)
我发现我的'alias'和'aliasFields'在webpack 2上引起了这个问题。
我已完全删除'aliasFields'，并使用以下内容替换'alias'：
alias: {
es6: path.resolve(__dirname, 'app/es6'),
components: path.resolve(__dirname, 'app/es6/components'),
controllers: path.resolve(__dirname, 'app/es6/controllers'),
models: path.resolve(__dirname, 'app/es6/models'),
stores: path.resolve(__dirname, 'app/es6/stores'),
reducers: path.resolve(__dirname, 'app/es6/reducers')
},
似乎可以解决问题。
但是，我仍然不确定在哪些地方找到关于这些字段的完整webpack 2文档。而且我也知道我既没有使用最好的方法来处理这些文件夹，也没有使用React-Redux项目的最佳文件夹结构。