551 lines
14 KiB
JavaScript
551 lines
14 KiB
JavaScript
const fs = require('fs');
|
|
const path = require('path');
|
|
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
|
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
|
|
const CircularDependencyPlugin = require('circular-dependency-plugin');
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
|
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
|
const autoprefixer = require('autoprefixer');
|
|
const postcssUrl = require('postcss-url');
|
|
const customProperties = require('postcss-custom-properties');
|
|
|
|
const { NoEmitOnErrorsPlugin, SourceMapDevToolPlugin, DefinePlugin, NamedModulesPlugin } = require('webpack');
|
|
const { BaseHrefWebpackPlugin, NamedLazyChunksWebpackPlugin, ScriptsWebpackPlugin } = require('@angular/cli/plugins/webpack');
|
|
const { CommonsChunkPlugin } = require('webpack').optimize;
|
|
const { AngularCompilerPlugin } = require('@ngtools/webpack');
|
|
const ConcatPlugin = require('webpack-concat-plugin');
|
|
|
|
const nodeModules = path.join(process.cwd(), 'node_modules');
|
|
const realNodeModules = fs.realpathSync(nodeModules);
|
|
const genDirNodeModules = path.join(process.cwd(), 'src', '$$_gendir', 'node_modules');
|
|
const entryPoints = ["inline", "polyfills", "sw-register", "styles", "vendor", "main"];
|
|
const minimizeCss = false;
|
|
const baseHref = "";
|
|
const deployUrl = "";
|
|
|
|
const postcssPlugins = function () {
|
|
// safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
|
|
const importantCommentRe = /@preserve|@license|[@#]\s*source(?:Mapping)?URL|^!/i;
|
|
const minimizeOptions = {
|
|
autoprefixer: false,
|
|
safe: true,
|
|
mergeLonghand: false,
|
|
discardComments: { remove: (comment) => !importantCommentRe.test(comment) }
|
|
};
|
|
return [
|
|
postcssUrl({
|
|
url: (obj) => {
|
|
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, '/');
|
|
}
|
|
}
|
|
}),
|
|
autoprefixer(),
|
|
customProperties({ preserve: true })
|
|
].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
|
|
};
|
|
|
|
const isProd = (process.env.NODE_ENV === 'production');
|
|
|
|
//add all external css to be added in our index.html--> like as if it's .angular-cli.json
|
|
const styles = [
|
|
"./src/styles.scss"
|
|
];
|
|
|
|
//we add all our external scripts we want to load externally, like inserting in our index.html --> like as if it's .angular-cli.json
|
|
const scripts = [
|
|
];
|
|
|
|
//create file path for each , so we use for our excludes and includes where needed
|
|
let style_paths = styles.map(style_src => path.join(process.cwd(), style_src));
|
|
|
|
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());
|
|
|
|
if (scripts.length > 0) {
|
|
plugins.push(new ConcatPlugin({
|
|
"uglify": false,
|
|
"sourceMap": true,
|
|
"name": "scripts",
|
|
"fileName": "[name].bundle.js",
|
|
"filesToConcat": scripts
|
|
}));
|
|
plugins.push(new ScriptsWebpackPlugin({
|
|
name: "scripts",
|
|
sourceMap: true,
|
|
scripts: scripts
|
|
}));
|
|
}
|
|
|
|
plugins.push(new CopyWebpackPlugin([
|
|
{
|
|
"context": "src",
|
|
"to": "",
|
|
"from": {
|
|
"glob": "assets/**/*",
|
|
"dot": true
|
|
}
|
|
},
|
|
{
|
|
"context": "src",
|
|
"to": "",
|
|
"from": {
|
|
"glob": "favicon.*",
|
|
"dot": true
|
|
}
|
|
}
|
|
], {
|
|
"ignore": [
|
|
".gitkeep"
|
|
],
|
|
"debug": "warning"
|
|
}));
|
|
|
|
plugins.push(new ProgressPlugin());
|
|
|
|
plugins.push(new CircularDependencyPlugin({
|
|
"exclude": /(\\|\/)node_modules(\\|\/)/,
|
|
"failOnError": false
|
|
}));
|
|
|
|
plugins.push(new NamedLazyChunksWebpackPlugin());
|
|
|
|
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) => {
|
|
return module.resource
|
|
&& (module.resource.startsWith(nodeModules)
|
|
|| module.resource.startsWith(genDirNodeModules)
|
|
|| module.resource.startsWith(realNodeModules));
|
|
},
|
|
"chunks": [
|
|
"main"
|
|
]
|
|
}));
|
|
|
|
plugins.push(new SourceMapDevToolPlugin({
|
|
"filename": "[file].map[query]",
|
|
"moduleFilenameTemplate": "[resource-path]",
|
|
"fallbackModuleFilenameTemplate": "[resource-path]?[hash]",
|
|
"sourceRoot": "webpack:///"
|
|
}));
|
|
|
|
plugins.push(new CommonsChunkPlugin({
|
|
"name": [
|
|
"main"
|
|
],
|
|
"minChunks": 2,
|
|
"async": "common"
|
|
}));
|
|
|
|
plugins.push(new NamedModulesPlugin({}));
|
|
|
|
if (isProd) {
|
|
plugins.push(new AngularCompilerPlugin({
|
|
"mainPath": "main.ts",
|
|
"platform": 0,
|
|
"sourceMap": true,
|
|
"tsConfigPath": "src/tsconfig.app.json",
|
|
"skipCodeGeneration": true,
|
|
"compilerOptions": {},
|
|
"hostReplacementPaths": {
|
|
"environments/index.ts": "environments/index.prod.ts"
|
|
},
|
|
"exclude": []
|
|
}));
|
|
|
|
plugins.push(new UglifyJsPlugin({
|
|
"sourceMap": false
|
|
}));
|
|
|
|
} else {
|
|
plugins.push(new AngularCompilerPlugin({
|
|
"mainPath": "main.ts",
|
|
"platform": 0,
|
|
"sourceMap": true,
|
|
"tsConfigPath": "src/tsconfig.app.json",
|
|
"skipCodeGeneration": true,
|
|
"compilerOptions": {},
|
|
"hostReplacementPaths": {
|
|
"environments/index.ts": "environments/index.ts"
|
|
},
|
|
"exclude": []
|
|
}));
|
|
}
|
|
|
|
return plugins;
|
|
}
|
|
|
|
module.exports = {
|
|
"devtool": "source-map",
|
|
"externals": {
|
|
"electron": "require('electron')",
|
|
"buffer": "require('buffer')",
|
|
"child_process": "require('child_process')",
|
|
"crypto": "require('crypto')",
|
|
"events": "require('events')",
|
|
"fs": "require('fs')",
|
|
"http": "require('http')",
|
|
"https": "require('https')",
|
|
"assert": "require('assert')",
|
|
"dns": "require('dns')",
|
|
"net": "require('net')",
|
|
"os": "require('os')",
|
|
"path": "require('path')",
|
|
"querystring": "require('querystring')",
|
|
"readline": "require('readline')",
|
|
"repl": "require('repl')",
|
|
"stream": "require('stream')",
|
|
"string_decoder": "require('string_decoder')",
|
|
"url": "require('url')",
|
|
"util": "require('util')",
|
|
"zlib": "require('zlib')"
|
|
},
|
|
"resolve": {
|
|
"extensions": [
|
|
".ts",
|
|
".js",
|
|
".scss",
|
|
".json"
|
|
],
|
|
"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"
|
|
],
|
|
"mainFields": [
|
|
"browser",
|
|
"module",
|
|
"main"
|
|
]
|
|
},
|
|
"resolveLoader": {
|
|
"modules": [
|
|
"./node_modules"
|
|
]
|
|
},
|
|
"entry": {
|
|
"main": [
|
|
"./src/main.ts"
|
|
],
|
|
"polyfills": [
|
|
"./src/polyfills.ts"
|
|
],
|
|
"styles": styles
|
|
},
|
|
"output": {
|
|
"path": path.join(process.cwd(), "dist"),
|
|
"filename": "[name].bundle.js",
|
|
"chunkFilename": "[id].chunk.js",
|
|
"crossOriginLoading": false
|
|
},
|
|
"module": {
|
|
"rules": [
|
|
{
|
|
"test": /\.html$/,
|
|
"use": ["html-loader"]
|
|
},
|
|
{
|
|
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|json|xml|ico|cur|ani)$/,
|
|
"use": ["file-loader?name=[path][name].[ext]"]
|
|
},
|
|
{
|
|
"exclude": style_paths,
|
|
"test": /\.css$/,
|
|
"use": [
|
|
"exports-loader?module.exports.toString()",
|
|
{
|
|
"loader": "css-loader",
|
|
"options": {
|
|
"sourceMap": false,
|
|
"importLoaders": 1
|
|
}
|
|
},
|
|
{
|
|
"loader": "postcss-loader",
|
|
"options": {
|
|
"ident": "postcss",
|
|
"plugins": postcssPlugins
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"exclude": style_paths,
|
|
"test": /\.scss$|\.sass$/,
|
|
"use": [
|
|
"exports-loader?module.exports.toString()",
|
|
{
|
|
"loader": "css-loader",
|
|
"options": {
|
|
"sourceMap": false,
|
|
"importLoaders": 1
|
|
}
|
|
},
|
|
{
|
|
"loader": "postcss-loader",
|
|
"options": {
|
|
"ident": "postcss",
|
|
"plugins": postcssPlugins
|
|
}
|
|
},
|
|
{
|
|
"loader": "sass-loader",
|
|
"options": {
|
|
"sourceMap": false,
|
|
"precision": 8,
|
|
"includePaths": []
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"exclude": style_paths,
|
|
"test": /\.less$/,
|
|
"use": [
|
|
"exports-loader?module.exports.toString()",
|
|
{
|
|
"loader": "css-loader",
|
|
"options": {
|
|
"sourceMap": false,
|
|
"importLoaders": 1
|
|
}
|
|
},
|
|
{
|
|
"loader": "postcss-loader",
|
|
"options": {
|
|
"ident": "postcss",
|
|
"plugins": postcssPlugins
|
|
}
|
|
},
|
|
{
|
|
"loader": "less-loader",
|
|
"options": {
|
|
"sourceMap": false
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"exclude": style_paths,
|
|
"test": /\.styl$/,
|
|
"use": [
|
|
"exports-loader?module.exports.toString()",
|
|
{
|
|
"loader": "css-loader",
|
|
"options": {
|
|
"sourceMap": false,
|
|
"importLoaders": 1
|
|
}
|
|
},
|
|
{
|
|
"loader": "postcss-loader",
|
|
"options": {
|
|
"ident": "postcss",
|
|
"plugins": postcssPlugins
|
|
}
|
|
},
|
|
{
|
|
"loader": "stylus-loader",
|
|
"options": {
|
|
"sourceMap": false,
|
|
"paths": []
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"include": style_paths,
|
|
"test": /\.css$/,
|
|
"use": [
|
|
"style-loader",
|
|
{
|
|
"loader": "css-loader",
|
|
"options": {
|
|
"sourceMap": false,
|
|
"importLoaders": 1
|
|
}
|
|
},
|
|
{
|
|
"loader": "postcss-loader",
|
|
"options": {
|
|
"ident": "postcss",
|
|
"plugins": postcssPlugins
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"include": style_paths,
|
|
"test": /\.scss$|\.sass$/,
|
|
"use": [
|
|
"style-loader",
|
|
{
|
|
"loader": "css-loader",
|
|
"options": {
|
|
"sourceMap": false,
|
|
"importLoaders": 1
|
|
}
|
|
},
|
|
{
|
|
"loader": "postcss-loader",
|
|
"options": {
|
|
"ident": "postcss",
|
|
"plugins": postcssPlugins
|
|
}
|
|
},
|
|
{
|
|
"loader": "sass-loader",
|
|
"options": {
|
|
"sourceMap": false,
|
|
"precision": 8,
|
|
"includePaths": []
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"include":style_paths,
|
|
"test": /\.less$/,
|
|
"use": [
|
|
"style-loader",
|
|
{
|
|
"loader": "css-loader",
|
|
"options": {
|
|
"sourceMap": false,
|
|
"importLoaders": 1
|
|
}
|
|
},
|
|
{
|
|
"loader": "postcss-loader",
|
|
"options": {
|
|
"ident": "postcss",
|
|
"plugins": postcssPlugins
|
|
}
|
|
},
|
|
{
|
|
"loader": "less-loader",
|
|
"options": {
|
|
"sourceMap": false
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"include": style_paths,
|
|
"test": /\.styl$/,
|
|
"use": [
|
|
"style-loader",
|
|
{
|
|
"loader": "css-loader",
|
|
"options": {
|
|
"sourceMap": false,
|
|
"importLoaders": 1
|
|
}
|
|
},
|
|
{
|
|
"loader": "postcss-loader",
|
|
"options": {
|
|
"ident": "postcss",
|
|
"plugins": postcssPlugins
|
|
}
|
|
},
|
|
{
|
|
"loader": "stylus-loader",
|
|
"options": {
|
|
"sourceMap": false,
|
|
"paths": []
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"test": /\.ts$/,
|
|
"use": "@ngtools/webpack"
|
|
}
|
|
]
|
|
},
|
|
"plugins": getPlugins(),
|
|
"node": {
|
|
fs: "empty",
|
|
global: true,
|
|
crypto: "empty",
|
|
tls: "empty",
|
|
net: "empty",
|
|
process: true,
|
|
module: false,
|
|
clearImmediate: false,
|
|
setImmediate: false,
|
|
__dirname: false,
|
|
__filename: false
|
|
},
|
|
"devServer": {
|
|
"historyApiFallback": true
|
|
}
|
|
};
|