refactor(@angular-devkit/build-webpack): use mini-css-extract-plugin

clydin · hansl · commit f4aedc1ed9ed · 2018-06-05T17:55:16.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -85,13 +85,12 @@
     "chalk": "~2.2.2",
     "chokidar": "^1.7.0",
     "circular-dependency-plugin": "^4.4.0",
-    "clean-css": "^4.1.9",
+    "clean-css": "^4.1.11",
     "codelyzer": "^4.0.2",
     "common-tags": "^1.5.1",
     "conventional-changelog": "^1.1.0",
     "copy-webpack-plugin": "^4.5.0",
     "express": "^4.16.2",
-    "extract-text-webpack-plugin": "~4.0.0-beta.0",
     "file-loader": "^1.1.11",
     "font-awesome": "^4.7.0",
     "glob": "^7.0.3",
@@ -115,6 +114,7 @@
     "lodash": "^4.17.4",
     "material-design-icons": "^3.0.1",
     "memory-fs": "^0.4.1",
+    "mini-css-extract-plugin": "~0.2.0",
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",
     "node-sass": "^4.7.2",
diff --git a/packages/angular_devkit/build_webpack/package.json b/packages/angular_devkit/build_webpack/package.json
@@ -15,10 +15,9 @@
     "cache-loader": "^1.2.2",
     "chalk": "~2.2.2",
     "circular-dependency-plugin": "^4.4.0",
-    "clean-css": "^4.1.9",
+    "clean-css": "^4.1.11",
     "common-tags": "^1.5.1",
     "copy-webpack-plugin": "^4.5.0",
-    "extract-text-webpack-plugin": "~4.0.0-beta.0",
     "file-loader": "^1.1.11",
     "glob": "^7.0.3",
     "html-webpack-plugin": "^3.0.6",
@@ -28,6 +27,7 @@
     "license-webpack-plugin": "^1.2.3",
     "lodash": "^4.17.4",
     "memory-fs": "^0.4.1",
+    "mini-css-extract-plugin": "~0.2.0",
     "minimatch": "^3.0.4",
     "node-sass": "^4.7.2",
     "parse5": "^4.0.0",
diff --git a/packages/angular_devkit/build_webpack/src/angular-cli-files/models/webpack-configs/styles.ts b/packages/angular_devkit/build_webpack/src/angular-cli-files/models/webpack-configs/styles.ts
@@ -7,10 +7,11 @@ import { SuppressExtractedTextChunksWebpackPlugin } from '../../plugins/webpack'
 import { extraEntryParser, getOutputHashFormat } from './utils';
 import { WebpackConfigOptions } from '../build-options';
 import { findUp } from '../../utilities/find-up';
+import { RawCssLoader } from '../../plugins/webpack';
 
 const postcssUrl = require('postcss-url');
 const autoprefixer = require('autoprefixer');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const postcssImports = require('postcss-import');
 const PostcssCliResources = require('../../plugins/webpack').PostcssCliResources;
 
@@ -210,14 +211,10 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     }
   ];
 
-  const commonLoaders: webpack.Loader[] = [
-    { loader: 'raw-loader' },
-  ];
-
   // load component css as raw strings
   const rules: webpack.Rule[] = baseRules.map(({ test, use }) => ({
     exclude: globalStylePaths, test, use: [
-      ...commonLoaders,
+      { loader: 'raw-loader' },
       {
         loader: 'postcss-loader',
         options: {
@@ -235,7 +232,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     rules.push(...baseRules.map(({ test, use }) => {
       const extractTextPlugin = {
         use: [
-          ...commonLoaders,
+          { loader: RawCssLoader },
           {
             loader: 'postcss-loader',
             options: {
@@ -252,8 +249,10 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
       const ret: any = {
         include: globalStylePaths,
         test,
-        use: buildOptions.extractCss ? ExtractTextPlugin.extract(extractTextPlugin)
-          : ['style-loader', ...extractTextPlugin.use]
+        use: [
+          buildOptions.extractCss ? MiniCssExtractPlugin.loader : 'style-loader',
+          ...extractTextPlugin.use,
+        ]
       };
       // Save the original options as arguments for eject.
       // if (buildOptions.extractCss) {
@@ -266,7 +265,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   if (buildOptions.extractCss) {
     // extract global css from js files into own css file
     extraPlugins.push(
-      new ExtractTextPlugin({ filename: `[name]${hashFormat.extract}.css` }));
+      new MiniCssExtractPlugin({ filename: `[name]${hashFormat.script}.css` }));
     // suppress empty .js files in css only entry points
     extraPlugins.push(new SuppressExtractedTextChunksWebpackPlugin());
   }
diff --git a/packages/angular_devkit/build_webpack/src/angular-cli-files/plugins/cleancss-webpack-plugin.ts b/packages/angular_devkit/build_webpack/src/angular-cli-files/plugins/cleancss-webpack-plugin.ts
@@ -87,7 +87,7 @@ export class CleanCssWebpackPlugin {
 
           let content: string;
           let map: any;
-          if (asset.sourceAndMap) {
+          if (this._options.sourceMap && asset.sourceAndMap) {
             const sourceAndMap = asset.sourceAndMap();
             content = sourceAndMap.source;
             map = sourceAndMap.map;
diff --git a/packages/angular_devkit/build_webpack/src/angular-cli-files/plugins/raw-css-loader.ts b/packages/angular_devkit/build_webpack/src/angular-cli-files/plugins/raw-css-loader.ts
@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export default function(content: string, map: object) {
+  const stringifiedContent = JSON.stringify(content);
+  const stringifiedMap = map && JSON.stringify(map);
+
+  return `module.exports = [[module.id, ${stringifiedContent}, '', ${stringifiedMap}]]`;
+}
diff --git a/packages/angular_devkit/build_webpack/src/angular-cli-files/plugins/webpack.ts b/packages/angular_devkit/build_webpack/src/angular-cli-files/plugins/webpack.ts
@@ -12,3 +12,5 @@ export {
   PostcssCliResourcesOptions,
 } from './postcss-cli-resources';
 
+import { join } from 'path';
+export const RawCssLoader = require.resolve(join(__dirname, 'raw-css-loader'));
