Fix webpack prod/dev env
This commit is contained in:
Maxime GRIS
@@ -1,13 +1,14 @@
|
||||
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');
|
||||
@@ -15,6 +16,162 @@ 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": {
|
||||
@@ -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"
|
||||
]
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user