Use mini-css-extract instead of extract-text-plugin

Author: diondirza

internal/webpack/configFactory.js

@@ -1,6 +1,6 @@
 import appRootDir from 'app-root-dir';
 import AssetsPlugin from 'assets-webpack-plugin';
-import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
 import nodeExternals from 'webpack-node-externals';
 import path from 'path';
@@ -66,6 +66,9 @@ export default function webpackConfigFactory(buildOptions) {
   let webpackConfig = {
     // Webpack Mode
     mode: ifDev('development', 'production'),
+    // Add context for resolving entry points and loaders from configuration
+    // it is recommended to define the context
+    context: appRootDir.get(),
     // Define our entry chunks for our bundle.
     entry: {
       // We name our entry files "index" as it makes it easier for us to
@@ -331,9 +334,9 @@ export default function webpackConfigFactory(buildOptions) {
       // CSS files.
       ifProdClient(
         () =>
-          new ExtractTextPlugin({
-            filename: '[name]-[contenthash].css',
-            allChunks: true,
+          new MiniCssExtractPlugin({
+            filename: '[name]-[chunkhash].css',
+            chunkFilename: '[name]-[chunkhash].css',
           }),
       ),
 
@@ -484,16 +487,13 @@ export default function webpackConfigFactory(buildOptions) {
                 // an ExtractTextPlugin instance.
                 // Note: The ExtractTextPlugin needs to be registered within the
                 // plugins section too.
-                ifProdClient(() => ({
-                  loader: ExtractTextPlugin.extract({
-                    fallback: 'style-loader',
-                    use: ['css-loader'],
-                  }),
-                })),
+                ifProdClient({
+                  use: [MiniCssExtractPlugin.loader, 'css-loader'],
+                }),
                 // When targetting the server we use the "/locals" version of the
                 // css loader, as we don't need any css files for the server.
                 ifNode({
-                  loaders: ['css-loader/locals'],
+                  use: ['css-loader/locals'],
                 }),
               ),
             ),

package-lock.json

@@ -111,7 +111,6 @@
     "eslint-plugin-import": "2.9.0",
     "eslint-plugin-jsx-a11y": "6.0.3",
     "eslint-plugin-react": "7.7.0",
-    "extract-text-webpack-plugin": "4.0.0-beta.0",
     "file-loader": "1.1.11",
     "glob": "7.1.2",
     "happypack": "5.0.0-beta.1",
@@ -122,6 +121,7 @@
     "jest": "22.4.2",
     "lint-staged": "7.0.0",
     "md5": "2.2.1",
+    "mini-css-extract-plugin": "0.2.0",
     "modernizr-loader": "1.0.1",
     "node-notifier": "5.2.1",
     "prettier": "1.11.1",
@@ -133,7 +133,7 @@
     "request": "2.85.0",
     "rimraf": "2.6.2",
     "semver": "5.5.0",
-    "source-map-support": "0.5.3",
+    "source-map-support": "0.5.4",
     "style-loader": "0.20.3",
     "webpack": "4.1.1",
     "webpack-bundle-analyzer": "2.11.1",

package.json

@@ -1,6 +1,8 @@
 /* eslint-disable react/no-unescaped-entities */
 import React, { Component } from 'react';
 
+import './styles.css';
+
 class CounterRoute extends Component {
   constructor(props) {
     super(props);
@@ -15,7 +17,7 @@ class CounterRoute extends Component {
   render() {
     return (
       <div>
-        <h3>Counter</h3>
+        <h3 className="counter__title">Counter</h3>
         <p>
           <em>
             This is a small demo component that contains state. It's useful for

shared/components/DemoApp/AsyncCounterRoute/CounterRoute.js

@@ -0,0 +1,3 @@
+.counter__title {
+  color: green;
+}