Skip to content

Commit

Permalink
Fix webpack prod/dev env
Browse files Browse the repository at this point in the history
  • Loading branch information
@maximegris
maximegris committed May 1, 2017
1 parent 78e8da7 commit 8549da1
Show file tree
Hide file tree
Showing 7 changed files with 182 additions and 115 deletions.
4 changes: 3 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,9 @@ You can desactivate "Developer Tools" by commenting `win.webContents.openDevTool

## To build for production

- npm run electron:dist
* Using development variables (environments/index.ts) : `npm run electron:dev`

* Using production variables (environments/index.prod.ts) : `npm run electron:prod`

Your built files are in the /dist folder.

Expand Down
15 changes: 9 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-electron",
"version": "1.2.1",
"version": "1.3.0",
"description": "Angular 4 with Electron (Typescript + SASS + Hot Reload)",
"homepage": "https://github.com/maximegris/angular-electron",
"author": {
Expand All @@ -21,14 +21,16 @@
"test": "karma start ./karma.conf.js",
"lint": "ng lint",
"e2e": "protractor ./protractor.conf.js",
"build": "webpack && copyfiles main.js dist",
"build": "webpack --display-error-details && copyfiles main.js dist",
"build:prod": "cross-env NODE_ENV='production' npm run build",
"prepree2e": "npm start",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
"electron:serve": "electron . --serve",
"electron:dist": "npm run build && electron dist/main.js",
"electron:linux": "npm run build && copyfiles package.json dist && electron-packager dist --overwrite --platform=linux --arch=x64 --asar=true --out=app-builds",
"electron:windows": "npm run build && copyfiles package.json dist && electron-packager dist --overwrite --platform=win32 --arch=ia32 --asar=true --out=app-builds",
"electron:mac": "npm run build && copyfiles package.json dist && electron-packager dist --overwrite --platform=darwin --arch=x64 --asar=true --out=app-builds"
"electron:dev": "npm run build && electron dist/main.js",
"electron:prod": "npm run build:prod && electron dist/main.js",
"electron:linux": "npm run build:prod && copyfiles package.json dist && electron-packager dist --overwrite --platform=linux --arch=x64 --asar=true --out=app-builds",
"electron:windows": "npm run build:prod && copyfiles package.json dist && electron-packager dist --overwrite --platform=win32 --arch=ia32 --asar=true --out=app-builds",
"electron:mac": "npm run build:prod && copyfiles package.json dist && electron-packager dist --overwrite --platform=darwin --arch=x64 --asar=true --out=app-builds"
},
"dependencies": {
"@angular/common": "~4.0.2",
Expand All @@ -52,6 +54,7 @@
"autoprefixer": "~6.7.7",
"codelyzer": "~2.1.1",
"copyfiles": "~1.2.0",
"cross-env": "^4.0.0",
"css-loader": "~0.26.1",
"cssnano": "~3.10.0",
"electron": "~1.6.5",
Expand Down
0 src/environments/environment.prod.ts → src/environments/index.prod.ts
View file
File renamed without changes.
0 src/environments/environment.ts → src/environments/index.ts
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { environment } from 'environments';

if (environment.production) {
enableProdMode();
Expand Down
3 changes: 3 additions & 0 deletions tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
"experimentalDecorators": true,
"allowJs": true,
"target": "es5",
"paths": {
"environments": [ "./environments" ]
},
"typeRoots": [
"node_modules/@types"
],
Expand Down
273 changes: 166 additions & 107 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,177 @@
const path = require('path');
const webpack = require('webpack');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');

const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin } = require('webpack');
const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin, DefinePlugin, HashedModuleIdsPlugin } = require('webpack');
const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { CommonsChunkPlugin, UglifyJsPlugin } = require('webpack').optimize;
const { AotPlugin } = require('@ngtools/webpack');

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

const isProd = (process.env.NODE_ENV === 'production');

function getPlugins() {
var plugins = [];

// Always expose NODE_ENV to webpack, you can now use `process.env.NODE_ENV`
// inside your code for any environment checks; UglifyJS will automatically
// drop any unreachable code.
plugins.push(new DefinePlugin({
"process.env.NODE_ENV": "\"production\""
}));

plugins.push(new NoEmitOnErrorsPlugin());

plugins.push(new GlobCopyWebpackPlugin({
"patterns": [
"assets",
"favicon.ico"
],
"globOptions": {
"cwd": "C:\\_PROJECTS\\_PERSO\\angular-electron\\src",
"dot": true,
"ignore": "**/.gitkeep"
}
}));

plugins.push(new ProgressPlugin());

plugins.push(new HtmlWebpackPlugin({
"template": "./src/index.html",
"filename": "./index.html",
"hash": false,
"inject": true,
"compile": true,
"favicon": false,
"minify": false,
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"title": "Webpack App",
"xhtml": true,
"chunksSortMode": function sort(left, right) {
let leftIndex = entryPoints.indexOf(left.names[0]);
let rightindex = entryPoints.indexOf(right.names[0]);
if (leftIndex > rightindex) {
return 1;
}
else if (leftIndex < rightindex) {
return -1;
}
else {
return 0;
}
}
}));

plugins.push(new BaseHrefWebpackPlugin({}));

plugins.push(new CommonsChunkPlugin({
"name": "inline",
"minChunks": null
}));

plugins.push(new CommonsChunkPlugin({
"name": "vendor",
"minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
"chunks": [
"main"
]
}));

plugins.push(new ExtractTextPlugin({
"filename": "[name].bundle.css",
"disable": true
}));

plugins.push(new LoaderOptionsPlugin({
"sourceMap": false,
"options": {
"postcss": [
autoprefixer(),
postcssUrl({"url": (obj) => {
// Only convert root relative URLs, which CSS-Loader won't process into require().
if (!obj.url.startsWith('/') || obj.url.startsWith('//')) {
return obj.url;
}
if (deployUrl.match(/:\/\//)) {
// If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
return `${deployUrl.replace(/\/$/, '')}${obj.url}`;
}
else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
`/${deployUrl}/${obj.url}`.replace(/\/\/+/g, '/');
}
else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return `/${baseHref}/${deployUrl}/${obj.url}`.replace(/\/\/+/g, '/');
}
}})
],
"sassLoader": {
"sourceMap": false,
"includePaths": []
},
"lessLoader": {
"sourceMap": false
},
"context": ""
}
}));

if(isProd) {
plugins.push(new HashedModuleIdsPlugin({
"hashFunction": "md5",
"hashDigest": "base64",
"hashDigestLength": 4
}));

plugins.push(new AotPlugin({
"mainPath": "main.ts",
"hostReplacementPaths": {
"environments/index.ts": "environments/index.prod.ts"
},
"exclude": [],
"tsConfigPath": "src/tsconfig.app.json"
}));

plugins.push(new UglifyJsPlugin({
"mangle": {
"screw_ie8": true
},
"compress": {
"screw_ie8": true,
"warnings": false
},
"sourceMap": false
}));

} else {
plugins.push( new AotPlugin({
"mainPath": "main.ts",
"hostReplacementPaths": {
"environments/index.ts": "environments/index.ts"
},
"exclude": [],
"tsConfigPath": "src/tsconfig.app.json",
"skipCodeGeneration": true
}));
}

return plugins;
}

module.exports = {
"devtool": "source-map",
"externals": {
Expand All @@ -24,8 +181,13 @@ module.exports = {
"resolve": {
"extensions": [
".ts",
".js"
".js",
".scss"
],
"aliasFields": [],
"alias": { // WORKAROUND See. angular-cli/issues/5433
"environments": isProd ? path.resolve(__dirname, 'src/environments/index.prod.ts') : path.resolve(__dirname, 'src/environments/index.ts')
},
"modules": [
"./node_modules"
]
Expand Down Expand Up @@ -189,110 +351,7 @@ module.exports = {
}
]
},
"plugins": [
new NoEmitOnErrorsPlugin(),
new GlobCopyWebpackPlugin({
"patterns": [
"assets",
"favicon.ico"
],
"globOptions": {
"cwd": "C:\\_PROJECTS\\_PERSO\\angular-electron\\src",
"dot": true,
"ignore": "**/.gitkeep"
}
}),
new ProgressPlugin(),
new HtmlWebpackPlugin({
"template": "./src/index.html",
"filename": "./index.html",
"hash": false,
"inject": true,
"compile": true,
"favicon": false,
"minify": false,
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"title": "Webpack App",
"xhtml": true,
"chunksSortMode": function sort(left, right) {
let leftIndex = entryPoints.indexOf(left.names[0]);
let rightindex = entryPoints.indexOf(right.names[0]);
if (leftIndex > rightindex) {
return 1;
}
else if (leftIndex < rightindex) {
return -1;
}
else {
return 0;
}
}
}),
new BaseHrefWebpackPlugin({}),
new CommonsChunkPlugin({
"name": "inline",
"minChunks": null
}),
new CommonsChunkPlugin({
"name": "vendor",
"minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
"chunks": [
"main"
]
}),
new ExtractTextPlugin({
"filename": "[name].bundle.css",
"disable": true
}),
new LoaderOptionsPlugin({
"sourceMap": false,
"options": {
"postcss": [
autoprefixer(),
postcssUrl({"url": (obj) => {
// Only convert root relative URLs, which CSS-Loader won't process into require().
if (!obj.url.startsWith('/') || obj.url.startsWith('//')) {
return obj.url;
}
if (deployUrl.match(/:\/\//)) {
// If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
return `${deployUrl.replace(/\/$/, '')}${obj.url}`;
}
else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
`/${deployUrl}/${obj.url}`.replace(/\/\/+/g, '/');
}
else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return `/${baseHref}/${deployUrl}/${obj.url}`.replace(/\/\/+/g, '/');
}
}})
],
"sassLoader": {
"sourceMap": false,
"includePaths": []
},
"lessLoader": {
"sourceMap": false
},
"context": ""
}
}),
new AotPlugin({
"mainPath": "main.ts",
"hostReplacementPaths": {
"environments/environment.ts": "environments/environment.ts"
},
"exclude": [],
"tsConfigPath": "src/tsconfig.app.json",
"skipCodeGeneration": true
})
],
"plugins": getPlugins(),
"node": {
"fs": "empty",
"global": true,
Expand Down

0 comments on commit 8549da1

Please sign in to comment.