cli(init): use extractMiniCSSPlugin (#363)

* cli(init): skip redundant question * cli(init): use mini-css-extract-plugin
webpack · May 7, 2018 · 5c6a589 · 5c6a589
1 parent c40e513
commit 5c6a589
Showing 1 changed file with 54 additions and 51 deletions.
diff --git a/packages/generators/init-generator.js b/packages/generators/init-generator.js
@@ -149,9 +149,7 @@ module.exports = class InitGenerator extends Generator {
 				]);
 			})
 			.then(stylingTypeAnswer => {
-				if (!this.isProd) {
-					ExtractUseProps = [];
-				}
+				ExtractUseProps = [];
 				switch (stylingTypeAnswer["stylingType"]) {
 					case "SASS":
 						this.dependencies.push(
@@ -162,20 +160,20 @@ module.exports = class InitGenerator extends Generator {
 						);
 						regExpForStyles = `${new RegExp(/\.(scss|css)$/)}`;
 						if (this.isProd) {
-							ExtractUseProps = `
-								use: [{
-									loader: "css-loader",
+							ExtractUseProps.push(
+								{
+									loader: "'css-loader'",
 									options: {
 										sourceMap: true
 									}
-								}, {
-									loader: "sass-loader",
+								},
+								{
+									loader: "'sass-loader'",
 									options: {
 										sourceMap: true
 									}
-								}],
-								fallback: "style-loader"
-							`;
+								}
+							);
 						} else {
 							ExtractUseProps.push(
 								{
@@ -199,20 +197,20 @@ module.exports = class InitGenerator extends Generator {
 							"css-loader"
 						);
 						if (this.isProd) {
-							ExtractUseProps = `
-								use: [{
-									loader: "css-loader",
+							ExtractUseProps.push(
+								{
+									loader: "'css-loader'",
 									options: {
 										sourceMap: true
 									}
-								}, {
-									loader: "less-loader",
+								},
+								{
+									loader: "'less-loader'",
 									options: {
 										sourceMap: true
 									}
-								}],
-								fallback: "style-loader"
-							`;
+								}
+							);
 						} else {
 							ExtractUseProps.push(
 								{
@@ -246,28 +244,26 @@ module.exports = class InitGenerator extends Generator {
 						);
 						regExpForStyles = `${new RegExp(/\.css$/)}`;
 						if (this.isProd) {
-							ExtractUseProps = `
-								use: [{
-									loader: "style-loader"
-								},{
-									loader: "css-loader",
+							ExtractUseProps.push(
+								{
+									loader: "'css-loader'",
 									options: {
 										sourceMap: true,
 										importLoaders: 1
 									}
-								}, {
-									loader: "postcss-loader",
+								},
+								{
+									loader: "'postcss-loader'",
 									options: {
-										plugins: function () {
+										plugins: `function () {
 											return [
 												precss,
 												autoprefixer
 											];
-										}
+										}`
 									}
-								}],
-								fallback: "style-loader"
-							`;
+								}
+							);
 						} else {
 							ExtractUseProps.push(
 								{
@@ -298,15 +294,14 @@ module.exports = class InitGenerator extends Generator {
 						this.dependencies.push("style-loader", "css-loader");
 						regExpForStyles = `${new RegExp(/\.css$/)}`;
 						if (this.isProd) {
-							ExtractUseProps = `
-								use: [{
-									loader: "css-loader",
+							ExtractUseProps.push(
+								{
+									loader: "'css-loader'",
 									options: {
 										sourceMap: true
 									}
-								}],
-								fallback: "style-loader"
-							`;
+								}
+							);
 						} else {
 							ExtractUseProps.push(
 								{
@@ -326,42 +321,50 @@ module.exports = class InitGenerator extends Generator {
 				}
 			})
 			.then(() => {
-				// Ask if the user wants to use extractPlugin
-				return this.prompt([
-					Input(
-						"extractPlugin",
-						"If you want to bundle your CSS files, what will you name the bundle? (press enter to skip)"
-					)
-				]);
+				if (this.isProd) {
+					// Ask if the user wants to use extractPlugin
+					return this.prompt([
+						Input(
+							"extractPlugin",
+							"If you want to bundle your CSS files, what will you name the bundle? (press enter to skip)"
+						)
+					]);
+				}
 			})
 			.then(extractPluginAnswer => {
-				const cssBundleName = extractPluginAnswer["extractPlugin"];
 				if (regExpForStyles) {
 					if (this.isProd) {
+						const cssBundleName = extractPluginAnswer["extractPlugin"];
 						this.configuration.config.topScope.push(tooltip.cssPlugin());
-						// TODO: Replace with regular version once v.4 is out
-						this.dependencies.push("extract-text-webpack-plugin@next");
+						this.dependencies.push("mini-css-extract-plugin");
 
 						if (cssBundleName.length !== 0) {
 							this.configuration.config.webpackOptions.plugins.push(
-								`new ExtractTextPlugin('${cssBundleName}.[contentHash].css')`
+								// TODO: use [contenthash] after it is supported
+								`new MiniCssExtractPlugin({ filename:'${cssBundleName}.[chunkhash].css' })`
 							);
 						} else {
 							this.configuration.config.webpackOptions.plugins.push(
-								"new ExtractTextPlugin('style.css')"
+								"new MiniCssExtractPlugin({ filename:'style.css' })"
 							);
 						}
 
+						ExtractUseProps.unshift(
+							{
+								loader: "MiniCssExtractPlugin.loader"
+							}
+						);
+
 						const moduleRulesObj = {
 							test: regExpForStyles,
-							use: `ExtractTextPlugin.extract({ ${ExtractUseProps} })`
+							use: ExtractUseProps
 						};
 
 						this.configuration.config.webpackOptions.module.rules.push(
 							moduleRulesObj
 						);
 						this.configuration.config.topScope.push(
-							"const ExtractTextPlugin = require('extract-text-webpack-plugin');",
+							"const MiniCssExtractPlugin = require('mini-css-extract-plugin');",
 							"\n"
 						);
 					} else {