Skip to content
This repository was archived by the owner on Mar 25, 2024. It is now read-only.

Commit 363f12f

Browse files
GiuseppePiscopoGiuseppePiscopo
committed
chore(webpack): group loader definitions by file type
1 parent f942b11 commit 363f12f

File tree

3 files changed

+104
-92
lines changed

3 files changed

+104
-92
lines changed

‎webpack.common.js

+94-82
Original file line numberDiff line numberDiff line change
@@ -70,102 +70,114 @@ var rules = {
7070

7171
// normal loaders
7272

73-
// all `.ts` files will be compiled through tsc by chosen tsLoaderJit.
74-
// `angular2-template-loader` converts template/style URLs into inlined template/styles.
75-
// `angular-router-loader` replaces string-based module lazy loading routes with actual
76-
// `loadChildren` router instructions
77-
typescriptJit: {
78-
test: /\.ts$/,
79-
use: [{
80-
loader: tsLoaderJit,
81-
options: {
82-
compilerOptions: {
83-
noEmit: false,
73+
typescript: {
74+
75+
// all `.ts` files will be compiled through tsc by chosen tsLoaderJit.
76+
// `angular2-template-loader` converts template/style URLs into inlined template/styles.
77+
// `angular-router-loader` replaces string-based module lazy loading routes with actual
78+
// `loadChildren` router instructions
79+
jit: {
80+
test: /\.ts$/,
81+
use: [{
82+
loader: tsLoaderJit,
83+
options: {
84+
compilerOptions: {
85+
noEmit: false,
86+
},
8487
},
85-
},
86-
}, {
87-
loader: 'angular2-template-loader',
88-
}, {
89-
loader: 'angular-router-loader',
90-
}],
91-
include: [
92-
patterns.clientSrc,
93-
],
94-
},
88+
}, {
89+
loader: 'angular2-template-loader',
90+
}, {
91+
loader: 'angular-router-loader',
92+
}],
93+
include: [
94+
patterns.clientSrc,
95+
],
96+
},
97+
98+
aot: {
99+
test: /\.ts$/,
100+
// use @ngtools loader
101+
use: [{
102+
loader: '@ngtools/webpack',
103+
}],
104+
include: [
105+
patterns.clientSrc,
106+
],
107+
},
95108

96-
typescriptAot: {
97-
test: /\.ts$/,
98-
// use @ngtools loader
99-
use: [{
100-
loader: '@ngtools/webpack',
101-
}],
102-
include: [
103-
patterns.clientSrc,
104-
],
105109
},
106110

107-
// support for requiring component-scoped CSS as raw text
108-
// NOTE: this assumes that they're outside of global styles folder
109-
componentCss: {
110-
test: /\.css$/,
111-
use: [
112-
'raw-loader',
113-
'postcss-loader',
114-
],
115-
include: [
116-
patterns.clientSrc,
117-
],
118-
},
111+
css: {
119112

120-
// support for requiring component-scoped Sass as raw text
121-
// NOTE: this assumes that they're outside of global styles folder
122-
componentSass: {
123-
test: /\.scss$/,
124-
use: [
125-
'raw-loader',
126-
'postcss-loader',
127-
'sass-loader',
128-
],
129-
include: [
130-
patterns.clientSrc,
131-
],
132-
},
133-
134-
// support for requiring global, crosswide CSS styles as <style> tag
135-
// NOTE: this assumes that they're within global styles folder or in a library
136-
globalCss: {
137-
test: /\.css$/,
138-
use: ExtractTextPlugin.extract({
139-
fallback: 'style-loader',
113+
// support for requiring component-scoped CSS as raw text
114+
// NOTE: this assumes that they're outside of global styles folder
115+
component: {
116+
test: /\.css$/,
140117
use: [
141-
'to-string-loader',
142-
'css-loader',
118+
'raw-loader',
143119
'postcss-loader',
144120
],
145-
}),
146-
include: [
147-
patterns.styles, // include global styles
148-
patterns.nodeModules, // allow importing from third-party libraries
149-
],
121+
include: [
122+
patterns.clientSrc,
123+
],
124+
},
125+
126+
// support for requiring global, crosswide CSS styles as <style> tag
127+
// NOTE: this assumes that they're within global styles folder or in a library
128+
global: {
129+
test: /\.css$/,
130+
use: ExtractTextPlugin.extract({
131+
fallback: 'style-loader',
132+
use: [
133+
'to-string-loader',
134+
'css-loader',
135+
'postcss-loader',
136+
],
137+
}),
138+
include: [
139+
patterns.styles, // include global styles
140+
patterns.nodeModules, // allow importing from third-party libraries
141+
],
142+
},
143+
150144
},
151145

152-
// support for requiring global, crosswide Sass styles as <style> tag
153-
// NOTE: this assumes that they're within global styles folder or in a library
154-
globalSass: {
155-
test: /\.scss$/,
156-
use: ExtractTextPlugin.extract({
157-
fallback: 'style-loader',
146+
sass: {
147+
148+
// support for requiring component-scoped Sass as raw text
149+
// NOTE: this assumes that they're outside of global styles folder
150+
component: {
151+
test: /\.scss$/,
158152
use: [
159-
'to-string-loader',
160-
'css-loader',
153+
'raw-loader',
161154
'postcss-loader',
162155
'sass-loader',
163156
],
164-
}),
165-
include: [
166-
patterns.styles, // include global styles
167-
patterns.nodeModules, // allow importing from third-party libraries
168-
],
157+
include: [
158+
patterns.clientSrc,
159+
],
160+
},
161+
162+
// support for requiring global, crosswide Sass styles as <style> tag
163+
// NOTE: this assumes that they're within global styles folder or in a library
164+
global: {
165+
test: /\.scss$/,
166+
use: ExtractTextPlugin.extract({
167+
fallback: 'style-loader',
168+
use: [
169+
'to-string-loader',
170+
'css-loader',
171+
'postcss-loader',
172+
'sass-loader',
173+
],
174+
}),
175+
include: [
176+
patterns.styles, // include global styles
177+
patterns.nodeModules, // allow importing from third-party libraries
178+
],
179+
},
180+
169181
},
170182

171183
// support for requiring HTML as raw text

‎webpack.config.dev.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,11 @@ var config = {
6363
// none
6464

6565
// Loaders
66-
common.rules.typescriptJit,
67-
common.rules.componentSass,
68-
common.rules.componentCss,
69-
common.rules.globalSass,
70-
common.rules.globalCss,
66+
common.rules.typescript.jit,
67+
common.rules.sass.global,
68+
common.rules.sass.component,
69+
common.rules.css.global,
70+
common.rules.css.component,
7171
common.rules.html,
7272

7373
// Post-loaders

‎webpack.config.prod.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@ var config = {
4444
// none
4545

4646
// Loaders
47-
common.rules.typescriptAot,
48-
common.rules.componentSass,
49-
common.rules.componentCss,
50-
common.rules.globalSass,
51-
common.rules.globalCss,
47+
common.rules.typescript.aot,
48+
common.rules.sass.global,
49+
common.rules.sass.component,
50+
common.rules.css.global,
51+
common.rules.css.component,
5252
common.rules.html,
5353

5454
// Post-loaders

0 commit comments

Comments
 (0)