mini-css-extract-plugin VS babel-loader

mini-css-extract-plugin

In my production file I'm using mini-css-extract-plugin to create a final css file rather than have them loaded in my bundle.js file.

The css webpack extract plugin gets 12 million downloads per week https://www.npmjs.com/package/mini-css-extract-plugin

This shouldn't be the case, at least not if you're doing it "properly". For dev builds, sure, but for production, it's better to use something like mini-css-extract-plugin to extract the bundled CSS into separate files. Then for files in your main entrypoint, the CSS will be loaded via tags, and files loaded via code-splitting, the tags will be added to the DOM dynamically.

Since I'm using Webpack 4, I am also using mini-css-extract-plugin. I started down the path of creating a splitChunks in my webpack config.

When in Webpack entry are defined style files like SCSS/SASS and used the mini-css-extract-plugin then will be generated unexpected empty js files.

According to its Github page this is deprecated and you should use this instead https://github.com/webpack-contrib/mini-css-extract-plugin

npm WARN deprecated [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin

If you have a webpack configuration for production then you'll need a different configuration for using CSS. At first, install mini-css-extract-plugin

babel-loader

Uncaught TypeError: Object.assign is not a function I'm already using babel-loader to transpile ES6 to ES5, so all my other ES6 code is working. Yet, Object.assign() only works after I also import "babel-core/polyfill" in my codebase. I see that I can also fix this by importing babel-runtime, but I'd like to understand why Object.assign() requires more than what babel-loader performs — shouldn't babel-loader preprocess everything, including Object.assign()?

It looks like this may be an old version of webpack according to [this GitHub issue](https://github.com/babel/babel-loader/issues/798).

And babel/webpack seems to get upset at re-exporting things that don't exist at runtime (types and interfaces): https://github.com/babel/babel-loader/issues/603. So, you need to be careful to re-export your types with a different syntax, which is hard to remember when you're writing a file full of export * from 'foo'.

Apparently, this is usually a problem with Babel 7 and plugins but I've upgraded the plugins and still have this issue: https://github.com/babel/babel-loader/issues/560

There are many ways to integrate TypeScript with an existing Webpack configuration. If you use the babel-loader package to transpile JavaScript files, you can add the @babel/preset-typescript preset to generate JavaScript files and the Fork TS Checker Webpack Plugin package to run the TypeScript type checker so that the build fails if there are type errors.