Проведя несколько дней, пытаясь лучше понять полифиллинг и транспилинг моих активов с использованием стилей webpack 4, core-js, react-app-polyfill и postcss, мне удалось запустить приложение React, разработанное на ES6, с использованием IE как с webpack-dev-server для development, так и с webpack для production.
в дополнение к полифиллингу и транспиллингу я использую terser-webpack-plugin и optimize-css-assets-webpack-plugin для минификации.
После объединения мой js, похоже, работает: 
But if keeping the same configuration, I went to add some chunks using the SplitChunkPlugin of webpack, but it seems that react-app-polyfill is no longer considered. I can't understand if the problem is mine or something inside node_modules that is not properly polyfilled.
Result after bundle but adding splitChunks: { chunks: 'all' } on my webpack configuration file:
This is my webpack.production.config.js:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
// const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const devMode = process.env.NODE_ENV!== 'production';
const WebpackMd5Hash = require("webpack-md5-hash");
const WorkboxPlugin = require('workbox-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const globImporter = require('node-sass-glob-importer');
const CompressionPlugin = require('compression-webpack-plugin');
const MODULE_APP_JS_DIR = path.resolve(__dirname, './Scripts/js/');
const MODULE_BUILD_DIR = path.resolve(__dirname, './dist/assets/');
const config = {
mode: "production",
target: "web",
devtool: "source-map",
context: __dirname, // string (absolute path!)
entry: [
'font-awesome/scss/font-awesome.scss',
'./Scripts/js/main.js',
],
output: {
path: MODULE_BUILD_DIR,
filename: '[name].[hash].bundle.js',
chunkFilename: '[id].[hash].chunk.js',
},
optimization: {
minimizer: [
new TerserPlugin({
sourceMap: true,
cache: false,
parallel: true,
terserOptions: {
mangle: true,
ecma: undefined,
unused: true,
warnings: false,
compress: {
warnings: false,
unused: true,
},
},
}),
new OptimizeCSSAssetsPlugin({
sourceMap: true
}),
],
// TEST FOR QUESTION:
// splitChunks: {
// chunks: 'all'
// }
// What I was using for real:
// splitChunks: {
// chunks: 'all',
// maxSize: 1000000,
// cacheGroups: {
// commons: {
// test: /[\\/]node_modules[\\/]/,
// name: 'commons',
// filename: 'commons.[hash].js',
// chunks: 'all'
// },
// styles: {
// name: 'main',
// test: /\.(css|.s[c|a]ss)$/,
// chunks: 'all',
// enforce: true
// }
// }
// }
// },
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
enforce: "pre",
loader: "eslint-loader",
exclude: /node_modules/,
options: {
quiet: true,
emitWarning: true,
configFile: "./.eslintrc.js"
}
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/, // exclude the node_module directory
loader: 'babel-loader', // use this (babel-code) loader
},
{
test: /\.dust$/,
loader: "dust-loader-complete",
options: {
ignoreImages: true,
verbose: true,
dustAlias: 'dustjs',
root: path.resolve(__dirname, './Scripts/js/template/')
}
},
// font-awesome
{
test: /font-awesome\.config\.js/,
use: [
{ loader: 'style-loader' },
{ loader: 'font-awesome-loader' }
]
},
{
test: /\.s[c|a]ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: () => [
require('autoprefixer')({ grid: 'autoplace' })
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
importer: globImporter()
}
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(ttf|eot|woff(2)?)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
use: [{
loader: 'file-loader',
options: {
mimetype: 'application/font-woff',
name: '/Fonts/[hash].[ext]',
publicPath: '/dist/assets/',
postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
}
}]
},
{
test: /\.(jpe?g|png|gif|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
use: [
{
loader: "file-loader",
options: {
name: '/images/[hash].[ext]',
publicPath: '/dist/assets/',
postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
}
},
'image-webpack-loader?bypassOnDebug',
]
}
],
},
resolve: {
modules: [
'node_modules',
path.resolve(MODULE_APP_JS_DIR),
],
extensions: [
'.js',
'.jsx',
'.json',
'.css',
'.scss',
'.dust'
],
alias: {
dustjs: 'dustjs-linkedin',
}
},
plugins: [],
node: {
fs: 'empty'
},
};
module.exports = config;
module.exports.plugins.push(
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
path: MODULE_BUILD_DIR,
filename: './styles/[name].[contenthash].css',
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
fs: "fs"
}),
new WebpackMd5Hash(),
);
Это мой .babelrc файл конфигурации Babel:
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage", // or "entry"
"corejs": 3.6,
"debug": false
}],
"@babel/react"
],
"plugins": [
["@babel/transform-runtime", { "corejs": 3 }],
"@babel/proposal-function-bind",
"@babel/proposal-class-properties",
[ "@babel/proposal-decorators", { "legacy": true } ],
["@babel/plugin-proposal-object-rest-spread", { "useBuiltIns": true }]
]
}
И это мой package.json с моими browserlist целей:
{
"name": "bp.js",
"version": "1.0.0",
"main": "main.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --inline --progress -d --hot --config webpack.dev.config.js --watch",
"build": "webpack -p --config webpack.config.js --progress"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/plugin-proposal-do-expressions": "^7.5.0",
"@babel/plugin-proposal-export-default-from": "^7.5.2",
"@babel/plugin-proposal-export-namespace-from": "^7.5.2",
"@babel/plugin-proposal-function-bind": "^7.2.0",
"@babel/plugin-proposal-function-sent": "^7.5.0",
"@babel/plugin-proposal-json-strings": "^7.2.0",
"@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
"@babel/plugin-proposal-numeric-separator": "^7.2.0",
"@babel/plugin-proposal-object-rest-spread": "^7.5.5",
"@babel/plugin-proposal-optional-chaining": "^7.2.0",
"@babel/plugin-proposal-pipeline-operator": "^7.5.0",
"@babel/plugin-proposal-throw-expressions": "^7.2.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-syntax-import-meta": "^7.2.0",
"@babel/plugin-transform-object-assign": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-0": "^7.0.0",
"@babel/preset-stage-2": "^7.0.0",
"@babel/types": "^7.5.5",
"@fullhuman/postcss-purgecss": "^2.3.0",
"autodll-webpack-plugin": "^0.4.2",
"autoprefixer": "^9.6.1",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"compression-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^5.0.4",
"css-loader": "^3.1.0",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-loader": "^2.2.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.3",
"file-loader": "^4.1.0",
"font-awesome-loader": "^1.0.2",
"html-webpack-plugin": "^3.2.0",
"imports-loader": "^0.8.0",
"json-loader": "^0.5.7",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"node-sass-glob-importer": "^5.3.2",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-loader": "^3.0.0",
"precss": "^4.0.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.1.3",
"url-loader": "^2.1.0",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2",
"webpack-disk-plugin": "^0.0.2",
"workbox-webpack-plugin": "^4.3.1",
"write-file-webpack-plugin": "^4.5.0"
},
"dependencies": {
"@ant-design/icons": "^4.1.0",
"@fortawesome/fontawesome-svg-core": "^1.2.27",
"@fortawesome/free-solid-svg-icons": "^5.12.1",
"@fortawesome/react-fontawesome": "^0.1.8",
"@progress/kendo-ui": "2018.2.620",
"antd": "^4.2.2",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"classnames": "^2.2.6",
"core-js": "^3.6.5",
"dust-loader-complete": "^4.1.2",
"dustjs-linkedin": "^2.7.5",
"ekko-lightbox": "^5.3.0",
"font-awesome": "^4.7.0",
"glyphicons": "^0.2.0",
"image-webpack-loader": "^5.0.0",
"immutability-helper": "^3.0.1",
"jquery": "^3.4.1",
"jquery-validate": "^2.0.0",
"jquery-validation-unobtrusive": "^3.2.11",
"lightbox-react": "^0.3.7",
"lodash": "^4.17.15",
"material-icons": "^0.3.1",
"modernizr": "^3.7.1",
"moment": "^2.24.0",
"moment-timezone": "^0.5.28",
"numeral": "^2.0.6",
"path": "^0.12.7",
"popper.js": "^1.15.0",
"postcss-grid": "^2.0.0",
"prop-types": "^15.7.2",
"rc-input-number": "^4.6.1",
"react": "^16.8.6",
"react-addons-css-transition-group": "^15.6.2",
"react-alert": "^6.0.0",
"react-alert-template-basic": "^1.0.0",
"react-alert-template-oldschool-dark": "^1.0.1",
"react-alice-carousel": "^1.15.2",
"react-app-polyfill": "^1.0.6",
"react-back-to-top-button": "^0.0.14",
"react-bootstrap": "^1.0.0-beta.12",
"react-bootstrap-modal": "^4.2.0",
"react-calendar": "^2.19.0",
"react-checkbox-tree": "^1.5.1",
"react-compose": "^2.0.0",
"react-confirm-alert": "^2.6.1",
"react-country-region-selector": "^1.4.3",
"react-crud-admin": "^1.0.48",
"react-css-modules": "^4.7.11",
"react-datepicker": "^3.0.0",
"react-datetime-picker": "^2.9.0",
"react-dnd": "^9.3.2",
"react-dnd-html5-backend": "^9.3.2",
"react-dom": "^16.8.6",
"react-grid-layout": "^0.16.6",
"react-hamburger-menu": "^1.1.1",
"react-highlight-words": "^0.16.0",
"react-image-gallery": "^0.8.18",
"react-images-upload": "^1.2.7",
"react-interval": "^2.1.0",
"react-loader-spinner": "^2.3.0",
"react-loading-screen": "^0.0.17",
"react-material-icons": "^1.0.3",
"react-metismenu": "^1.4.0",
"react-modal": "^3.11.2",
"react-moment": "^0.9.7",
"react-number-format": "^4.4.1",
"react-paginate": "^6.3.0",
"react-parallax": "^2.2.0",
"react-prism": "^4.3.2",
"react-quill": "^1.3.5",
"react-redux": "^7.1.0",
"react-responsive-carousel": "^3.1.49",
"react-router-dom": "^5.0.1",
"react-scroll": "^1.7.16",
"react-scroll-parallax": "^2.1.2",
"react-scroll-up-button": "^1.6.4",
"react-select": "^3.0.4",
"react-shopping-cart": "^1.8.31",
"react-simple-lightbox": "^1.0.26",
"react-simple-tree-menu": "^1.1.15",
"react-sliding-pane": "^4.0.1",
"react-sliding-side-panel": "^1.0.12",
"react-stamp": "^0.6.0",
"react-text-input": "^0.0.8",
"react-text-truncate": "^0.14.1",
"react-toastify": "^5.5.0",
"react-toggle-switch": "^3.0.4",
"react-transition-group": "^4.3.0",
"react-vertical-timeline": "^0.2.0",
"react-virtualized": "^9.21.1",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"regenerator-runtime": "^0.13.5",
"reqwest": "^2.0.5",
"rfs": "^8.0.4",
"sass-loader": "^7.1.0",
"styled-components": "^5.0.1",
"terser-webpack-plugin": "^2.0.1",
"toastr": "^2.1.4",
"typeface-roboto": "0.0.75",
"uuid": "^7.0.1",
"validator": "^12.2.0",
"video-react": "^0.14.1",
"webpack-md5-hash": "^0.0.6"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie 9",
"ie 10",
"ie 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 9",
"ie 10",
"ie 11"
]
},
"engine": {
"node": ">=10"
}
}
Это мой файл записи (main. js), где я вызываю react-app-polyfill в первой строке как написано в документации:
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
// import $ from 'jquery';
import 'bootstrap';
import '../../scss/main.scss';
import './libs/commons/KendoGrid';
import initVideo from './libs/commons/video';
import initKendo from './libs/commons/initKendo';
import './libs/commons/tree';
import { loadDialog } from './libs/commons/commons';
import configInitNavLightbox from './libs/commons/NavBarLightbox';
import registerNumeral from './libs/commons/registerNumeral';
// import loginPopup from './libs/commons/login';
import welcomwelandingConfig from './libs/configpages/frontend/welcomelanding/index';
import homeConfig from './libs/configpages/frontend/home/index';
import configLoginPage from './libs/configpages/frontend/login/index';
global.jQuery = require('jquery');
global.$ = require('jquery');
// some other code...
Кто-то может знать, почему, если я объединяю производящие блоки, он скрывает React?