我有一个react js应用程序,我试图实现webpack来创建一个构建并将其部署到IIS。
当我尝试使用webpack构建应用程序时,我得到了下面的错误:
C:\webpackProj>npm run build
> [email protected] build
> webpack --mode development
[webpack-cli] TypeError: Cannot read property 'getArguments' of undefined
at WebpackCLI.getBuiltInOptions (C:\webpackProj\node_modules\webpack-cli\lib\webpack-cli.js:755:63)
at makeCommand.options.entry (C:\webpackProj\node_modules\webpack-cli\lib\webpack-cli.js:880:32)
at async WebpackCLI.makeCommand (C:\webpackProj\node_modules\webpack-cli\lib\webpack-cli.js:395:31)
at async loadCommandByName (C:\webpackProj\node_modules\webpack-cli\lib\webpack-cli.js:876:17)
at async Command.<anonymous> (C:\webpackProj\node_modules\webpack-cli\lib\webpack-cli.js:1272:17)
at async Command.parseAsync (C:\webpackProj\node_modules\webpack-cli\node_modules\commander\lib\command.js:935:5)
at async WebpackCLI.run (C:\webpackProj\node_modules\webpack-cli\lib\webpack-cli.js:1296:9)
at async runCLI (C:\webpackProj\node_modules\webpack-cli\lib\bootstrap.js:9:9)
字符串
Package.json文件
{
"name": "webpackProj",
"version": "10.4.0",
"private": true,
"dependencies": {
"@ag-grid-enterprise/all-modules": "^25.3.0",
"@ag-grid-enterprise/rich-select": "^25.1.0",
"@aspnet/signalr": "^1.1.4",
"@babel/runtime": "^7.21.0",
"@emotion/core": "^10.1.1",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.15",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@microsoft/signalr": "^3.1.18",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"ag-grid-autocomplete-editor": "^2.2.1",
"ag-grid-community": "^25.1.0",
"ag-grid-enterprise": "^25.1.0",
"ag-grid-react": "^25.1.0",
"apexcharts": "^3.28.1",
"axios": "^0.21.4",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.6.0",
"browserslist": "^4.17.0",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"classnames": "^2.2.6",
"css-loader": "^6.7.3",
"d3": "^6.7.0",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"env-cmd": "^10.1.0",
"file-loader": "^6.2.0",
"html-loader": "^4.2.0",
"html-to-draftjs": "^1.5.0",
"html-webpack-plugin": "^5.5.0",
"jquery": "^3.6.0",
"jquery-mask-plugin": "^1.14.16",
"jquery-ui": "^1.12.1",
"js2xmlparser": "^4.0.1",
"moment": "^2.29.1",
"multiselect-react-dropdown": "^1.7.0",
"node-sass": "^4.14.1",
"npx": "^10.2.2",
"prop-types": "^15.7.2",
"react": "^18.2.0",
"react-apexcharts": "^1.3.9",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "^1.6.3",
"react-bootstrap-typeahead": "^5.2.0",
"react-calendar-heatmap": "^1.8.1",
"react-cookie": "^4.1.1",
"react-copy-to-clipboard": "^5.0.4",
"react-datepicker": "^3.8.0",
"react-dom": "^18.2.0",
"react-draft-wysiwyg": "^1.15.0",
"react-draggable": "^4.4.4",
"react-dropdown-select": "^4.7.4",
"react-items-carousel": "^2.8.0",
"react-loadable": "^5.5.0",
"react-loader-spinner": "^3.1.14",
"react-loading-screen": "0.0.17",
"react-multi-select-component": "^3.1.7",
"react-picky": "^5.3.2",
"react-radio-buttons": "^1.2.2",
"react-redux": "^7.2.5",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-scripts": "3.4.1",
"react-spinners": "^0.9.0",
"react-sweet-progress": "^1.1.2",
"react-toastify": "^6.2.0",
"react-tooltip": "^4.2.21",
"reactstrap": "^8.10.0",
"redux": "^4.1.1",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"sass-loader": "^13.2.0",
"save": "^2.4.0",
"style-loader": "^3.3.1",
"sweetalert2": "^9.17.2"
},
"scripts": {
"start": "react-scripts start",
"build": "webpack --mode development",
"build:development": "env-cmd -f .env.development react-scripts build",
"build:qa": "env-cmd -f .env.qa react-scripts build",
"build:uat": "env-cmd -f .env.uat react-scripts build",
"build:production": "env-cmd -f .env.production react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.21.0",
"@babel/plugin-transform-runtime": "^7.21.0",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^8.1.0",
"redux-devtools-extension": "^2.13.9",
"webpack": "^4.42.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^3.10.3"
}
}
型
Webpack.config文件
const port = process.env.PORT || 8080;
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.export = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'main.[hash].js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
},
{
test: /\.html$/,
use: {
loader: "html-loader"
}
},
{
test: /\.(svg|png)$/,
use: {
loader: "file-loader",
options: {
name: '[name].[hash].[ext]',
outputPath: 'images'
}
}
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './public/index.html'
})
],
devServer: {
host: 'localhost',
port: port,
historyApiFallback: true,
open: true
}
}
型
.babelrc文件
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
["@babel/transform-runtime"]
]
}
型
我错过了什么?
1条答案
按热度按时间2jcobegt1#
Marik Ishtar上面的回复对我很有用。我从当前的webpack-software版本降级到了3.3.0版本。
字符串