I came back to my Webpack 4 configuration and all the packages after 4 months. It always surprises me how fast a package get's updated or deprecated.
I have this problem, that I used to include the @babel/polyfill directly to the Webpack's entry => src together with my other JS and SASS source.
This is my current .babelrc file:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": "core-js@2",
"debug": false
}
]
]
}
And my Webpack's entry setting:
entry: {
src: [paths.entry.polyfill(), paths.entry.js(), paths.entry.sass()]
},
And the config where i setup all the exports:
entry: {
sass: () => path.resolve(module.exports.sass(), './style.scss'),
js: () => path.resolve(module.exports.js(), './index.js'),
polyfill: () => '@babel/polyfill'
},
My package.json with the Babel files:
"@babel/core": "^7.4.4",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"autoprefixer": "^9.4.4",
"babel-eslint": "10.0.1",
"babel-loader": "^8.0.5",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
Is there any replacement that i can use for the @babel/polyfill as of today?
I would like to keep a polyfill but replace it with the deprecated package.
Thanks!
EDIT:
JS file causing an error for some reason Arrow functions are not working in production mode only:
(() => {
// Do not remove this console log. It serves as a reminder to build in production mode.
// Building in production mode removes all console, alert and debug statements.
// NM.
console.log(
'%c Running main script in development mode.',
'color: #bada55; font-size: 12px; font-weight: 700'
);
// Add class top HTML tag if a mobile device is detected.
const primaryHTML = document.querySelector('html');
if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
)
) {
primaryHTML.classList.add('touchdevice');
}
})();
Webpack file:
require('checkenv').check();
// Webpack Setup
const { THEME_AUTHOR, THEME_NAME, HOST, PORT } = require('./env.config');
const path = require('path');
const paths = require('./paths.config');
const pkg = require('../package.json');
const webpack = require('webpack');
// Plugins
const HappyPack = require('happypack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HardSourceWebpack = require('hard-source-webpack-plugin');
const BrowserSync = require('browser-sync-webpack-plugin');
const MiniCssExtract = require('mini-css-extract-plugin');
const styleLint = require('stylelint-webpack-plugin');
const CopyWebpack = require('copy-webpack-plugin');
const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const Imagemin = require('imagemin-webpack-plugin').default;
const threadPool = HappyPack.ThreadPool({ size: 4 });
// Config utils
const { removeEmpty, getIfUtils } = require('webpack-config-utils');
const { NODE_ENV } = process.env;
const { ifProduction, ifDevelopment } = getIfUtils(NODE_ENV);
module.exports = {
target: 'web',
mode: ifDevelopment ? 'development' : 'production',
stats: {
hash: false,
version: false,
timings: false,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: false,
builtAt: false,
errorDetails: false,
entrypoints: false,
warnings: false,
publicPath: false
},
externals: {
jquery: 'jQuery'
},
optimization: {
minimize: ifProduction(true, false),
namedModules: ifDevelopment(true, false),
runtimeChunk: 'single',
noEmitOnErrors: true,
splitChunks: {
hidePathInfo: true,
chunks: 'all',
automaticNameDelimiter: '-',
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: THEME_NAME,
cacheGroups: {
style: {
enforce: true,
priority: 1
},
vendors: {
test: /[\/]node_modules[\/]/,
priority: 2,
name: 'vendors',
enforce: true,
chunks: 'all'
}
}
},
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
parallel: true,
cache: false,
warnings: false,
comments: false,
compress: {
drop_console: ifProduction(true, false)
},
output: {
comments: false
}
}
})
]
},
entry: {
src: [paths.entry.js(), paths.entry.sass()]
},
output: {
path: paths.output.base(),
filename: paths.filename.js()
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loaders: ['happypack/loader?id=js']
},
{
test: /.scss$/,
exclude: /node_modules/,
loaders: [MiniCssExtract.loader, 'happypack/loader?id=scss']
}
]
},
plugins: removeEmpty([
new CleanWebpackPlugin({
// Write Logs to Console
verbose: ifDevelopment(true, false),
// Automatically remove all unused webpack assets on rebuild
cleanStaleWebpackAssets: true,
// Do not allow removal of current webpack assets
protectWebpackAssets: false
}),
new ExtraWatchWebpackPlugin({
files: ['.stylelintrc', '.stylelintignore', '.eslintrc']
}),
new HappyPack({
id: 'js',
verbose: ifDevelopment(true, false),
threadPool: threadPool,
loaders: ['babel-loader', 'eslint-loader']
}),
new HappyPack({
id: 'scss',
verbose: ifDevelopment(true, false),
threadPool: threadPool,
loaders: [
{
loader: 'css-loader',
options: {
url: false,
modules: false
}
},
'sass-loader'
]
}),
new styleLint({
configFile: '.stylelintrc',
context: paths.sass(),
files: '**/*.s?(a|c)ss'
}),
new MiniCssExtract({
filename: paths.filename.sass()
}),
new CopyWebpack([
{
from: paths.images(),
to: paths.output.images()
}
]),
new CopyWebpack([
{
from: paths.fonts(),
to: paths.output.fonts()
}
]),
ifProduction(
new Imagemin({
test: /.(jpe?g|png|gif|svg)$/i
})
),
new HardSourceWebpack.ExcludeModulePlugin([
{
// HardSource works with mini-css-extract-plugin but due to how
// mini-css emits assets, assets are not emitted on repeated builds with
// mini-css and hard-source together. Ignoring the mini-css loader
// modules, but not the other css loader modules, excludes the modules
// that mini-css needs rebuilt to output assets every time.
test: /mini-css-extract-plugin[\/]dist[\/]loader/
},
{
test: /my-loader/,
include: path.join(__dirname, 'vendor')
}
]),
new HardSourceWebpack({
environmentHash: {
root: process.cwd(),
directories: [],
files: ['package-lock.json', 'yarn.lock']
},
info: {
mode: 'none',
level: 'debug'
},
// Clean up large, old caches automatically.
cachePrune: {
// Caches younger than `maxAge` are not considered for deletion. They must
// be at least this (default: 2 days) old in milliseconds.
maxAge: 2 * 24 * 60 * 60 * 1000,
// All caches together must be larger than `sizeThreshold` before any
// caches will be deleted. Together they must be at least this
// (default: 50 MB) big in bytes.
sizeThreshold: 50 * 1024 * 1024
}
}),
new BrowserSync(
{
proxy: HOST,
open: false,
notify: false,
port: PORT,
files: [
'wp-content/themes/**/*.css',
{
match: ['wp-content/themes/**/*.php']
}
],
snippetOptions: {
ignorePaths: ['wp-admin/**', 'wp-content/**']
}
},
{
reload: false
}
),
new FriendlyErrorsPlugin(),
// new BundleAnalyzerPlugin({
// openAnalyzer: false,
// generateStatsFile: false,
// statsOptions: {
// exclude: /node_modules/,
// errors: false,
// warnings: false,
// errorDetails: false,
// reasons: false,
// cached: false,
// cachedAssets: false
// }
// }),
new CleanTerminalPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
'process.env.VERSION': JSON.stringify(pkg.version)
}),
new webpack.optimize.OccurrenceOrderPlugin(true),
new webpack.BannerPlugin({
banner: `Copyright ${new Date().getFullYear()} ${THEME_AUTHOR} - v${
pkg.version
}`,
exclude: /(main-vendor|main-runtime).js/i
}),
ifDevelopment(new webpack.HashedModuleIdsPlugin()),
ifDevelopment(
new webpack.SourceMapDevToolPlugin({
exclude: /(main-vendor|main-runtime).js/i
})
),
ifDevelopment(
new WebpackBuildNotifierPlugin({
title: `${THEME_AUTHOR}`,
sound: false,
suppressSuccess: true
})
)
])
};
See Question&Answers more detail:<a href="
https://stackoverflow.com/questi 
