Merge pull request #51 from edx/douglashall/fix_prod_webpack_config

fix(webpack): use the appropriate css loader in prod webpack config
openedx · Dec 12, 2018 · afd9692 · afd9692
2 parents 3bf3aca + 8f77dea
commit afd9692
Show file tree

Hide file tree

Showing 3 changed files with 5,758 additions and 6,849 deletions.
diff --git a/config/webpack.prod.config.js b/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({