Обновление Webpack с 2.7 до 4.35 с пустой страницей IE11

Я работаю над проектом, в котором хочу обновить конфигурацию 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"
  ]
}

Новый пакет.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"
  ]
}

Я хочу иметь какую-то ошибку или что-то, чтобы сказать мне, что это использование определенной библиотеки или что-то в этом роде, я в отчаянии...

Спасибо за помощь !

Возможно, проблема с вашей настройкой babel. Я не знаком с версией 6, но я бы предложил перейти на версию 7 и использовать babeljs.io/docs/en/babel-preset-env. Похоже, вам могут не хватать полифиллов для IE 11, для которых могут потребоваться дополнительные плагины babel.

chipit24 12.07.2019 00:20

И дважды проверьте вывод консоли сборки webpack на наличие предупреждений или ошибок.

chipit24 12.07.2019 00:22

Конфигурация, которую я использую с моей текущей работой Babel с webpack 2.7. Я также пробовал babel 7 и предустановленную env, но безуспешно, без предупреждений или ошибок в webpack. И я не могу знать, отсутствует ли в IE11 какой-либо полифилл, поскольку у меня нет ошибки...

BaptisteL 12.07.2019 04:54

Пожалуйста, проверьте файл main.ts, убедитесь, что он содержит пакет babel-polyfill, и убедитесь, что он находится в верхней части точки входа, чтобы обеспечить загрузку полифилла первым. Если все еще не работает, попробуйте использовать инструменты разработчика F12, чтобы проверить, содержит ли он какую-либо ошибку?

Zhi Lv 12.07.2019 05:07

Я просто попытался начать с проекта, который работает в IE11, и просто обновил Babel до новой версии, не запуская IE11 и без ошибок...

BaptisteL 13.07.2019 02:09
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
5
636
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я решил это! Был ли вавилон неправильно настроен! Теперь это работает! Как ни странно, мне пришлось принудительно транспилировать другой пакет npm...

Другие вопросы по теме