Skip to content

Commit 8549da1

Browse files
maximegrismaximegris
committed
Fix webpack prod/dev env
1 parent 78e8da7 commit 8549da1

File tree

7 files changed

+182
-115
lines changed

7 files changed

+182
-115
lines changed

Diff for: ‎README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,9 @@ You can desactivate "Developer Tools" by commenting `win.webContents.openDevTool
5555

5656
## To build for production
5757

58-
- npm run electron:dist
58+
* Using development variables (environments/index.ts) : `npm run electron:dev`
59+
60+
* Using production variables (environments/index.prod.ts) : `npm run electron:prod`
5961

6062
Your built files are in the /dist folder.
6163

Diff for: ‎package.json

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-electron",
3-
"version": "1.2.1",
3+
"version": "1.3.0",
44
"description": "Angular 4 with Electron (Typescript + SASS + Hot Reload)",
55
"homepage": "https://github.com/maximegris/angular-electron",
66
"author": {
@@ -21,14 +21,16 @@
2121
"test": "karma start ./karma.conf.js",
2222
"lint": "ng lint",
2323
"e2e": "protractor ./protractor.conf.js",
24-
"build": "webpack && copyfiles main.js dist",
24+
"build": "webpack --display-error-details && copyfiles main.js dist",
25+
"build:prod": "cross-env NODE_ENV='production' npm run build",
2526
"prepree2e": "npm start",
2627
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
2728
"electron:serve": "electron . --serve",
28-
"electron:dist": "npm run build && electron dist/main.js",
29-
"electron:linux": "npm run build && copyfiles package.json dist && electron-packager dist --overwrite --platform=linux --arch=x64 --asar=true --out=app-builds",
30-
"electron:windows": "npm run build && copyfiles package.json dist && electron-packager dist --overwrite --platform=win32 --arch=ia32 --asar=true --out=app-builds",
31-
"electron:mac": "npm run build && copyfiles package.json dist && electron-packager dist --overwrite --platform=darwin --arch=x64 --asar=true --out=app-builds"
29+
"electron:dev": "npm run build && electron dist/main.js",
30+
"electron:prod": "npm run build:prod && electron dist/main.js",
31+
"electron:linux": "npm run build:prod && copyfiles package.json dist && electron-packager dist --overwrite --platform=linux --arch=x64 --asar=true --out=app-builds",
32+
"electron:windows": "npm run build:prod && copyfiles package.json dist && electron-packager dist --overwrite --platform=win32 --arch=ia32 --asar=true --out=app-builds",
33+
"electron:mac": "npm run build:prod && copyfiles package.json dist && electron-packager dist --overwrite --platform=darwin --arch=x64 --asar=true --out=app-builds"
3234
},
3335
"dependencies": {
3436
"@angular/common": "~4.0.2",
@@ -52,6 +54,7 @@
5254
"autoprefixer": "~6.7.7",
5355
"codelyzer": "~2.1.1",
5456
"copyfiles": "~1.2.0",
57+
"cross-env": "^4.0.0",
5558
"css-loader": "~0.26.1",
5659
"cssnano": "~3.10.0",
5760
"electron": "~1.6.5",

Diff for: ‎src/environments/environment.prod.ts renamed to ‎src/environments/index.prod.ts

File renamed without changes.

Diff for: ‎src/environments/environment.ts renamed to ‎src/environments/index.ts

File renamed without changes.

Diff for: ‎src/main.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { enableProdMode } from '@angular/core';
22
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
33

44
import { AppModule } from './app/app.module';
5-
import { environment } from './environments/environment';
5+
import { environment } from 'environments';
66

77
if (environment.production) {
88
enableProdMode();

Diff for: ‎tsconfig.json

+3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
"experimentalDecorators": true,
1111
"allowJs": true,
1212
"target": "es5",
13+
"paths": {
14+
"environments": [ "./environments" ]
15+
},
1316
"typeRoots": [
1417
"node_modules/@types"
1518
],

Diff for: ‎webpack.config.js

+166-107
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,177 @@
11
const path = require('path');
2+
const webpack = require('webpack');
23
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
34
const HtmlWebpackPlugin = require('html-webpack-plugin');
45
const ExtractTextPlugin = require('extract-text-webpack-plugin');
56
const autoprefixer = require('autoprefixer');
67
const postcssUrl = require('postcss-url');
78

8-
const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin } = require('webpack');
9+
const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin, DefinePlugin, HashedModuleIdsPlugin } = require('webpack');
910
const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
10-
const { CommonsChunkPlugin } = require('webpack').optimize;
11+
const { CommonsChunkPlugin, UglifyJsPlugin } = require('webpack').optimize;
1112
const { AotPlugin } = require('@ngtools/webpack');
1213

1314
const nodeModules = path.join(process.cwd(), 'node_modules');
1415
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
1516
const baseHref = "";
1617
const deployUrl = "";
1718

19+
const isProd = (process.env.NODE_ENV === 'production');
20+
21+
function getPlugins() {
22+
var plugins = [];
23+
24+
// Always expose NODE_ENV to webpack, you can now use `process.env.NODE_ENV`
25+
// inside your code for any environment checks; UglifyJS will automatically
26+
// drop any unreachable code.
27+
plugins.push(new DefinePlugin({
28+
"process.env.NODE_ENV": "\"production\""
29+
}));
30+
31+
plugins.push(new NoEmitOnErrorsPlugin());
32+
33+
plugins.push(new GlobCopyWebpackPlugin({
34+
"patterns": [
35+
"assets",
36+
"favicon.ico"
37+
],
38+
"globOptions": {
39+
"cwd": "C:\\_PROJECTS\\_PERSO\\angular-electron\\src",
40+
"dot": true,
41+
"ignore": "**/.gitkeep"
42+
}
43+
}));
44+
45+
plugins.push(new ProgressPlugin());
46+
47+
plugins.push(new HtmlWebpackPlugin({
48+
"template": "./src/index.html",
49+
"filename": "./index.html",
50+
"hash": false,
51+
"inject": true,
52+
"compile": true,
53+
"favicon": false,
54+
"minify": false,
55+
"cache": true,
56+
"showErrors": true,
57+
"chunks": "all",
58+
"excludeChunks": [],
59+
"title": "Webpack App",
60+
"xhtml": true,
61+
"chunksSortMode": function sort(left, right) {
62+
let leftIndex = entryPoints.indexOf(left.names[0]);
63+
let rightindex = entryPoints.indexOf(right.names[0]);
64+
if (leftIndex > rightindex) {
65+
return 1;
66+
}
67+
else if (leftIndex < rightindex) {
68+
return -1;
69+
}
70+
else {
71+
return 0;
72+
}
73+
}
74+
}));
75+
76+
plugins.push(new BaseHrefWebpackPlugin({}));
77+
78+
plugins.push(new CommonsChunkPlugin({
79+
"name": "inline",
80+
"minChunks": null
81+
}));
82+
83+
plugins.push(new CommonsChunkPlugin({
84+
"name": "vendor",
85+
"minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
86+
"chunks": [
87+
"main"
88+
]
89+
}));
90+
91+
plugins.push(new ExtractTextPlugin({
92+
"filename": "[name].bundle.css",
93+
"disable": true
94+
}));
95+
96+
plugins.push(new LoaderOptionsPlugin({
97+
"sourceMap": false,
98+
"options": {
99+
"postcss": [
100+
autoprefixer(),
101+
postcssUrl({"url": (obj) => {
102+
// Only convert root relative URLs, which CSS-Loader won't process into require().
103+
if (!obj.url.startsWith('/') || obj.url.startsWith('//')) {
104+
return obj.url;
105+
}
106+
if (deployUrl.match(/:\/\//)) {
107+
// If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
108+
return `${deployUrl.replace(/\/$/, '')}${obj.url}`;
109+
}
110+
else if (baseHref.match(/:\/\//)) {
111+
// If baseHref contains a scheme, include it as is.
112+
return baseHref.replace(/\/$/, '') +
113+
`/${deployUrl}/${obj.url}`.replace(/\/\/+/g, '/');
114+
}
115+
else {
116+
// Join together base-href, deploy-url and the original URL.
117+
// Also dedupe multiple slashes into single ones.
118+
return `/${baseHref}/${deployUrl}/${obj.url}`.replace(/\/\/+/g, '/');
119+
}
120+
}})
121+
],
122+
"sassLoader": {
123+
"sourceMap": false,
124+
"includePaths": []
125+
},
126+
"lessLoader": {
127+
"sourceMap": false
128+
},
129+
"context": ""
130+
}
131+
}));
132+
133+
if(isProd) {
134+
plugins.push(new HashedModuleIdsPlugin({
135+
"hashFunction": "md5",
136+
"hashDigest": "base64",
137+
"hashDigestLength": 4
138+
}));
139+
140+
plugins.push(new AotPlugin({
141+
"mainPath": "main.ts",
142+
"hostReplacementPaths": {
143+
"environments/index.ts": "environments/index.prod.ts"
144+
},
145+
"exclude": [],
146+
"tsConfigPath": "src/tsconfig.app.json"
147+
}));
148+
149+
plugins.push(new UglifyJsPlugin({
150+
"mangle": {
151+
"screw_ie8": true
152+
},
153+
"compress": {
154+
"screw_ie8": true,
155+
"warnings": false
156+
},
157+
"sourceMap": false
158+
}));
159+
160+
} else {
161+
plugins.push( new AotPlugin({
162+
"mainPath": "main.ts",
163+
"hostReplacementPaths": {
164+
"environments/index.ts": "environments/index.ts"
165+
},
166+
"exclude": [],
167+
"tsConfigPath": "src/tsconfig.app.json",
168+
"skipCodeGeneration": true
169+
}));
170+
}
171+
172+
return plugins;
173+
}
174+
18175
module.exports = {
19176
"devtool": "source-map",
20177
"externals": {
@@ -24,8 +181,13 @@ module.exports = {
24181
"resolve": {
25182
"extensions": [
26183
".ts",
27-
".js"
184+
".js",
185+
".scss"
28186
],
187+
"aliasFields": [],
188+
"alias": { // WORKAROUND See. angular-cli/issues/5433
189+
"environments": isProd ? path.resolve(__dirname, 'src/environments/index.prod.ts') : path.resolve(__dirname, 'src/environments/index.ts')
190+
},
29191
"modules": [
30192
"./node_modules"
31193
]
@@ -189,110 +351,7 @@ module.exports = {
189351
}
190352
]
191353
},
192-
"plugins": [
193-
new NoEmitOnErrorsPlugin(),
194-
new GlobCopyWebpackPlugin({
195-
"patterns": [
196-
"assets",
197-
"favicon.ico"
198-
],
199-
"globOptions": {
200-
"cwd": "C:\\_PROJECTS\\_PERSO\\angular-electron\\src",
201-
"dot": true,
202-
"ignore": "**/.gitkeep"
203-
}
204-
}),
205-
new ProgressPlugin(),
206-
new HtmlWebpackPlugin({
207-
"template": "./src/index.html",
208-
"filename": "./index.html",
209-
"hash": false,
210-
"inject": true,
211-
"compile": true,
212-
"favicon": false,
213-
"minify": false,
214-
"cache": true,
215-
"showErrors": true,
216-
"chunks": "all",
217-
"excludeChunks": [],
218-
"title": "Webpack App",
219-
"xhtml": true,
220-
"chunksSortMode": function sort(left, right) {
221-
let leftIndex = entryPoints.indexOf(left.names[0]);
222-
let rightindex = entryPoints.indexOf(right.names[0]);
223-
if (leftIndex > rightindex) {
224-
return 1;
225-
}
226-
else if (leftIndex < rightindex) {
227-
return -1;
228-
}
229-
else {
230-
return 0;
231-
}
232-
}
233-
}),
234-
new BaseHrefWebpackPlugin({}),
235-
new CommonsChunkPlugin({
236-
"name": "inline",
237-
"minChunks": null
238-
}),
239-
new CommonsChunkPlugin({
240-
"name": "vendor",
241-
"minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
242-
"chunks": [
243-
"main"
244-
]
245-
}),
246-
new ExtractTextPlugin({
247-
"filename": "[name].bundle.css",
248-
"disable": true
249-
}),
250-
new LoaderOptionsPlugin({
251-
"sourceMap": false,
252-
"options": {
253-
"postcss": [
254-
autoprefixer(),
255-
postcssUrl({"url": (obj) => {
256-
// Only convert root relative URLs, which CSS-Loader won't process into require().
257-
if (!obj.url.startsWith('/') || obj.url.startsWith('//')) {
258-
return obj.url;
259-
}
260-
if (deployUrl.match(/:\/\//)) {
261-
// If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
262-
return `${deployUrl.replace(/\/$/, '')}${obj.url}`;
263-
}
264-
else if (baseHref.match(/:\/\//)) {
265-
// If baseHref contains a scheme, include it as is.
266-
return baseHref.replace(/\/$/, '') +
267-
`/${deployUrl}/${obj.url}`.replace(/\/\/+/g, '/');
268-
}
269-
else {
270-
// Join together base-href, deploy-url and the original URL.
271-
// Also dedupe multiple slashes into single ones.
272-
return `/${baseHref}/${deployUrl}/${obj.url}`.replace(/\/\/+/g, '/');
273-
}
274-
}})
275-
],
276-
"sassLoader": {
277-
"sourceMap": false,
278-
"includePaths": []
279-
},
280-
"lessLoader": {
281-
"sourceMap": false
282-
},
283-
"context": ""
284-
}
285-
}),
286-
new AotPlugin({
287-
"mainPath": "main.ts",
288-
"hostReplacementPaths": {
289-
"environments/environment.ts": "environments/environment.ts"
290-
},
291-
"exclude": [],
292-
"tsConfigPath": "src/tsconfig.app.json",
293-
"skipCodeGeneration": true
294-
})
295-
],
354+
"plugins": getPlugins(),
296355
"node": {
297356
"fs": "empty",
298357
"global": true,

0 commit comments

Comments
 (0)