From 04de542abd940f9d2ca213fba3c68580c6c9b78a Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 6 Sep 2017 21:48:15 +0200 Subject: Update webpack config --- client/config/empty.js | 3 ++ client/config/webpack.common.js | 23 ++++---- client/config/webpack.dev.js | 21 +++++--- client/config/webpack.prod.js | 100 +++++++++++++---------------------- client/package.json | 1 + client/src/app/app-routing.module.ts | 9 +++- client/src/main.browser.ts | 28 ++++++---- 7 files changed, 88 insertions(+), 97 deletions(-) (limited to 'client') diff --git a/client/config/empty.js b/client/config/empty.js index 33acae188..a5c628d81 100644 --- a/client/config/empty.js +++ b/client/config/empty.js @@ -1,4 +1,7 @@ module.exports = { + hmrModule: function (ngmodule) { + return ngmodule + }, NgProbeToken: {}, HmrState: function () {}, _createConditionalRootRenderer: function (rootRenderer, extraTokens, coreTokens) { diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js index 489803f22..7392c58d3 100644 --- a/client/config/webpack.common.js +++ b/client/config/webpack.common.js @@ -16,13 +16,14 @@ const ngcWebpack = require('ngc-webpack') const WebpackNotifierPlugin = require('webpack-notifier') -/* - * Webpack Constants - */ +const HMR = helpers.hasProcessFlag('hot') +const AOT = process.env.BUILD_AOT || helpers.hasNpmFlag('aot') const METADATA = { title: 'PeerTube', baseUrl: '/', - isDevServer: helpers.isWebpackDevServer() + isDevServer: helpers.isWebpackDevServer(), + HMR: HMR, + AOT: AOT } /* @@ -91,13 +92,6 @@ module.exports = function (options) { { test: /\.ts$/, use: [ - { - loader: '@angularclass/hmr-loader', - options: { - pretty: !isProd, - prod: isProd - } - }, { loader: 'ng-router-loader', options: { @@ -242,7 +236,7 @@ module.exports = function (options) { /** * The (\\|\/) piece accounts for path separators in *nix and Windows */ - /angular(\\|\/)core(\\|\/)@angular/, + /(.+)?angular(\\|\/)core(.+)?/, helpers.root('src'), // location of your src { /** @@ -276,7 +270,10 @@ module.exports = function (options) { new HtmlWebpackPlugin({ template: 'src/index.html', title: METADATA.title, - chunksSortMode: 'dependency', + chunksSortMode: function (a, b) { + const entryPoints = [ 'inline', 'polyfills', 'sw-register', 'styles', 'vendor', 'main' ] + return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0]) + }, metadata: METADATA, inject: 'body' }), diff --git a/client/config/webpack.dev.js b/client/config/webpack.dev.js index 9cf09db0f..8948af9b2 100644 --- a/client/config/webpack.dev.js +++ b/client/config/webpack.dev.js @@ -11,6 +11,7 @@ const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin') const DefinePlugin = require('webpack/lib/DefinePlugin') const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin') const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin') +const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin') /** * Webpack Constants @@ -18,14 +19,18 @@ const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin') const ENV = process.env.ENV = process.env.NODE_ENV = 'development' const HOST = process.env.HOST || 'localhost' const PORT = process.env.PORT || 3000 +const PUBLIC = process.env.PUBLIC_DEV || HOST + ':' + PORT +const AOT = process.env.BUILD_AOT || helpers.hasNpmFlag('aot') const HMR = helpers.hasProcessFlag('hot') -const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, { +const METADATA = { host: HOST, port: PORT, + public: PUBLIC, ENV: ENV, HMR: HMR, + AOT: AOT, API_URL: 'http://localhost:9000' -}) +} const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin @@ -125,11 +130,9 @@ module.exports = function (env) { 'HMR': METADATA.HMR, 'API_URL': JSON.stringify(METADATA.API_URL), 'process.version': JSON.stringify(process.version), - 'process.env': { - 'ENV': JSON.stringify(METADATA.ENV), - 'NODE_ENV': JSON.stringify(METADATA.ENV), - 'HMR': METADATA.HMR - } + 'process.env.ENV': JSON.stringify(METADATA.ENV), + 'process.env.NODE_ENV': JSON.stringify(METADATA.ENV), + 'process.env.HMR': METADATA.HMR }), new DllBundlesPlugin({ @@ -216,8 +219,9 @@ module.exports = function (env) { } } - }) + }), + new HotModuleReplacementPlugin() ], /** @@ -232,6 +236,7 @@ module.exports = function (env) { port: METADATA.port, host: METADATA.host, historyApiFallback: true, + hot: METADATA.HMR, watchOptions: { ignored: /node_modules/ } diff --git a/client/config/webpack.prod.js b/client/config/webpack.prod.js index ddc9343a7..b950d3fe5 100644 --- a/client/config/webpack.prod.js +++ b/client/config/webpack.prod.js @@ -14,22 +14,24 @@ const DefinePlugin = require('webpack/lib/DefinePlugin') const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin') const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin') const OptimizeJsPlugin = require('optimize-js-plugin') -const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin') const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin') - +const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin') +const UglifyJsPlugin = require('uglifyjs-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, { +const AOT = process.env.BUILD_AOT || helpers.hasNpmFlag('aot') +const METADATA = { host: HOST, port: PORT, ENV: ENV, HMR: false, + AOT: AOT, API_URL: '' -}) +} module.exports = function (env) { return [ @@ -106,6 +108,7 @@ module.exports = function (env) { * See: http://webpack.github.io/docs/configuration.html#plugins */ plugins: [ + new ModuleConcatenationPlugin(), /** * Webpack plugin to optimize a JavaScript file for faster initial load @@ -142,12 +145,11 @@ module.exports = function (env) { 'ENV': JSON.stringify(METADATA.ENV), 'HMR': METADATA.HMR, 'API_URL': JSON.stringify(METADATA.API_URL), + 'AOT': METADATA.AOT, 'process.version': JSON.stringify(process.version), - 'process.env': { - 'ENV': JSON.stringify(METADATA.ENV), - 'NODE_ENV': JSON.stringify(METADATA.ENV), - 'HMR': METADATA.HMR - } + 'process.env.ENV': JSON.stringify(METADATA.ENV), + 'process.env.NODE_ENV': JSON.stringify(METADATA.ENV), + 'process.env.HMR': METADATA.HMR }), /** @@ -159,44 +161,28 @@ module.exports = function (env) { */ // 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 - output: { - comments: false - }, // prod - mangle: { - screw_ie8: true - }, // prod - compress: { - screw_ie8: true, - warnings: false, - conditionals: true, - unused: true, - comparisons: true, - sequences: true, - dead_code: true, - evaluate: true, - if_return: true, - join_vars: true, - negate_iife: false // we need this for lazy v8 - } + parallel: true, + uglifyOptions: { + ie8: false, + ecma: 6, + warnings: true, + mangle: true, + output: { + comments: false, + beautify: false + } + }, + warnings: true }), + /** + * 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/, + /(angular2|@angularclass)((\\|\/)|-)hmr/, helpers.root('config/empty.js') ), @@ -208,26 +194,14 @@ module.exports = function (env) { new HashedModuleIdsPlugin(), /** - * 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 + * AoT */ - // install compression-webpack-plugin - // new CompressionPlugin({ - // regExp: /\.css$|\.html$|\.js$|\.map$/, - // threshold: 2 * 1024 - // }) + (AOT ? ( + new NormalModuleReplacementPlugin( + /@angular(\\|\/)compiler/, + helpers.root('config/empty.js') + ) + ) : (new LoaderOptionsPlugin({}))), /** * Plugin LoaderOptionsPlugin (experimental) diff --git a/client/package.json b/client/package.json index f1c7e8799..d69a7b10b 100644 --- a/client/package.json +++ b/client/package.json @@ -101,6 +101,7 @@ "purifycss-webpack": "^0.7.0", "standard": "^10.0.0", "tslint-config-standard": "^6.0.1", + "uglifyjs-webpack-plugin": "^0.4.6", "webpack-bundle-analyzer": "^2.8.2", "webpack-dev-server": "^2.4.5", "webpack-dll-bundles-plugin": "^1.0.0-beta.5" diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts index 8036c52e6..191ae6974 100644 --- a/client/src/app/app-routing.module.ts +++ b/client/src/app/app-routing.module.ts @@ -1,5 +1,5 @@ import { NgModule } from '@angular/core' -import { Routes, RouterModule } from '@angular/router' +import { Routes, RouterModule, PreloadAllModules } from '@angular/router' const routes: Routes = [ { @@ -14,7 +14,12 @@ const routes: Routes = [ ] @NgModule({ - imports: [ RouterModule.forRoot(routes) ], + imports: [ + RouterModule.forRoot(routes, { + useHash: Boolean(history.pushState) === false, + preloadingStrategy: PreloadAllModules + }) + ], exports: [ RouterModule ] }) export class AppRoutingModule {} diff --git a/client/src/main.browser.ts b/client/src/main.browser.ts index aeae06e04..28f0d5781 100644 --- a/client/src/main.browser.ts +++ b/client/src/main.browser.ts @@ -1,22 +1,28 @@ /* tslint: disable */ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { decorateModuleRef } from './app/environment'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' +import { decorateModuleRef } from './app/environment' +import { hmrModule } from '@angularclass/hmr' /** * App Module * our top level module that holds all of our components */ -import { AppModule } from './app'; +import { AppModule } from './app' /** * Bootstrap our Angular app with a top level NgModule */ -export function main(): Promise { +export function main (): Promise { return platformBrowserDynamic() .bootstrapModule(AppModule) .then(decorateModuleRef) - .catch((err) => console.error(err)); + .then((ngModuleRef: any) => { + // `module` global ref for webpackhmr + // Don't run this in Prod + return hmrModule(ngModuleRef, module) + }) + .catch((err) => console.error(err)) } /** @@ -25,15 +31,15 @@ export function main(): Promise { */ switch (document.readyState) { case 'loading': - document.addEventListener('DOMContentLoaded', _domReadyHandler, false); - break; + document.addEventListener('DOMContentLoaded', _domReadyHandler, false) + break case 'interactive': case 'complete': default: - main(); + main() } -function _domReadyHandler() { - document.removeEventListener('DOMContentLoaded', _domReadyHandler, false); - main(); +function _domReadyHandler () { + document.removeEventListener('DOMContentLoaded', _domReadyHandler, false) + main() } -- cgit v1.2.3