Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

cli(init): use extractMiniCSSPlugin #363

Merged
merged 2 commits into from
Apr 10, 2018
Merged

cli(init): use extractMiniCSSPlugin #363

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6c393e5
cli(init): skip redundant question
jevancc Mar 23, 2018
808e6a9
cli(init): use mini-css-extract-plugin
jevancc Mar 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 54 additions & 51 deletions lib/generators/init-generator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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(
{
Expand All @@ -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"
Copy link
Contributor

@ematipico ematipico Apr 4, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fallback into style-loader is not supported/needed anymore?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not supported. It is mentioned in this issue.
However the style-loader may still be needed, some use cases and suggestions are needed to see how to generate the related configuration.

`;
}
);
} else {
ExtractUseProps.push(
{
Expand Down Expand Up @@ -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(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this part is not a string anymore?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With extract-text-webpack-plugin before, this part was used as an argument in ExtractTextPlugin.extract({ ${ExtractUseProps} }) with fallback. Since it could not be represented as a js object, we used string to do it. The usage of mini-css-extract-plugin is changed, so we don't need to use string anymore.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The if statement for this.isProd can be further simplified here, but I keep as it is for future modification.

{
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(
{
Expand Down Expand Up @@ -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(
{
Expand All @@ -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(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are you unshifting here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MiniCssExtractPlugin should be the last loader applied on the source. unshift() is used to insert MCEP loader at the front of the loaders array.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oki, good stuff

{
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 {
Expand Down