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

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.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",

shared/components/DemoApp/AsyncCounterRoute/CounterRoute.js

@@ -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/styles.css

@@ -0,0 +1,3 @@
+.counter__title {
+ color: #9b4dca;
+}