Drop extract-text for mini-css. Bump start-server (no more refreshes)

jaredpalmer · Mar 26, 2018 · c185707 · c185707
1 parent cb99cf0
commit c185707
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 185 deletions.
diff --git a/packages/razzle/config/createConfig.js b/packages/razzle/config/createConfig.js
@@ -6,12 +6,11 @@ const webpack = require('webpack');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
 const AssetsPlugin = require('assets-webpack-plugin');
-const ManifestPlugin = require('webpack-manifest-plugin');
 const StartServerPlugin = require('start-server-webpack-plugin');
 const FriendlyErrorsPlugin = require('razzle-dev-utils/FriendlyErrorsPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const autoprefixer = require('autoprefixer');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const paths = require('./paths');
 const getClientEnv = require('./env').getClientEnv;
 const nodePath = require('./env').nodePath;
@@ -206,23 +205,21 @@ module.exports = (
  options: postCssOptions,
  },
  ]
- : ExtractTextPlugin.extract({
- fallback: require.resolve('style-loader'),
- use: [
- {
- loader: require.resolve('css-loader'),
- options: {
- importLoaders: 1,
- modules: false,
- minimize: true,
- },
- },
- {
- loader: require.resolve('postcss-loader'),
- options: postCssOptions,
+ : [
+ MiniCssExtractPlugin.loader,
+ {
+ loader: require.resolve('css-loader'),
+ options: {
+ importLoaders: 1,
+ modules: false,
+ minimize: true,
  },
- ],
- }),
+ },
+ {
+ loader: require.resolve('postcss-loader'),
+ options: postCssOptions,
+ },
+ ],
  },
  // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
  // using the extension .module.css
@@ -258,29 +255,22 @@ module.exports = (
  options: postCssOptions,
  },
  ]
- : ExtractTextPlugin.extract({
- fallback: {
- loader: require.resolve('style-loader'),
+ : [
+ MiniCssExtractPlugin.loader,
+ {
+ loader: require.resolve('css-loader'),
  options: {
- hmr: false,
+ modules: true,
+ importLoaders: 1,
+ minimize: true,
+ localIdentName: '[path]__[name]___[local]',
  },
  },
- use: [
- {
- loader: require.resolve('css-loader'),
- options: {
- modules: true,
- importLoaders: 1,
- minimize: true,
- localIdentName: '[path]__[name]___[local]',
- },
- },
- {
- loader: require.resolve('postcss-loader'),
- options: postCssOptions,
- },
- ],
- }),
+ {
+ loader: require.resolve('postcss-loader'),
+ options: postCssOptions,
+ },
+ ],
  },
  ],
  },
@@ -462,7 +452,7 @@ module.exports = (
  // Define production environment vars
  new webpack.DefinePlugin(dotenv.stringified),
  // Extract our CSS into a files.
- new ExtractTextPlugin({
+ new MiniCssExtractPlugin({
  filename: 'static/css/bundle.[contenthash:8].css',
  // allChunks: true because we want all css to be included in the main
  // css bundle when doing code splitting to avoid FOUC:

diff --git a/packages/razzle/package.json b/packages/razzle/package.json
@@ -37,35 +37,34 @@
  "babel-loader": "7.1.1",
  "babel-preset-razzle": "^2.0.0-alpha.3",
  "chalk": "1.1.3",
- "css-loader": "0.28.4",
+ "css-loader": "0.28.11",
  "dotenv": "4.0.0",
  "eslint": "4.5.0",
- "eslint-config-react-app": "^2.0.0",
- "eslint-loader": "2.0.0",
- "eslint-plugin-flowtype": "2.35.0",
- "eslint-plugin-import": "2.7.0",
- "eslint-plugin-jsx-a11y": "5.1.1",
- "eslint-plugin-react": "7.3.0",
- "extract-text-webpack-plugin": "4.0.0-beta.0",
- "file-loader": "1.1.10",
+ "eslint-config-react-app": "^2.1.0",
+ "eslint-loader": "^2.0.0",
+ "eslint-plugin-flowtype": "^2.35.0",
+ "eslint-plugin-import": "^2.7.0",
+ "eslint-plugin-jsx-a11y": "^5.1.1",
+ "eslint-plugin-react": "^7.3.0",
+ "file-loader": "1.1.11",
  "fs-extra": "3.0.1",
  "jest": "20.0.4",
+ "mini-css-extract-plugin": "^0.2.0",
  "object-assign": "^4.1.1",
- "postcss-flexbugs-fixes": "3.0.0",
- "postcss-loader": "^2.0.6",
+ "postcss-flexbugs-fixes": "3.3.0",
+ "postcss-loader": "^2.1.3",
  "promise": "^8.0.1",
  "raf": "^3.4.0",
  "razzle-dev-utils": "^2.0.0-alpha.3",
  "react-dev-utils": "^4.0.0",
  "react-error-overlay": "^2.0.0",
- "start-server-webpack-plugin": "2.2.0",
- "style-loader": "0.18.2",
+ "start-server-webpack-plugin": "2.2.5",
+ "style-loader": "0.20.3",
  "thread-loader": "1.1.5",
- "uglifyjs-webpack-plugin": "1.2.2",
- "url-loader": "0.5.9",
+ "uglifyjs-webpack-plugin": "1.2.4",
+ "url-loader": "^1.0.1",
  "webpack": "^4.2.0",
  "webpack-dev-server": "3.0.0",
- "webpack-manifest-plugin": "andriijas/webpack-manifest-plugin#master",
  "webpack-node-externals": "1.6.0",
  "whatwg-fetch": "^2.0.3"
  }