Merge pull request #51 from edx/douglashall/fix_prod_webpack_config

fix(webpack): use the appropriate css loader in prod webpack config

config/webpack.prod.config.js

@@ -4,8 +4,8 @@ const Merge = require('webpack-merge');
 const commonConfig = require('./webpack.common.config.js');
 const path = require('path');
 const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = Merge.smart(commonConfig, {
   mode: 'production',
@@ -38,29 +38,26 @@ module.exports = Merge.smart(commonConfig, {
       // increases build time.
       {
         test: /(.scss|.css)$/,
-        use: ExtractTextPlugin.extract({
-          // creates style nodes from JS strings, only used if extracting fails
-          fallback: 'style-loader',
-          use: [
-            {
-              loader: 'css-loader', // translates CSS into CommonJS
-              options: {
-                sourceMap: true,
-                minimize: true,
-              },
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader', // translates CSS into CommonJS
+            options: {
+              sourceMap: true,
+              minimize: true,
             },
-            {
-              loader: 'sass-loader', // compiles Sass to CSS
-              options: {
-                sourceMap: true,
-                includePaths: [
-                  path.join(__dirname, '../node_modules'),
-                  path.join(__dirname, '../src'),
-                ],
-              },
+          },
+          {
+            loader: 'sass-loader', // compiles Sass to CSS
+            options: {
+              sourceMap: true,
+              includePaths: [
+                path.join(__dirname, '../node_modules'),
+                path.join(__dirname, '../src'),
+              ],
             },
-          ],
-        }),
+          },
+        ],
       },
       // Webpack, by default, uses the url-loader for images and fonts that are required/included by
       // files it processes, which just base64 encodes them and inlines them in the javascript
@@ -105,9 +102,8 @@ module.exports = Merge.smart(commonConfig, {
   // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
   plugins: [
     // Writes the extracted CSS from each entry to a file in the output directory.
-    new ExtractTextPlugin({
-      filename: '[name].min.css',
-      allChunks: true,
+    new MiniCssExtractPlugin({
+      filename: '[name].[chunkhash].css',
     }),
     // Generates an HTML file in the output directory.
     new HtmlWebpackPlugin({

package.json

@@ -62,7 +62,6 @@
     "enzyme-adapter-react-16": "^1.1.1",
     "es-check": "^2.0.2",
     "eslint-config-edx": "^4.0.3",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "fetch-mock": "^6.3.0",
     "file-loader": "^1.1.9",
     "html-webpack-harddisk-plugin": "^0.2.0",
@@ -71,6 +70,7 @@
     "identity-obj-proxy": "^3.0.0",
     "image-webpack-loader": "^4.2.0",
     "jest": "^22.4.0",
+    "mini-css-extract-plugin": "^0.4.0",
     "node-sass": "^4.7.2",
     "react-dev-utils": "^5.0.0",
     "react-test-renderer": "^16.2.0",
@@ -79,8 +79,8 @@
     "semantic-release": "^15.10.7",
     "style-loader": "^0.20.2",
     "travis-deploy-once": "^5.0.9",
-    "webpack": "^4.1.0",
-    "webpack-cli": "^2.0.10",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.0",
     "webpack-merge": "^4.1.1"
   },