无法 运行 React-Redux 项目。 Webpack 错误
Unable to run the React-Redux project. Webpack error
$ npm start
「wds」:无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。
- configuration.resolve 有一个未知的 属性 'modulesDirectories'。这些属性是有效的:
对象 { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?,符号链接?,unsafeCache?,useSyncFileSystemCalls? }
-> 解析器的选项
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
resolve: {
extensions: ['.js', '.jsx', '.css'],
modulesDirectories: [
'node_modules'
]
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader'
},
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html'
})],
devServer: {
historyApiFallback: true
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:4000'
})
}
}
package.json
{
"name": "react-redux-registration-login-example",
"version": "1.0.0",
"repository": {
"type": "git",
"url": "https://github.com/cornflourblue/react-redux-registration-login-example.git"
},
"license": "MIT",
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --open"
},
"dependencies": {
"axios": "^0.19.0",
"history": "^4.6.3",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.2",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"semantic-ui-react": "^0.88.1",
"style-loader": "^1.0.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"path": "^0.12.7",
"webpack": "^4.41.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.3"
}
}
如警告所述,resolve.modulesDirectories
不是有效的 属性。它是 Webpack 版本 1 中的一个选项,但自版本 2 以来已重命名为 resolve.modules
.
因此将您的配置更改为:
resolve: {
extensions: ['.js', '.jsx', '.css'],
modules: [
'node_modules'
]
},
参见:https://webpack.js.org/migrate/3/
resolve.root
, resolve.fallback
, resolve.modulesDirectories
These options were replaced by a single option resolve.modules. See resolving for more usage.
$ npm start
「wds」:无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。 - configuration.resolve 有一个未知的 属性 'modulesDirectories'。这些属性是有效的: 对象 { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?,符号链接?,unsafeCache?,useSyncFileSystemCalls? } -> 解析器的选项
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
resolve: {
extensions: ['.js', '.jsx', '.css'],
modulesDirectories: [
'node_modules'
]
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader'
},
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html'
})],
devServer: {
historyApiFallback: true
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:4000'
})
}
}
package.json
{
"name": "react-redux-registration-login-example",
"version": "1.0.0",
"repository": {
"type": "git",
"url": "https://github.com/cornflourblue/react-redux-registration-login-example.git"
},
"license": "MIT",
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --open"
},
"dependencies": {
"axios": "^0.19.0",
"history": "^4.6.3",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.2",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"semantic-ui-react": "^0.88.1",
"style-loader": "^1.0.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"path": "^0.12.7",
"webpack": "^4.41.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.3"
}
}
如警告所述,resolve.modulesDirectories
不是有效的 属性。它是 Webpack 版本 1 中的一个选项,但自版本 2 以来已重命名为 resolve.modules
.
因此将您的配置更改为:
resolve: {
extensions: ['.js', '.jsx', '.css'],
modules: [
'node_modules'
]
},
参见:https://webpack.js.org/migrate/3/
resolve.root
,resolve.fallback
,resolve.modulesDirectories
These options were replaced by a single option resolve.modules. See resolving for more usage.