mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-04 15:41:52 +01:00
chore(dependencies): update dependencies, move to @types, some refactoring as per AngularClass/angular2-webpack-starter project
This commit is contained in:
nixa
parent
7d0ff2ef96
commit
e7fca6d4ed
24 changed files with 505 additions and 295 deletions
43
config/head-config.common.js
Normal file
43
config/head-config.common.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
/**
|
||||
* Configuration for head elements added during the creation of index.html.
|
||||
*
|
||||
* All href attributes are added the publicPath (if exists) by default.
|
||||
* You can explicitly hint to prefix a publicPath by setting a boolean value to a key that has
|
||||
* the same name as the attribute you want to operate on, but prefix with =
|
||||
*
|
||||
* Example:
|
||||
* { name: "msapplication-TileImage", content: "/assets/icon/ms-icon-144x144.png", "=content": true },
|
||||
* Will prefix the publicPath to content.
|
||||
*
|
||||
* { rel: "apple-touch-icon", sizes: "57x57", href: "/assets/icon/apple-icon-57x57.png", "=href": false },
|
||||
* Will not prefix the publicPath on href (href attributes are added by default
|
||||
*
|
||||
*/
|
||||
module.exports = {
|
||||
link: [
|
||||
/** <link> tags for "apple-touch-icon" (AKA Web Clips). **/
|
||||
{ rel: "apple-touch-icon", sizes: "57x57", href: "/assets/icon/apple-icon-57x57.png" },
|
||||
{ rel: "apple-touch-icon", sizes: "60x60", href: "/assets/icon/apple-icon-60x60.png" },
|
||||
{ rel: "apple-touch-icon", sizes: "72x72", href: "/assets/icon/apple-icon-72x72.png" },
|
||||
{ rel: "apple-touch-icon", sizes: "76x76", href: "/assets/icon/apple-icon-76x76.png" },
|
||||
{ rel: "apple-touch-icon", sizes: "114x114", href: "/assets/icon/apple-icon-114x114.png" },
|
||||
{ rel: "apple-touch-icon", sizes: "120x120", href: "/assets/icon/apple-icon-120x120.png" },
|
||||
{ rel: "apple-touch-icon", sizes: "144x144", href: "/assets/icon/apple-icon-144x144.png" },
|
||||
{ rel: "apple-touch-icon", sizes: "152x152", href: "/assets/icon/apple-icon-152x152.png" },
|
||||
{ rel: "apple-touch-icon", sizes: "180x180", href: "/assets/icon/apple-icon-180x180.png" },
|
||||
|
||||
/** <link> tags for android web app icons **/
|
||||
{ rel: "icon", type: "image/png", sizes: "192x192", href: "/assets/icon/android-icon-192x192.png" },
|
||||
|
||||
/** <link> tags for favicons **/
|
||||
{ rel: "icon", type: "image/png", sizes: "32x32", href: "/assets/icon/favicon-32x32.png" },
|
||||
{ rel: "icon", type: "image/png", sizes: "96x96", href: "/assets/icon/favicon-96x96.png" },
|
||||
{ rel: "icon", type: "image/png", sizes: "16x16", href: "/assets/icon/favicon-16x16.png" }
|
||||
|
||||
],
|
||||
meta: [
|
||||
{ name: "msapplication-TileColor", content: "#ffffff" },
|
||||
{ name: "msapplication-TileImage", content: "/assets/icon/ms-icon-144x144.png", "=content": true },
|
||||
{ name: "theme-color", content: "#4691d1" }
|
||||
]
|
||||
};
|
||||
|
|
@ -1,69 +1,32 @@
|
|||
/**
|
||||
* @author: @AngularClass
|
||||
*/
|
||||
|
||||
var path = require('path');
|
||||
|
||||
// Helper functions
|
||||
var _root = path.resolve(__dirname, '..');
|
||||
|
||||
console.log('root directory:', root());
|
||||
var ROOT = path.resolve(__dirname, '..');
|
||||
|
||||
function hasProcessFlag(flag) {
|
||||
return process.argv.join('').indexOf(flag) > -1;
|
||||
}
|
||||
|
||||
function isWebpackDevServer() {
|
||||
return process.argv[1] && !! (/webpack-dev-server$/.exec(process.argv[1]));
|
||||
}
|
||||
|
||||
function root(args) {
|
||||
args = Array.prototype.slice.call(arguments, 0);
|
||||
return path.join.apply(path, [_root].concat(args));
|
||||
return path.join.apply(path, [ROOT].concat(args));
|
||||
}
|
||||
|
||||
function rootNode(args) {
|
||||
args = Array.prototype.slice.call(arguments, 0);
|
||||
return root.apply(path, ['node_modules'].concat(args));
|
||||
}
|
||||
|
||||
function prependExt(extensions, args) {
|
||||
args = args || [];
|
||||
if (!Array.isArray(args)) { args = [args] }
|
||||
return extensions.reduce(function(memo, val) {
|
||||
return memo.concat(val, args.map(function(prefix) {
|
||||
return prefix + val;
|
||||
}));
|
||||
}, ['']);
|
||||
}
|
||||
|
||||
function packageSort(packages) {
|
||||
// packages = ['polyfills', 'vendor', 'main']
|
||||
var len = packages.length - 1;
|
||||
var first = packages[0];
|
||||
var last = packages[len];
|
||||
return function sort(a, b) {
|
||||
// polyfills always first
|
||||
if (a.names[0] === first) {
|
||||
return -1;
|
||||
}
|
||||
// main always last
|
||||
if (a.names[0] === last) {
|
||||
return 1;
|
||||
}
|
||||
// vendor before app
|
||||
if (a.names[0] !== first && b.names[0] === last) {
|
||||
return -1;
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
function checkNodeImport(context, request, cb) {
|
||||
if (!path.isAbsolute(request) && request.charAt(0) !== '.') {
|
||||
cb(null, 'commonjs ' + request); return;
|
||||
}
|
||||
cb();
|
||||
}
|
||||
|
||||
function reverse(arr) {
|
||||
return arr.reverse();
|
||||
}
|
||||
|
||||
exports.reverse = reverse;
|
||||
exports.hasProcessFlag = hasProcessFlag;
|
||||
exports.isWebpackDevServer = isWebpackDevServer;
|
||||
exports.root = root;
|
||||
exports.rootNode = rootNode;
|
||||
exports.prependExt = prependExt;
|
||||
exports.prepend = prependExt;
|
||||
exports.packageSort = packageSort;
|
||||
exports.checkNodeImport = checkNodeImport;
|
||||
|
|
|
|||
103
config/html-elements-plugin/index.js
Normal file
103
config/html-elements-plugin/index.js
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
function HtmlElementsPlugin(locations) {
|
||||
this.locations = locations;
|
||||
}
|
||||
|
||||
HtmlElementsPlugin.prototype.apply = function(compiler) {
|
||||
var self = this;
|
||||
compiler.plugin('compilation', function(compilation) {
|
||||
compilation.options.htmlElements = compilation.options.htmlElements || {};
|
||||
|
||||
compilation.plugin('html-webpack-plugin-before-html-generation', function(htmlPluginData, callback) {
|
||||
const locations = self.locations;
|
||||
|
||||
if (locations) {
|
||||
const publicPath = htmlPluginData.assets.publicPath;
|
||||
|
||||
Object.getOwnPropertyNames(locations).forEach(function(loc) {
|
||||
compilation.options.htmlElements[loc] = getHtmlElementString(locations[loc], publicPath);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
callback(null, htmlPluginData);
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const RE_ENDS_WITH_BS = /\/$/;
|
||||
|
||||
/**
|
||||
* Create an HTML tag with attributes from a map.
|
||||
*
|
||||
* Example:
|
||||
* createTag('link', { rel: "manifest", href: "/assets/manifest.json" })
|
||||
* // <link rel="manifest" href="/assets/manifest.json">
|
||||
* @param tagName The name of the tag
|
||||
* @param attrMap A Map of attribute names (keys) and their values.
|
||||
* @param publicPath a path to add to eh start of static asset url
|
||||
* @returns {string}
|
||||
*/
|
||||
function createTag(tagName, attrMap, publicPath) {
|
||||
publicPath = publicPath || '';
|
||||
|
||||
// add trailing slash if we have a publicPath and it doesn't have one.
|
||||
if (publicPath && !RE_ENDS_WITH_BS.test(publicPath)) publicPath += '/';
|
||||
|
||||
const attributes = Object.getOwnPropertyNames(attrMap)
|
||||
.filter(function(name) { return name[0] !== '='; } )
|
||||
.map(function(name) {
|
||||
var value = attrMap[name];
|
||||
|
||||
if (publicPath) {
|
||||
// check if we have explicit instruction, use it if so (e.g: =herf: false)
|
||||
// if no instruction, use public path if it's href attribute.
|
||||
const usePublicPath = attrMap.hasOwnProperty('=' + name) ? !!attrMap['=' + name] : name === 'href';
|
||||
|
||||
if (usePublicPath) {
|
||||
// remove a starting trailing slash if the value has one so we wont have //
|
||||
value = publicPath + (value[0] === '/' ? value.substr(1) : value);
|
||||
}
|
||||
}
|
||||
|
||||
return name + '="' + value + '"';
|
||||
});
|
||||
|
||||
return '<' + tagName + ' ' + attributes.join(' ') + '>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a string representing all html elements defined in a data source.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* const ds = {
|
||||
* link: [
|
||||
* { rel: "apple-touch-icon", sizes: "57x57", href: "/assets/icon/apple-icon-57x57.png" }
|
||||
* ],
|
||||
* meta: [
|
||||
* { name: "msapplication-TileColor", content: "#00bcd4" }
|
||||
* ]
|
||||
* }
|
||||
*
|
||||
* getHeadTags(ds);
|
||||
* // "<link rel="apple-touch-icon" sizes="57x57" href="/assets/icon/apple-icon-57x57.png">"
|
||||
* "<meta name="msapplication-TileColor" content="#00bcd4">"
|
||||
*
|
||||
* @returns {string}
|
||||
*/
|
||||
function getHtmlElementString(dataSource, publicPath) {
|
||||
return Object.getOwnPropertyNames(dataSource)
|
||||
.map(function(name) {
|
||||
if (Array.isArray(dataSource[name])) {
|
||||
return dataSource[name].map(function(attrs) { return createTag(name, attrs, publicPath); } );
|
||||
} else {
|
||||
return [ createTag(name, dataSource[name], publicPath) ];
|
||||
}
|
||||
})
|
||||
.reduce(function(arr, curr) {
|
||||
return arr.concat(curr);
|
||||
}, [])
|
||||
.join('\n\t');
|
||||
}
|
||||
module.exports = HtmlElementsPlugin;
|
||||
2
config/modules/angular2-hmr-prod.js
vendored
Normal file
2
config/modules/angular2-hmr-prod.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
exports.HmrState = function() {
|
||||
};
|
||||
|
|
@ -1,20 +1,37 @@
|
|||
const webpack = require('webpack');
|
||||
const helpers = require('./helpers');
|
||||
|
||||
/*
|
||||
* Webpack Plugins
|
||||
*/
|
||||
// problem with copy-webpack-plugin
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const HtmlElementsPlugin = require('./html-elements-plugin');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
|
||||
/*
|
||||
* Webpack Constants
|
||||
*/
|
||||
const METADATA = {
|
||||
title: 'ng2-admin - Angular 2 Admin Template',
|
||||
description: 'Free Angular 2 and Bootstrap 4 Admin Template',
|
||||
baseUrl: '/'
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Webpack configuration
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#cli
|
||||
*/
|
||||
module.exports = {
|
||||
|
||||
/*
|
||||
* Static metadata for index.html
|
||||
*
|
||||
* See: (custom attribute)
|
||||
*/
|
||||
metadata: METADATA,
|
||||
|
||||
/*
|
||||
|
|
@ -23,8 +40,10 @@ module.exports = {
|
|||
* You can pass false to disable it.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#cache
|
||||
* cache: false,
|
||||
*
|
||||
*/
|
||||
//cache: false,
|
||||
|
||||
/*
|
||||
* The entry point for the bundle
|
||||
* Our Angular.js app
|
||||
*
|
||||
|
|
@ -32,9 +51,9 @@ module.exports = {
|
|||
*/
|
||||
entry: {
|
||||
|
||||
'polyfills': './src/polyfills.ts',
|
||||
'vendor': './src/vendor.ts',
|
||||
'main': './src/main.browser.ts'
|
||||
'polyfills': './src/polyfills.browser.ts',
|
||||
'vendor': './src/vendor.browser.ts',
|
||||
'main': './src/main.browser.ts'
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -50,16 +69,21 @@ module.exports = {
|
|||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#resolve-extensions
|
||||
*/
|
||||
extensions: ['', '.ts', '.js', '.css', '.scss'],
|
||||
extensions: ['', '.ts', '.js', '.css', '.scss', '.json'],
|
||||
|
||||
// Make sure root is src
|
||||
root: helpers.root('src'),
|
||||
|
||||
// remove other default values
|
||||
modulesDirectories: ['node_modules', 'bower_components']
|
||||
modulesDirectories: ['node_modules'],
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Options affecting the normal modules.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#module
|
||||
*/
|
||||
module: {
|
||||
|
||||
/*
|
||||
|
|
@ -74,7 +98,7 @@ module.exports = {
|
|||
*
|
||||
* See: https://github.com/wbuchwalter/tslint-loader
|
||||
*/
|
||||
// { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
|
||||
// { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
|
||||
|
||||
/*
|
||||
* Source map loader support for *.js files
|
||||
|
|
@ -88,6 +112,8 @@ module.exports = {
|
|||
exclude: [
|
||||
// these packages have problems with their sourcemaps
|
||||
helpers.root('node_modules/rxjs'),
|
||||
helpers.root('node_modules/@angular'),
|
||||
helpers.root('node_modules/@ngrx'),
|
||||
helpers.root('node_modules/ng2-bootstrap'),
|
||||
helpers.root('node_modules/ng2-branchy')
|
||||
]
|
||||
|
|
@ -95,6 +121,14 @@ module.exports = {
|
|||
|
||||
],
|
||||
|
||||
/*
|
||||
* An array of automatically applied loaders.
|
||||
*
|
||||
* IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
|
||||
* This means they are not resolved relative to the configuration file.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#module-loaders
|
||||
*/
|
||||
loaders: [
|
||||
|
||||
/*
|
||||
|
|
@ -119,14 +153,14 @@ module.exports = {
|
|||
},
|
||||
|
||||
/*
|
||||
* Raw loader support for *.css files
|
||||
* to string and css loader support for *.css files
|
||||
* Returns file content as string
|
||||
*
|
||||
* See: https://github.com/webpack/raw-loader
|
||||
*/
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: 'raw-loader'
|
||||
// loaders: ['to-string-loader', 'css-loader']
|
||||
loaders: ['raw-loader']
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -208,7 +242,7 @@ module.exports = {
|
|||
* See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
|
||||
*/
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: helpers.reverse(['polyfills', 'vendor'])
|
||||
name: ['polyfills', 'vendor'].reverse()
|
||||
}),
|
||||
|
||||
/*
|
||||
|
|
@ -234,16 +268,39 @@ module.exports = {
|
|||
*/
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'src/index.html',
|
||||
chunksSortMode: helpers.packageSort(['polyfills', 'vendor', 'main'])
|
||||
chunksSortMode: 'dependency'
|
||||
}),
|
||||
|
||||
// TODO: make sure this is a correct configuration
|
||||
new webpack.ProvidePlugin({
|
||||
jQuery: 'jquery',
|
||||
$: 'jquery',
|
||||
jquery: 'jquery',
|
||||
'Tether': 'tether',
|
||||
'window.Tether': 'tether'
|
||||
}),
|
||||
|
||||
/*
|
||||
* Plugin: HtmlHeadConfigPlugin
|
||||
* Description: Generate html tags based on javascript maps.
|
||||
*
|
||||
* If a publicPath is set in the webpack output configuration, it will be automatically added to
|
||||
* href attributes, you can disable that by adding a "=href": false property.
|
||||
* You can also enable it to other attribute by settings "=attName": true.
|
||||
*
|
||||
* The configuration supplied is map between a location (key) and an element definition object (value)
|
||||
* The location (key) is then exported to the template under then htmlElements property in webpack configuration.
|
||||
*
|
||||
* Example:
|
||||
* Adding this plugin configuration
|
||||
* new HtmlElementsPlugin({
|
||||
* headTags: { ... }
|
||||
* })
|
||||
*
|
||||
* Means we can use it in the template like this:
|
||||
* <%= webpackConfig.htmlElements.headTags %>
|
||||
*
|
||||
* Dependencies: HtmlWebpackPlugin
|
||||
*/
|
||||
new HtmlElementsPlugin({
|
||||
headTags: require('./head-config.common')
|
||||
})
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ module.exports = webpackMerge(commonConfig, {
|
|||
* See: http://webpack.github.io/docs/configuration.html#devtool
|
||||
* See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
|
||||
*/
|
||||
devtool: 'cheap-module-eval-source-map',
|
||||
devtool: 'cheap-module-source-map',
|
||||
|
||||
/**
|
||||
* Options affecting the output of the compilation.
|
||||
|
|
@ -80,15 +80,17 @@ module.exports = webpackMerge(commonConfig, {
|
|||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
|
||||
*/
|
||||
sourceMapFilename: '[file].map',
|
||||
sourceMapFilename: '[name].map',
|
||||
|
||||
/** The filename of non-entry chunks as relative path
|
||||
* inside the output.path directory.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
|
||||
*/
|
||||
chunkFilename: '[id].chunk.js'
|
||||
chunkFilename: '[id].chunk.js',
|
||||
|
||||
library: 'ac_[name]',
|
||||
libraryTarget: 'var',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
|
|
@ -111,7 +113,7 @@ module.exports = webpackMerge(commonConfig, {
|
|||
'NODE_ENV': JSON.stringify(METADATA.ENV),
|
||||
'HMR': METADATA.HMR,
|
||||
}
|
||||
})
|
||||
}),
|
||||
],
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
/**
|
||||
* @author: @AngularClass
|
||||
*/
|
||||
|
||||
const helpers = require('./helpers');
|
||||
const webpackMerge = require('webpack-merge'); // used to merge webpack configs
|
||||
const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
|
||||
|
|
@ -7,11 +11,12 @@ const commonConfig = require('./webpack.common.js'); // the settings that are co
|
|||
*/
|
||||
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
|
||||
const DefinePlugin = require('webpack/lib/DefinePlugin');
|
||||
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
|
||||
const IgnorePlugin = require('webpack/lib/IgnorePlugin');
|
||||
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
|
||||
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
|
||||
const CompressionPlugin = require('compression-webpack-plugin');
|
||||
const WebpackMd5Hash = require('webpack-md5-hash');
|
||||
|
||||
const CompressionPlugin = require('compression-webpack-plugin');
|
||||
/**
|
||||
* Webpack Constants
|
||||
*/
|
||||
|
|
@ -22,13 +27,11 @@ const METADATA = webpackMerge(commonConfig.metadata, {
|
|||
host: HOST,
|
||||
port: PORT,
|
||||
ENV: ENV,
|
||||
HMR: false,
|
||||
baseUrl: ''
|
||||
HMR: false
|
||||
});
|
||||
|
||||
module.exports = webpackMerge(commonConfig, {
|
||||
|
||||
metadata: METADATA,
|
||||
/**
|
||||
* Switch loaders to debug mode.
|
||||
*
|
||||
|
|
@ -72,7 +75,7 @@ module.exports = webpackMerge(commonConfig, {
|
|||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
|
||||
*/
|
||||
sourceMapFilename: '[file].map',
|
||||
sourceMapFilename: '[name].[chunkhash].bundle.map',
|
||||
|
||||
/**
|
||||
* The filename of non-entry chunks as relative path
|
||||
|
|
@ -152,17 +155,34 @@ module.exports = webpackMerge(commonConfig, {
|
|||
// }, // debug
|
||||
// comments: true, //debug
|
||||
|
||||
|
||||
beautify: false, //prod
|
||||
|
||||
mangle: false, //prod
|
||||
|
||||
compress: {
|
||||
screw_ie8: true
|
||||
}, //prod
|
||||
|
||||
mangle: { screw_ie8 : true }, //prod
|
||||
compress: { screw_ie8: true }, //prod
|
||||
comments: false //prod
|
||||
}),
|
||||
|
||||
/**
|
||||
* Plugin: NormalModuleReplacementPlugin
|
||||
* Description: Replace resources that matches resourceRegExp with newResource
|
||||
*
|
||||
* See: http://webpack.github.io/docs/list-of-plugins.html#normalmodulereplacementplugin
|
||||
*/
|
||||
|
||||
new NormalModuleReplacementPlugin(
|
||||
/angular2-hmr/,
|
||||
helpers.root('config/modules/angular2-hmr-prod.js')
|
||||
),
|
||||
|
||||
/**
|
||||
* Plugin: IgnorePlugin
|
||||
* Description: Don’t generate modules for requests matching the provided RegExp.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/list-of-plugins.html#ignoreplugin
|
||||
*/
|
||||
|
||||
// new IgnorePlugin(/angular2-hmr/),
|
||||
|
||||
/**
|
||||
* Plugin: CompressionPlugin
|
||||
* Description: Prepares compressed versions of assets to serve
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue