运行节点服务器、用于 React 配置的 webpack 时出错

Question

我在过去的几个小时里一直在深入研究这个问题，但无法抓住这个错误。我遵循"关于如何使用webpack，npm和ReactJS:)创建和设置Django项目的指南">

这是我尝试时遇到的错误：node server.js

(bonchans) ➜  bonchans git:(master) ✗ node server.js                                                 
/Users/JuanPerez/Desktop/Sandbox/DEV/django+reactjs/django-react-boilerplate/bonchans/bonchans/node_modules/webpack/lib/webpack.js:19
throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
^
WebpackOptionsValidationError: Invalid configuration object. Webpack has 
been initialised using a configuration object that does not match the API schema.
- configuration.resolve has an unknown property 'modulesDirectories'. These 
properties are valid:
object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, 
descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, 
fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, 
resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
- configuration.resolve.extensions[0] should not be empty.
at webpack (/Users/JuanPerez/Desktop/Sandbox/DEV/django+reactjs/django-react-boilerplate/bonchans/bonchans/node_modules/webpack/lib/webpack.js:19:9)
at Object.<anonymous> 
(/Users/JuanPerez/Desktop/Sandbox/DEV/django+reactjs/django-react-
boilerplate/bonchans/bonchans/server.js:5:22)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:389:7)
at startup (bootstrap_node.js:149:9)
(bonchans) ➜  bonchans git:(master) ✗ 

配置文件：

---

我的package.json如下所示：

{
"name": "bonchans",
"version": "1.0.0",
"description": "",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/juanto85/bonchans.git"
},
"author": "Juan Perez",
"license": "ISC",
"bugs": {
"url": "https://github.com/juanto85/bonchans/issues"
},
"homepage": "https://github.com/juanto85/bonchans#readme",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"react": "^15.6.1",
"react-hot-loader": "^1.3.1",
"webpack": "^3.5.5",
"webpack-bundle-tracker": "^0.2.0",
"webpack-dev-server": "^2.7.1"
}
"scripts": {
"build": "webpack --config webpack.config.js --progress --colors",
"build-production": "webpack --config webpack.prod.config.js --progress --colors",
"watch": "node server.js"
}
}

我的webpack.config.js如下所示：

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
context: __dirname,
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./apps/static/js/index'
],
output: {
path: path.resolve('./apps/static/bundles/'),
filename: '[name]-[hash].js',
publicPath: 'http://localhost:3000/static/bundles/', // Tell django to use this URL to load packages and not use STATIC_URL + bundle_name
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(), // don't reload if there is an error
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
loaders: [
// we pass the output from babel loader to react-hot loader
{ test: /.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel'], },
],
},
resolve: {

modulesDirectories: ['node_modules', 'bower_components'],
extensions: ['', '.js', '.jsx']
}
}

server.js看起来像这样：

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.config')
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
inline: true,
historyApiFallback: true
}).listen(3000, '0.0.0.0', function (err, result) {
if (err) {
console.log(err)
}
console.log('Listening at 0.0.0.0:3000')
})

Answer 1

从package.json我可以看到您使用的是 webpack v3，但您使用的配置适用于 webpack v1。我建议您首先尝试使其仅与 webpack v1 一起使用，一旦您有了工作设置，您就可以迁移到 webpack v2/3。

我可以从您共享的配置中看到一些更改，以使它与 webpack v2/3 一起工作：

a. 首先删除扩展中的空字符串。

resolve: {
extensions: ['.js', '.jsx']
}
}

b.将loaders更改为rules，并且由于删除了自动-loader模块名称扩展名，因此您必须添加带有加载器名称的-loader，在这里您必须将babel更改为babel-loader。

module: {
rules: [
{ 
test: /.jsx?$/,
exclude: /node_modules/,
use: ['react-hot-loader', 'babel-loader'],
},
],
},

Answer 2

这个错误实际上很有帮助configuration.resolve has an unknown property 'modulesDirectories'

然后它告诉你有什么可用These properties are valid: object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }

所以，你的问题出在那个讨厌的人身上

modulesDirectories: ['node_modules', 'bower_components'],
extensions: ['', '.js', '.jsx']

在你的 webpack.config 中。

回顾一下你的教程，看看他们是如何做到这一点的。对不起，我不能更具体，但我希望这有助于为您指明正确的方向。干杯

Answer 3

将 webpack v1 配置迁移到 webpack v2/3 时对我有用的一些更改

module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
use: [
{loader: 'react-hot-loader'},
{loader: 'babel-loader'},
],
},
],
},
resolve: {
extensions: ['.js', '.jsx']
},
resolveLoader: {
modules: ['node_modules', 'bower_components'],
},

更多信息 ： https://webpack.js.org/guides/migrating/

Answer 4

在为此挣扎了几个小时之后，我让它与当前版本一起使用(webpack 3.8 react 16(。通过删除我的node_modules然后运行

npm install --save-dev react react-dom webpack webpack-bundle-tracker babel-loader babel-core babel-preset-react babel-preset-es2015

我的webpack.config.js看起来像

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
context: __dirname,
entry: './assets/js/index',
output: {
path: path.resolve('./server/static/bundles/'),
filename: "[name]-[hash].js",
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
rules: [{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react'],
},
},
}],
},
resolve: {
extensions: ['.js', '.jsx']
},
resolveLoader: {
modules: ['node_modules', 'bower_components'],
},
}

并将您的index.jsx与您的代码放在./assets/js/index.jsx

var ReactDOM = require('react-dom');
var React = require('react');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

希望对您有所帮助！