From 6c393e5f7a6f00a7a2b68885d889e533b064e06d Mon Sep 17 00:00:00 2001 From: Jevan Chan Date: Fri, 23 Mar 2018 10:17:45 +0800 Subject: [PATCH 1/2] cli(init): skip redundant question --- lib/generators/init-generator.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/lib/generators/init-generator.js b/lib/generators/init-generator.js index ce1c9a4dd16..9c794238260 100644 --- a/lib/generators/init-generator.js +++ b/lib/generators/init-generator.js @@ -326,18 +326,20 @@ 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"); From 808e6a9bb6d6b744df9f7d68ee36569e59c28468 Mon Sep 17 00:00:00 2001 From: Jevan Chan Date: Fri, 23 Mar 2018 16:48:34 +0800 Subject: [PATCH 2/2] cli(init): use mini-css-extract-plugin --- lib/generators/init-generator.js | 87 ++++++++++++++++---------------- 1 file changed, 44 insertions(+), 43 deletions(-) diff --git a/lib/generators/init-generator.js b/lib/generators/init-generator.js index 9c794238260..b0843006ab7 100644 --- a/lib/generators/init-generator.js +++ b/lib/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( { @@ -341,29 +336,35 @@ module.exports = class InitGenerator extends Generator { 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 {