mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-18 00:10:14 +01:00
feat(aot): aot compilation work in progress
This commit is contained in:
Dmitry Nehaychik
Alexander Zhukov
parent
24fe588b42
commit
d89d176e54
117 changed files with 866 additions and 1041 deletions
548
config/webpack.aot.js
Normal file
548
config/webpack.aot.js
Normal file
|
|
@ -0,0 +1,548 @@
|
|||
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
|
||||
const ngtools = require('@ngtools/webpack');
|
||||
const webpack = require('webpack');
|
||||
|
||||
/**
|
||||
* Webpack Plugins
|
||||
*/
|
||||
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
|
||||
const DefinePlugin = require('webpack/lib/DefinePlugin');
|
||||
const IgnorePlugin = require('webpack/lib/IgnorePlugin');
|
||||
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
|
||||
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
|
||||
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
|
||||
const WebpackMd5Hash = require('webpack-md5-hash');
|
||||
const AssetsPlugin = require('assets-webpack-plugin');
|
||||
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
|
||||
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
|
||||
const HtmlElementsPlugin = require('./html-elements-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
|
||||
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
|
||||
/**
|
||||
* Webpack Constants
|
||||
*/
|
||||
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
|
||||
const HOST = process.env.HOST || 'localhost';
|
||||
const PORT = process.env.PORT || 8080;
|
||||
const METADATA = webpackMerge(commonConfig({
|
||||
env: ENV
|
||||
}).metadata, {
|
||||
host: HOST,
|
||||
port: PORT,
|
||||
ENV: ENV,
|
||||
HMR: false
|
||||
});
|
||||
|
||||
module.exports = function (env) {
|
||||
isProd = true;
|
||||
return {
|
||||
|
||||
/**
|
||||
* Developer tool to enhance debugging
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#devtool
|
||||
* See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
|
||||
*/
|
||||
devtool: 'source-map',
|
||||
|
||||
/*
|
||||
* The entry point for the bundle
|
||||
* Our Angular.js app
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#entry
|
||||
*/
|
||||
entry: {
|
||||
|
||||
'polyfills': './src/polyfills.browser.ts',
|
||||
'vendor': './src/vendor.browser.ts',
|
||||
'main': './src/main.browser.aot.ts'
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Options affecting the resolving of modules.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#resolve
|
||||
*/
|
||||
resolve: {
|
||||
|
||||
/*
|
||||
* An array of extensions that should be used to resolve modules.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#resolve-extensions
|
||||
*/
|
||||
extensions: ['.ts', '.js', '.json', '.scss'],
|
||||
|
||||
// An array of directory names to be resolved to the current directory
|
||||
modules: [helpers.root('src'), 'node_modules'],
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Options affecting the output of the compilation.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output
|
||||
*/
|
||||
output: {
|
||||
|
||||
/**
|
||||
* The output directory as absolute path (required).
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-path
|
||||
*/
|
||||
path: helpers.root('dist'),
|
||||
|
||||
/**
|
||||
* Specifies the name of each output file on disk.
|
||||
* IMPORTANT: You must not specify an absolute path here!
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-filename
|
||||
*/
|
||||
filename: '[name].[chunkhash].bundle.js',
|
||||
|
||||
/**
|
||||
* The filename of the SourceMaps for the JavaScript files.
|
||||
* They are inside the output.path directory.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
|
||||
*/
|
||||
sourceMapFilename: '[name].[chunkhash].bundle.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].[chunkhash].chunk.js'
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Options affecting the normal modules.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#module
|
||||
*/
|
||||
module: {
|
||||
|
||||
rules: [
|
||||
|
||||
/*
|
||||
* Typescript loader support for .ts and Angular 2 async routes via .async.ts
|
||||
* Replace templateUrl and stylesUrl with require()
|
||||
*
|
||||
* See: https://github.com/s-panferov/awesome-typescript-loader
|
||||
* See: https://github.com/TheLarkInn/angular2-template-loader
|
||||
*/
|
||||
{
|
||||
test: /\.ts$/,
|
||||
loaders: [
|
||||
// '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
|
||||
// 'awesome-typescript-loader',
|
||||
// 'angular2-template-loader',
|
||||
// 'angular2-router-loader'
|
||||
'@ngtools/webpack'
|
||||
|
||||
],
|
||||
exclude: [/\.(spec|e2e)\.ts$/]
|
||||
},
|
||||
|
||||
/*
|
||||
* Json loader support for *.json files.
|
||||
*
|
||||
* See: https://github.com/webpack/json-loader
|
||||
*/
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json-loader'
|
||||
},
|
||||
|
||||
/*
|
||||
* to string and css loader support for *.css files
|
||||
* Returns file content as string
|
||||
*
|
||||
*/
|
||||
{
|
||||
test: /\.css$/,
|
||||
loaders: ['to-string-loader', 'css-loader']
|
||||
},
|
||||
|
||||
/* Raw loader support for *.html
|
||||
* Returns file content as string
|
||||
*
|
||||
* See: https://github.com/webpack/raw-loader
|
||||
*/
|
||||
{
|
||||
test: /\.html$/,
|
||||
loader: 'raw-loader',
|
||||
exclude: [helpers.root('src/index.html')]
|
||||
},
|
||||
|
||||
/* File loader for supporting images, for example, in CSS files.
|
||||
*/
|
||||
{
|
||||
test: /\.(jpg|png|gif)$/,
|
||||
loader: 'file'
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
// loaders: ['to-string-loader', 'css-loader']
|
||||
use: ['raw-loader']
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: ['raw-loader', 'sass-loader']
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.woff(2)?(\?v=.+)?$/,
|
||||
use: 'url-loader?limit=10000&mimetype=application/font-woff'
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.(ttf|eot|svg)(\?v=.+)?$/,
|
||||
use: 'file-loader'
|
||||
},
|
||||
|
||||
{
|
||||
test: /initial\.scss$/,
|
||||
loader: ExtractTextPlugin.extract({
|
||||
fallbackLoader: 'style-loader',
|
||||
loader: 'css-loader!sass-loader?sourceMap'
|
||||
})
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
resolveLoader: {
|
||||
moduleExtensions: ['-loader']
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Add additional plugins to the compiler.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#plugins
|
||||
*/
|
||||
plugins: [
|
||||
new ExtractTextPlugin({filename: 'initial.css', allChunks: true}),
|
||||
|
||||
/**
|
||||
* Plugin: WebpackMd5Hash
|
||||
* Description: Plugin to replace a standard webpack chunkhash with md5.
|
||||
*
|
||||
* See: https://www.npmjs.com/package/webpack-md5-hash
|
||||
*/
|
||||
new WebpackMd5Hash(),
|
||||
|
||||
new ngtools.AotPlugin({
|
||||
tsConfigPath: './tsconfig.aot.json',
|
||||
baseDir: process.cwd(),
|
||||
entryModule: helpers.root('src/app/app.module') + '#AppModule'
|
||||
}),
|
||||
|
||||
new AssetsPlugin({
|
||||
path: helpers.root('dist'),
|
||||
filename: 'webpack-assets.json',
|
||||
prettyPrint: true
|
||||
}),
|
||||
|
||||
/*
|
||||
* Plugin: ForkCheckerPlugin
|
||||
* Description: Do type checking in a separate process, so webpack don't need to wait.
|
||||
*
|
||||
* See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
|
||||
*/
|
||||
new ForkCheckerPlugin(),
|
||||
|
||||
/*
|
||||
* Plugin: CommonsChunkPlugin
|
||||
* Description: Shares common code between the pages.
|
||||
* It identifies common modules and put them into a commons chunk.
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
|
||||
* See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
|
||||
*/
|
||||
new CommonsChunkPlugin({
|
||||
name: ['polyfills', 'vendor'].reverse()
|
||||
}),
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Plugin: ContextReplacementPlugin
|
||||
* Description: Provides context to Angular's use of System.import
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
|
||||
* See: https://github.com/angular/angular/issues/11580
|
||||
*/
|
||||
new ContextReplacementPlugin(
|
||||
// The (\\|\/) piece accounts for path separators in *nix and Windows
|
||||
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
|
||||
helpers.root('src') // location of your src
|
||||
),
|
||||
|
||||
/**
|
||||
* Plugin: DedupePlugin
|
||||
* Description: Prevents the inclusion of duplicate code into your bundle
|
||||
* and instead applies a copy of the function at runtime.
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
|
||||
* See: https://github.com/webpack/docs/wiki/optimization#deduplication
|
||||
*/
|
||||
// new DedupePlugin(), // see: https://github.com/angular/angular-cli/issues/1587
|
||||
|
||||
/**
|
||||
* Plugin: DefinePlugin
|
||||
* Description: Define free variables.
|
||||
* Useful for having development builds with debug logging or adding global constants.
|
||||
*
|
||||
* фironment helpers
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
|
||||
*/
|
||||
// NOTE: when adding more properties make sure you include them in custom-typings.d.ts
|
||||
new DefinePlugin({
|
||||
'ENV': JSON.stringify(METADATA.ENV),
|
||||
'HMR': METADATA.HMR,
|
||||
'process.env': {
|
||||
'ENV': JSON.stringify(METADATA.ENV),
|
||||
'NODE_ENV': JSON.stringify(METADATA.ENV),
|
||||
'HMR': METADATA.HMR,
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Plugin: UglifyJsPlugin
|
||||
* Description: Minimize all JavaScript output of chunks.
|
||||
* Loaders are switched into minimizing mode.
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
|
||||
*/
|
||||
// NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
|
||||
// new UglifyJsPlugin({
|
||||
// // beautify: true, //debug
|
||||
// // mangle: false, //debug
|
||||
// // dead_code: false, //debug
|
||||
// // unused: false, //debug
|
||||
// // deadCode: false, //debug
|
||||
// // compress: {
|
||||
// // screw_ie8: true,
|
||||
// // keep_fnames: true,
|
||||
// // drop_debugger: false,
|
||||
// // dead_code: false,
|
||||
// // unused: false
|
||||
// // }, // debug
|
||||
// // comments: true, //debug
|
||||
//
|
||||
//
|
||||
// beautify: false, //prod
|
||||
// mangle: {
|
||||
// screw_ie8: true,
|
||||
// keep_fnames: 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
|
||||
* them with Content-Encoding
|
||||
*
|
||||
* See: https://github.com/webpack/compression-webpack-plugin
|
||||
*/
|
||||
// install compression-webpack-plugin
|
||||
// new CompressionPlugin({
|
||||
// regExp: /\.css$|\.html$|\.js$|\.map$/,
|
||||
// threshold: 2 * 1024
|
||||
// })
|
||||
|
||||
/*
|
||||
* Plugin: CopyWebpackPlugin
|
||||
* Description: Copy files and directories in webpack.
|
||||
*
|
||||
* Copies project static assets.
|
||||
*
|
||||
* See: https://www.npmjs.com/package/copy-webpack-plugin
|
||||
*/
|
||||
new CopyWebpackPlugin([
|
||||
{ from: 'src/assets', to: 'assets' },
|
||||
{ from: 'node_modules/ckeditor', to: 'ckeditor' },
|
||||
{ from: 'src/meta'}
|
||||
]),
|
||||
|
||||
|
||||
/*
|
||||
* Plugin: HtmlWebpackPlugin
|
||||
* Description: Simplifies creation of HTML files to serve your webpack bundles.
|
||||
* This is especially useful for webpack bundles that include a hash in the filename
|
||||
* which changes every compilation.
|
||||
*
|
||||
* See: https://github.com/ampedandwired/html-webpack-plugin
|
||||
*/
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'src/index.html',
|
||||
title: METADATA.title,
|
||||
chunksSortMode: 'dependency',
|
||||
metadata: METADATA,
|
||||
inject: 'head'
|
||||
}),
|
||||
|
||||
/*
|
||||
* Plugin: ScriptExtHtmlWebpackPlugin
|
||||
* Description: Enhances html-webpack-plugin functionality
|
||||
* with different deployment options for your scripts including:
|
||||
*
|
||||
* See: https://github.com/numical/script-ext-html-webpack-plugin
|
||||
*/
|
||||
new ScriptExtHtmlWebpackPlugin({
|
||||
defaultAttribute: 'defer'
|
||||
}),
|
||||
|
||||
/*
|
||||
* 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')
|
||||
}),
|
||||
|
||||
new webpack.ProvidePlugin({
|
||||
$: "jquery",
|
||||
jQuery: "jquery",
|
||||
"window.jQuery": "jquery",
|
||||
Tether: "tether",
|
||||
"window.Tether": "tether",
|
||||
Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
|
||||
Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
|
||||
Button: "exports-loader?Button!bootstrap/js/dist/button",
|
||||
Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
|
||||
Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
|
||||
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
|
||||
Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
|
||||
Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
|
||||
Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
|
||||
Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
|
||||
Util: "exports-loader?Util!bootstrap/js/dist/util"
|
||||
}),
|
||||
|
||||
/**
|
||||
* Plugin LoaderOptionsPlugin (experimental)
|
||||
*
|
||||
* See: https://gist.github.com/sokra/27b24881210b56bbaff7
|
||||
*/
|
||||
new LoaderOptionsPlugin({
|
||||
debug: false,
|
||||
options: {
|
||||
context: helpers.root('src'),
|
||||
output: {
|
||||
path: helpers.root('dist')
|
||||
},
|
||||
|
||||
/**
|
||||
* Static analysis linter for TypeScript advanced options configuration
|
||||
* Description: An extensible linter for the TypeScript language.
|
||||
*
|
||||
* See: https://github.com/wbuchwalter/tslint-loader
|
||||
*/
|
||||
tslint: {
|
||||
emitErrors: true,
|
||||
failOnHint: true,
|
||||
resourcePath: 'src'
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Html loader advanced options
|
||||
*
|
||||
* See: https://github.com/webpack/html-loader#advanced-options
|
||||
*/
|
||||
// TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
|
||||
htmlLoader: {
|
||||
minimize: true,
|
||||
removeAttributeQuotes: false,
|
||||
caseSensitive: true,
|
||||
customAttrSurround: [
|
||||
[/#/, /(?:)/],
|
||||
[/\*/, /(?:)/],
|
||||
[/\[?\(?/, /(?:)/]
|
||||
],
|
||||
customAttrAssign: [/\)?\]?=/]
|
||||
},
|
||||
|
||||
}
|
||||
}),
|
||||
|
||||
],
|
||||
|
||||
/*
|
||||
* Include polyfills or mocks for various node stuff
|
||||
* Description: Node configuration
|
||||
*
|
||||
* See: https://webpack.github.io/docs/configuration.html#node
|
||||
*/
|
||||
node: {
|
||||
global: true,
|
||||
crypto: 'empty',
|
||||
process: false,
|
||||
module: false,
|
||||
clearImmediate: false,
|
||||
setImmediate: false
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue