Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-22 23:15:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(@angular-devkit/build-angular): enable HMR for extracted CSS

Browse Source 
The latest versions of mini-css-extract-plugin support HMR, see: https://github.com/webpack-contrib/mini-css-extract-plugin#hot-module-reloading-hmr for more details
This commit is contained in:
Alan Agius 2020-08-12 13:08:13 +02:00
parent fb351a4daa
commit 24fedb268c
3 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/angular_devkit/build_angular/src/angular-cli-files/models/build-options.ts
View File

@ -47,6 +47,7 @@ export interface BuildOptions {
bundleDependencies?: boolean;
externalDependencies?: string[];
watch?: boolean;
hmr?: boolean;
outputHashing?: string;
poll?: number;
deleteOutputPath?: boolean;

9
packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts
View File

@ -218,7 +218,14 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
include: globalStylePaths,
test,
use: [
buildOptions.extractCss ? MiniCssExtractPlugin.loader : require.resolve('style-loader'),
buildOptions.extractCss
? {
loader: MiniCssExtractPlugin.loader,
options: {
hmr: buildOptions.hmr,
},
}
: require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {

17
packages/angular_devkit/build_angular/src/dev-server/index.ts
View File

@ -22,6 +22,7 @@ import * as ts from 'typescript';
import * as url from 'url';
import * as webpack from 'webpack';
import * as WebpackDevServer from 'webpack-dev-server';
import { normalizeExtraEntryPoints } from '../angular-cli-files/models/webpack-configs/utils';
import { IndexHtmlWebpackPlugin } from '../angular-cli-files/plugins/index-html-webpack-plugin';
import { checkPort } from '../angular-cli-files/utilities/check-port';
import { IndexHtmlTransform } from '../angular-cli-files/utilities/index-file/write-index-html';
@ -175,7 +176,7 @@ export function serveWebpackBrowser(
// Add live reload config.
if (options.liveReload) {
_addLiveReload(options, browserOptions, webpackConfig, clientAddress, context.logger);
_addLiveReload(root, options, browserOptions, webpackConfig, clientAddress, context.logger);
} else if (options.hmr) {
context.logger.warn('Live reload is disabled. HMR option ignored.');
}
@ -493,6 +494,7 @@ export function buildServePath(
* @private
*/
function _addLiveReload(
root: string,
options: DevServerBuilderOptions,
browserOptions: BrowserBuilderSchema,
webpackConfig: webpack.Configuration,
@ -557,7 +559,6 @@ function _addLiveReload(
const entryPoints = [`${webpackDevServerPath}?${url.format(clientAddress)}${sockjsPath}`];
if (options.hmr) {
const webpackHmrLink = 'https://webpack.js.org/guides/hot-module-replacement';
logger.warn(tags.oneLine`NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.`);
const showWarning = options.hmrWarning;
@ -574,11 +575,15 @@ function _addLiveReload(
);
}
entryPoints.push('webpack/hot/dev-server');
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
if (browserOptions.extractCss) {
logger.warn(tags.oneLine`NOTICE: (HMR) does not allow for CSS hot reload
when used together with '--extract-css'.`);
if (browserOptions.styles?.length) {
// When HMR is enabled we need to add the css paths as part of the entrypoints
// because otherwise no JS bundle will contain the HMR accept code.
const normalizedStyles = normalizeExtraEntryPoints(browserOptions.styles, 'styles')
.map(style => path.resolve(root, style.input));
entryPoints.push(...normalizedStyles);
}
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
}
if (typeof webpackConfig.entry !== 'object' || Array.isArray(webpackConfig.entry)) {
webpackConfig.entry = {};