I'm having an odd issue since upgrading to Webpack 4 and babel-preset-env. When I remove es2015 as a preset it doesn't separate the css. Everything else compiles as normal, but no css file unless I include that preset.
My .babelrc file:
{
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"useBuiltIns": "usage",
"targets": "> 5%, last 2 versions",
"forceAllTransforms": true
}
],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-object-rest-spread",
["@babel/plugin-proposal-decorators", { "legacy": true, "decoratorsLegacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true}],
[
"module-resolver",
{
"root": [
"./src"
]
}
]
],
"env": {
"development": {
"plugins": [
"react-hot-loader/babel"
]
},
"production": {
"plugins": [
"transform-imports"
]
}
}
}
My webpack config:
module.exports = {
mode: 'production',
entry: ['babel-polyfill', path.resolve(__dirname,'./src/index.js')],
output: {
chunkFilename: '[name].[chunkhash:4].bundle.js',
filename: '[name].[chunkhash:4].bundle.js',
publicPath: '/'
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new CleanWebpackPlugin(['dist/']),
new webpack.optimize.ModuleConcatenationPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[contenthash:4].css'
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: [path.resolve(__dirname, './node_modules/')],
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: false }
}
]
},
{
test: /\.(sass|scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
includePaths: ['./node_modules'],
sourceMap: true
}
}
]
}
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
keep_fnames: true,
keep_classnames: true,
compress: {
dead_code: true,
drop_console: true
},
mangle: {
keep_fnames: true
}
},
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({})
],
runtimeChunk: false,
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
},
commons: {
test: /[\\/]node_modules[\\/].*js/,
name: 'vendor',
chunks: 'all',
minChunks: 2
}
},
chunks: 'all'
}
}
};
I could leave it alone, but including es2015 is preventing proper chunks from being created as well.