Skip to content

Commit eb9b487

Browse files
dlabrecqdlabrecq
committed
fix(package): replace extract-text-webpack-plugin with mini-css-extract-plugin
Note: This restores the demo watch feature; however, AOT is temporarily disabled because mini-css-extract-plugin has an issue with AngularCompilerPlugin See: webpack-contrib/mini-css-extract-plugin#186 (+1 squashed commit) Squashed commits: [ee51577] chore(package): update angular and webpack versions
1 parent 24c79bc commit eb9b487

File tree

4 files changed

+78
-80
lines changed

4 files changed

+78
-80
lines changed

‎config/webpack.common.js

+19-22
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ const path = require('path'),
99
/**
1010
* Webpack Plugins
1111
*/
12-
const ExtractTextPlugin = require('extract-text-webpack-plugin');
12+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
1313
const HtmlWebpackPlugin = require('html-webpack-plugin');
1414
const OptimizeJsPlugin = require('optimize-js-plugin');
1515

16-
// ExtractTextPlugin
17-
const extractCSS = new ExtractTextPlugin({
18-
filename: '[name].[id].css',
19-
allChunks: true
16+
// MiniCssExtractPlugin
17+
const extractCSS = new MiniCssExtractPlugin({
18+
filename: '[name].css',
19+
chunkFilename: "[id].css"
2020
});
2121

2222
module.exports = {
@@ -56,18 +56,14 @@ module.exports = {
5656
*/
5757
{
5858
test: /\.css$/,
59-
use: extractCSS.extract({
60-
fallback: "style-loader",
61-
use: [
62-
{
63-
loader: 'css-loader',
64-
options: {
65-
sourceMap: true,
66-
context: '/'
67-
},
68-
},
69-
]
70-
})
59+
use: [
60+
MiniCssExtractPlugin.loader, {
61+
loader: "css-loader",
62+
options: {
63+
minimize: true,
64+
sourceMap: true
65+
}
66+
}]
7167
},
7268

7369
/**
@@ -115,20 +111,22 @@ module.exports = {
115111
}
116112
]
117113
},
118-
114+
/*
119115
optimization: {
120116
splitChunks: {
121117
cacheGroups: {
122118
commons: {
123119
test: /[\\/]node_modules[\\/]/,
124-
name: "vendors",
120+
name: "styles",
125121
chunks: "all"
126122
}
127123
}
128124
}
129125
},
130-
126+
*/
131127
plugins: [
128+
extractCSS,
129+
132130
/**
133131
* Plugin: ContextReplacementPlugin
134132
* Description: Provides context to Angular's use of System.import
@@ -190,7 +188,6 @@ module.exports = {
190188
root: helpers.root(),
191189
verbose: false,
192190
dry: false
193-
}),
194-
extractCSS
191+
})
195192
]
196193
};

‎config/webpack.demo.js

+19-23
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,25 @@ const path = require('path');
77
*/
88
const AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
99
const CopyWebpackPlugin = require('copy-webpack-plugin');
10-
const ExtractTextPlugin = require('extract-text-webpack-plugin');
1110
const HtmlWebpackPlugin = require('html-webpack-plugin');
11+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
1212
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
1313
const TypedocWebpackPlugin = require('typedoc-webpack-plugin');
1414

15-
// ExtractTextPlugin
16-
const extractCSS = new ExtractTextPlugin({
17-
filename: '[name].[id].css',
18-
allChunks: true
15+
// MiniCssExtractPlugin
16+
const extractCSS = new MiniCssExtractPlugin({
17+
filename: '[name].css',
18+
chunkFilename: "[id].css"
1919
});
2020

21-
const aotMode = true;
21+
// NOTE: AOT is temporarily disabled because mini-css-extract-plugin has an issue with AngularCompilerPlugin
22+
// See: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/186
23+
const aotMode = false;
2224

2325
module.exports = {
2426
devServer: {
25-
stats: 'minimal',
26-
inline: true
27+
inline: true,
28+
stats: 'minimal'
2729
},
2830

2931
devtool: 'cheap-module-eval-source-map',
@@ -52,7 +54,6 @@ module.exports = {
5254
use: aotMode ? [
5355
'@ngtools/webpack'
5456
] : [
55-
// 'awesome-typescript-loader',
5657
'ts-loader',
5758
'angular2-template-loader'
5859
],
@@ -88,19 +89,14 @@ module.exports = {
8889
*/
8990
{
9091
test: /\.css$/,
91-
use: extractCSS.extract({
92-
fallback: "style-loader",
93-
use: [
94-
{
95-
loader: 'css-loader',
96-
options: {
97-
sourceMap: true,
98-
context: '/'
99-
},
100-
},
101-
]
102-
}),
103-
exclude: [/node_modules\/@swimlane\/ngx-datatable/]
92+
use: [
93+
MiniCssExtractPlugin.loader, {
94+
loader: "css-loader",
95+
options: {
96+
minimize: true,
97+
sourceMap: true
98+
}
99+
}]
104100
},
105101
{
106102
test: /\.less$/,
@@ -174,7 +170,7 @@ module.exports = {
174170
cacheGroups: {
175171
commons: {
176172
test: /[\\/]node_modules[\\/]/,
177-
name: "vendors",
173+
name: "styles",
178174
chunks: "all"
179175
}
180176
}

‎gulpfile.js

+6
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,12 @@ gulp.task('build',
129129

130130
// Build the components
131131
gulp.task('transpile', ['inline-template'], function () {
132+
// Stick with v0.2.1 due to "function calls are not supported in decorators" issue
133+
// See: https://github.com/angular/angular/issues/23609
134+
// See: https://github.com/dherges/ng-packagr/issues/727
135+
136+
// Change for v0.3.0 https://github.com/filipesilva/angular-quickstart-lib/issues/61
137+
// return ngc(['--project', 'tsconfig-prod.json']);
132138
return ngc('tsconfig-prod.json');
133139
});
134140

‎package.json

+34-35
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"reinstall": "npm run clean && npm install",
2323
"remove-dist": "rimraf build dist dist-watch dist-demo",
2424
"rimraf": "rimraf",
25-
"start:demo": "npm run webpack-dev-server -- --config config/webpack.demo.js --progress --host 0.0.0.0 --port 8001 --profile --watch --content-base dist-demo",
25+
"start:demo": "npm run webpack-dev-server -- --config config/webpack.demo.js --host 0.0.0.0 --port 8001 --progress --profile --hot --content-base dist-demo",
2626
"test": "karma start",
2727
"test:trace-deprecation": "node --trace-deprecation ./node_modules/.bin/karma start",
2828
"test:debug": "karma --browsers Chrome --no-single-run start",
@@ -86,56 +86,55 @@
8686
"ngx-bootstrap": "^3.0.0"
8787
},
8888
"devDependencies": {
89-
"@angular-devkit/core": "0.6.3",
90-
"@angular/animations": "6.0.2",
91-
"@angular/common": "6.0.2",
92-
"@angular/compiler": "6.0.2",
93-
"@angular/compiler-cli": "6.0.2",
94-
"@angular/core": "6.0.2",
95-
"@angular/forms": "6.0.2",
96-
"@angular/http": "6.0.2",
97-
"@angular/platform-browser": "6.0.2",
98-
"@angular/platform-browser-dynamic": "6.0.2",
99-
"@angular/platform-server": "6.0.2",
100-
"@angular/router": "6.0.2",
101-
"@ngtools/webpack": "6.0.3",
89+
"@angular-devkit/core": "0.6.6",
90+
"@angular/animations": "6.0.6",
91+
"@angular/common": "6.0.6",
92+
"@angular/compiler": "6.0.6",
93+
"@angular/compiler-cli": "6.0.6",
94+
"@angular/core": "6.0.6",
95+
"@angular/forms": "6.0.6",
96+
"@angular/http": "6.0.6",
97+
"@angular/platform-browser": "6.0.6",
98+
"@angular/platform-browser-dynamic": "6.0.6",
99+
"@angular/platform-server": "6.0.6",
100+
"@angular/router": "6.0.6",
101+
"@ngtools/webpack": "6.0.8",
102102
"@types/c3": "0.6.0",
103-
"@types/jasmine": "2.8.7",
104-
"@types/lodash": "4.14.109",
103+
"@types/jasmine": "2.8.8",
104+
"@types/lodash": "4.14.110",
105105
"angular2-template-loader": "0.6.2",
106106
"bootstrap": "3.3.7",
107107
"child_process": "1.0.2",
108108
"clean-webpack-plugin": "0.1.19",
109-
"codelyzer": "4.3.0",
110-
"commitizen": "2.9.6",
111-
"copy-webpack-plugin": "4.5.1",
112-
"core-js": "2.5.6",
109+
"codelyzer": "4.4.2",
110+
"commitizen": "2.10.1",
111+
"copy-webpack-plugin": "4.5.2",
112+
"core-js": "2.5.7",
113113
"css-loader": "0.28.11",
114114
"css-to-string-loader": "0.1.3",
115115
"cz-conventional-changelog": "2.1.0",
116116
"del": "3.0.0",
117-
"extract-text-webpack-plugin": "next",
118117
"file-loader": "1.1.11",
119118
"font-awesome": "4.7.0",
120119
"gulp": "3.9.1",
121120
"gulp-changed": "3.2.0",
122121
"gulp-cssmin": "0.2.0",
123122
"gulp-less": "3.5.0",
124123
"gulp-ngc": "0.2.1",
125-
"gulp-rename": "1.2.3",
124+
"gulp-rename": "1.3.0",
126125
"gulp-replace": "1.0.0",
127126
"gulp-sourcemaps": "2.6.4",
128127
"gulp-string-replace": "1.0.0",
129128
"gulp-stylelint": "7.0.0",
130129
"highlight.js": "9.12.0",
131130
"html-loader": "0.5.5",
132-
"html-minifier": "3.5.16",
131+
"html-minifier": "3.5.17",
133132
"html-webpack-plugin": "3.2.0",
134133
"husky": "0.14.3",
135134
"jasmine-core": "3.1.0",
136135
"json-loader": "0.5.7",
137136
"json-stringify": "1.0.0",
138-
"karma": "2.0.2",
137+
"karma": "2.0.4",
139138
"karma-chrome-launcher": "2.2.0",
140139
"karma-cli": "1.0.1",
141140
"karma-coverage": "1.1.2",
@@ -149,43 +148,43 @@
149148
"less": "2.7.3",
150149
"less-loader": "4.1.0",
151150
"markdown-it": "8.4.1",
151+
"mini-css-extract-plugin": "0.4.0",
152152
"mocha": "5.2.0",
153153
"npm-run-all": "4.1.3",
154154
"nsp": "3.2.1",
155155
"optimize-js-plugin": "0.0.4",
156156
"patternfly-eng-publish": "0.0.4",
157-
"patternfly-eng-release": "^3.26.67",
157+
"patternfly-eng-release": "^3.26.69",
158158
"phantomjs-prebuilt": "2.1.16",
159159
"protractor": "5.3.2",
160160
"raw-loader": "0.5.1",
161161
"reflect-metadata": "0.1.12",
162162
"rimraf": "2.6.2",
163-
"rollup": "0.59.4",
163+
"rollup": "0.61.2",
164164
"rollup-plugin-commonjs": "9.1.3",
165165
"rollup-plugin-node-resolve": "3.3.0",
166166
"rollup-plugin-uglify": "4.0.0",
167-
"rxjs": "6.1.0",
168-
"rxjs-compat": "6.1.0",
169-
"semantic-release": "15.5.0",
167+
"rxjs": "6.2.1",
168+
"rxjs-compat": "6.2.1",
169+
"semantic-release": "15.6.0",
170170
"source-map-loader": "0.2.3",
171171
"style-loader": "0.21.0",
172-
"stylelint": "9.2.1",
172+
"stylelint": "9.3.0",
173173
"stylus": "0.54.5",
174174
"to-string-loader": "1.1.5",
175175
"ts-helpers": "1.1.2",
176-
"ts-node": "6.0.3",
176+
"ts-node": "6.2.0",
177177
"tslint": "5.10.0",
178-
"ts-loader": "4.3.1",
178+
"ts-loader": "4.4.1",
179179
"typedoc": "0.11.1",
180180
"typedoc-webpack-plugin": "1.1.4",
181181
"typescript": "2.7.2",
182182
"url-loader": "1.0.1",
183-
"webpack": "4.8.3",
184-
"webpack-bundle-analyzer": "2.13.0",
183+
"webpack": "4.12.1",
184+
"webpack-bundle-analyzer": "2.13.1",
185185
"webpack-cli": "2.1.3",
186186
"webpack-dashboard": "1.1.1",
187187
"webpack-dev-server": "3.1.4",
188-
"webpack-md5-hash": "0.0.6",
189188
"webpack-merge": "4.1.2",
190189
"zone.js": "0.8.26"
191190
},

0 commit comments

Comments
 (0)