Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

webpack: Add css-hot-loader to remove flash on unstyled content. 

This commit removes the flash on unstyled content while in dev
mode that was caused by the use of style-loader. Instead it
enables mini-css-extract-plugin in dev in combination with
css-hot-loader which enables HMR for development.

This is because mini-css-extract-plugin does not currently support
HMR out of the box. It also adds a SourceMapDevtoolPlugin to enable
sourcemaps with css since mini-css breaks sourcemaps when used in
combination with the cheap-module-evel-source-map setting.

Related issues:
https://github.com/webpack-contrib/mini-css-extract-plugin/issues/34
https://github.com/webpack-contrib/mini-css-extract-plugin/issues/29
This commit is contained in:
Armaan Ahluwalia 2018-05-03 03:46:32 +05:30 committed by Tim Abbott
parent c38b70566c
commit 64dadae697
3 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -9,6 +9,7 @@
"@types/webpack": "4.1.3",
"blueimp-md5": "2.10.0",
"clipboard": "2.0.0",
"css-hot-loader": "1.3.9",
"css-loader": "0.28.11",
"emoji-datasource-apple": "3.0.0",
"emoji-datasource-emojione": "3.0.0",

40
tools/webpack.config.ts
View File

@ -5,22 +5,14 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const assets = require('./webpack.assets.json');
// Currently we're using style-loader for local dev
// because MiniCssExtractPlugin doesn't support
// HMR as yet. When this changes we can switch
// over to MiniCssExtractPlugin which will Also
// solve the flash of unstsyled elements on page load.
// https://github.com/webpack-contrib/mini-css-extract-plugin/issues/34
function getCSSLoader(isProd: boolean) {
// Adds on css-hot-loader in dev mode
function getHotCSS(bundle:any[], isProd:boolean) {
if(isProd) {
return MiniCssExtractPlugin.loader
}
return {
loader: 'style-loader',
options: {
sourceMap: true
}
return bundle;
}
return [
'css-hot-loader',
].concat(bundle);
}
export default (env?: string) : webpack.Configuration => {
const production: boolean = env === "production";
@ -83,21 +75,21 @@ export default (env?: string) : webpack.Configuration => {
// regular css files
{
test: /\.css$/,
use: [
getCSSLoader(production),
use: getHotCSS([
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
],
], production),
},
// sass / scss loader
{
test: /\.(sass|scss)$/,
use: [
getCSSLoader(production),
use: getHotCSS([
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
@ -110,7 +102,7 @@ export default (env?: string) : webpack.Configuration => {
sourceMap: true
}
}
],
], production),
},
// load fonts and files
{
@ -171,6 +163,14 @@ export default (env?: string) : webpack.Configuration => {
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
// We use SourceMapDevToolPlugin in order to enable SourceMaps
// in combination with mini-css-extract-plugin and
// the devtool setting of cheap-module-eval-source-map.
// Without this plugin source maps won't work with that combo.
// See https://github.com/webpack-contrib/mini-css-extract-plugin/issues/29
new webpack.SourceMapDevToolPlugin({
filename: "[file].map"
})
];

10
yarn.lock
View File

@ -2054,6 +2054,14 @@ css-color-names@0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
css-hot-loader@^1.3.9:
version "1.3.9"
resolved "https://registry.yarnpkg.com/css-hot-loader/-/css-hot-loader-1.3.9.tgz#ed22b41126920134a4a2246d7d32113e2425c754"
dependencies:
loader-utils "^1.1.0"
lodash "^4.17.5"
normalize-url "^1.9.1"
css-loader@0.28.11:
version "0.28.11"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.11.tgz#c3f9864a700be2711bb5a2462b2389b1a392dab7"
@ -6282,7 +6290,7 @@ normalize-url@2.0.1:
query-string "^5.0.1"
sort-keys "^2.0.0"
normalize-url@^1.4.0:
normalize-url@^1.4.0, normalize-url@^1.9.1:
version "1.9.1"
resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
dependencies: