我正在一个项目中,我想将Webpack 2.7配置更新到较新的4.35,以进行优化和清理。 我从头开始重建配置,可以在所有浏览器(Firefox,Chrome,Edge)上运行,但不能在IE11上运行。 控制台没有错误,空白页。
我正在使用SASS,SCSS,CSS,JS和Vue
我尝试使用以前的配置,但是我必须更新许多内容,最终无法编译。 我尽量不升级每个软件包,而只升级Webpack和出于兼容性目的而需要升级的软件包。 我也已经尝试过Vue-CLI,因为它是Vue项目,但存在相同的问题。我需要重写每个预定义的配置以适合我的项目...
先前的package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
},
"dependencies": {
"@mdi/font": "^3.2.89",
"@progress/kendo-dateinputs-vue-wrapper": "^2018.3.1025",
"@progress/kendo-inputs-vue-wrapper": "^2018.3.1025",
"@progress/kendo-popups-vue-wrapper": "^2018.3.1025",
"@progress/kendo-theme-bootstrap": "^2.18.0",
"@progress/kendo-ui": "^2018.3.1219",
"@progress/kendo-validator-vue-wrapper": "^2018.3.1025",
"animate.css": "^3.5.2",
"axios": "^0.18.0",
"axios-retry": "^3.1.2",
"babel-polyfill": "^6.26.0",
"block-ui": "^2.70.1",
"bootstrap": "^4.1.1",
"bootstrap-vue": "^2.0.0-rc.21",
"chart.piecelabel.js": "^0.11.0",
"country-region-data": "^1.4.5",
"emitter-io": "^1.25.0",
"es6-promise": "^4.2.4",
"fast-json-patch": "^2.0.6",
"font-awesome": "^4.7.0",
"fs": "0.0.1-security",
"inputmask": "^4.0.0",
"intersection-observer": "^0.5.0",
"jquery": "^3.2.1",
"jsplumb": "^2.8.8",
"lodash": "^4.17.11",
"moment-timezone": "^0.5.20",
"oidc-client": "^1.6.1",
"progress-tracker": "^1.4.0",
"rgbcolor": "^1.0.1",
"stackblur": "^1.0.0",
"svg.js": "^2.6.5",
"uuid": "^3.3.2",
"vee-validate": "^2.2.8",
"vue": "^2.6.8",
"vue-axios": "^2.1.4",
"vue-chartjs": "^3.3.2",
"vue-clickaway": "^2.2.2",
"vue-cropperjs": "^2.2.2",
"vue-i18n": "^7.8.1",
"vue-js-toggle-button": "^1.3.2",
"vue-loading": "^0.1.4",
"vue-lodash": "^2.0.0",
"vue-multiselect": "^2.1.6",
"vue-observe-visibility": "^0.4.3",
"vue-router": "^3.0.1",
"vue-session": "^1.0.0",
"vue-swatches": "^1.0.3",
"vue-tippy": "^2.1.0",
"vue2-dropzone": "^3.5.2",
"vuedraggable": "^2.16.0",
"vuejs-datepicker": "git+https://github.com/brurubio/vuejs-datepicker.git#build",
"vuejs-jwt": "^1.1.0",
"vuex": "^3.0.1",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"autoprefixer": "^7.2.6",
"babel-core": "^6.26.3",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.4.1",
"connect-history-api-fallback": "^1.5.0",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^2.3.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.3",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^2.0.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.19.1",
"node-sass": "^4.11.0",
"opn": "^5.3.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.4.0",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.7",
"sass-resources-loader": "^1.3.3",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"svg-inline-loader": "^0.8.0",
"url-loader": "^1.1.1",
"vue-loader": "^13.7.1",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.6.8",
"webpack": "^2.7.0",
"webpack-bundle-analyzer": "^2.11.3",
"webpack-dev-middleware": "^1.12.2",
"webpack-hot-middleware": "^2.22.2",
"webpack-merge": "^4.1.2"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
新package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"private": true,
"scripts": {
"dev": "node --max_old_space_size=8192 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config webpack.dev.js --open --display-error-details",
"start": "node --max_old_space_size=8192 ./node_modules/webpack/bin/webpack.js build/dev-server.js",
"build": "webpack --config webpack.prod.js --mode production",
"lint": "eslint --fix --ext .js,.vue src"
},
"dependencies": {
"@mdi/font": "^3.2.89",
"@progress/kendo-dateinputs-vue-wrapper": "^2018.3.1025",
"@progress/kendo-inputs-vue-wrapper": "^2018.3.1025",
"@progress/kendo-popups-vue-wrapper": "^2018.3.1025",
"@progress/kendo-theme-bootstrap": "^2.18.0",
"@progress/kendo-ui": "^2018.3.1219",
"@progress/kendo-validator-vue-wrapper": "^2018.3.1025",
"animate.css": "^3.5.2",
"axios": "^0.18.0",
"axios-retry": "^3.1.2",
"babel-polyfill": "^6.26.0",
"block-ui": "^2.70.1",
"bootstrap": "^4.1.1",
"bootstrap-vue": "^2.0.0-rc.21",
"chart.piecelabel.js": "^0.11.0",
"country-region-data": "^1.4.5",
"emitter-io": "^1.25.0",
"es6-promise": "^4.2.4",
"fast-json-patch": "^2.0.6",
"font-awesome": "^4.7.0",
"inputmask": "^4.0.0",
"intersection-observer": "^0.5.0",
"jquery": "^3.2.1",
"jsplumb": "^2.8.8",
"lodash": "^4.17.11",
"moment-timezone": "^0.5.20",
"oidc-client": "^1.6.1",
"progress-tracker": "^1.4.0",
"regenerator-runtime": "^0.13.2",
"svg.js": "^2.6.5",
"uuid": "^3.3.2",
"vee-validate": "^2.2.8",
"vue": "^2.6.8",
"vue-axios": "^2.1.4",
"vue-chartjs": "^3.3.2",
"vue-clickaway": "^2.2.2",
"vue-cropperjs": "^2.2.2",
"vue-i18n": "^7.8.1",
"vue-js-toggle-button": "^1.3.2",
"vue-loading": "^0.1.4",
"vue-lodash": "^2.0.0",
"vue-multiselect": "^2.1.6",
"vue-observe-visibility": "^0.4.3",
"vue-router": "^3.0.1",
"vue-session": "^1.0.0",
"vue-swatches": "^1.0.3",
"vue-tippy": "^2.1.0",
"vue2-dropzone": "^3.5.2",
"vuedraggable": "^2.16.0",
"vuejs-datepicker": "git+https://github.com/brurubio/vuejs-datepicker.git#build",
"vuejs-jwt": "^1.1.0",
"vuex": "^3.0.1",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"autoprefixer": "^7.2.6",
"babel-core": "^6.26.3",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.4.1",
"clean-webpack-plugin": "^3.0.0",
"connect-history-api-fallback": "^1.5.0",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^2.2.1",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^2.3.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.3",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^2.0.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"http-proxy-middleware": "^0.19.1",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.11.0",
"opn": "^5.3.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.4.0",
"postcss-loader": "^3.0.0",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.7",
"sass-resources-loader": "^1.3.5",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"style-loader": "^0.23.1",
"svg-inline-loader": "^0.8.0",
"url-loader": "^1.1.1",
"vue-loader": "^15.7.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.6.8",
"webpack": "^4.35.3",
"webpack-bundle-analyzer": "^2.11.3",
"webpack-cli": "^3.3.5",
"webpack-dev-middleware": "^1.12.2",
"webpack-dev-server": "^3.7.2",
"webpack-hot-middleware": "^2.22.2",
"webpack-merge": "^4.1.2"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
我想遇到一些错误或某些事情,以告诉我它是在使用特定的库或某些东西,我很绝望...
感谢您的帮助!
答案 0 :(得分:0)
我解决了! 通天塔配置不正确!现在可以了! 奇怪的是,我不得不强行移植另一个npm软件包...