diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js index da900da85..5f6d254cc 100644 --- a/client/config/webpack.common.js +++ b/client/config/webpack.common.js @@ -8,7 +8,6 @@ const AssetsPlugin = require('assets-webpack-plugin') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin') const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin') -const CopyWebpackPlugin = require('copy-webpack-plugin') const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin const HtmlWebpackPlugin = require('html-webpack-plugin') const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin') @@ -252,47 +251,6 @@ module.exports = function (options) { } ), - /* - * Plugin: CopyWebpackPlugin - * Description: Copy files and directories in webpack. - * - * Copies project static assets. - * - * See: https://www.npmjs.com/package/copy-webpack-plugin - */ - - // Used by embed.html - new CopyWebpackPlugin([ - { - from: 'src/assets', - to: 'assets' - }, - { - from: 'node_modules/webtorrent/webtorrent.min.js', - to: 'assets/webtorrent' - }, - { - from: 'node_modules/video.js/dist/video.min.js', - to: 'assets/video-js' - }, - { - from: 'node_modules/video.js/dist/video-js.min.css', - to: 'assets/video-js' - }, - { - from: 'node_modules/videojs-dock/dist/videojs-dock.min.js', - to: 'assets/video-js' - }, - { - from: 'node_modules/videojs-dock/dist/videojs-dock.css', - to: 'assets/video-js' - }, - { - from: 'src/standalone', - to: 'standalone' - } - ]), - /* * Plugin: ScriptExtHtmlWebpackPlugin * Description: Enhances html-webpack-plugin functionality diff --git a/client/config/webpack.dev.js b/client/config/webpack.dev.js index c472ac762..9cf09db0f 100644 --- a/client/config/webpack.dev.js +++ b/client/config/webpack.dev.js @@ -2,6 +2,7 @@ const helpers = require('./helpers') const webpackMerge = require('webpack-merge') // used to merge webpack configs const webpackMergeDll = webpackMerge.strategy({plugins: 'replace'}) const commonConfig = require('./webpack.common.js') // the settings that are common to prod and dev +const videoEmbedConfig = require('./webpack.video-embed.js') /** * Webpack Plugins @@ -34,220 +35,225 @@ const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin * See: http://webpack.github.io/docs/configuration.html#cli */ module.exports = function (env) { - return webpackMerge(commonConfig({ env: ENV }), { - /** - * 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: 'cheap-module-source-map', + return [ - /** - * Options affecting the output of the compilation. - * - * See: http://webpack.github.io/docs/configuration.html#output - */ - output: { + webpackMerge(commonConfig({ env: ENV }), { /** - * The output directory as absolute path (required). + * Developer tool to enhance debugging * - * See: http://webpack.github.io/docs/configuration.html#output-path + * See: http://webpack.github.io/docs/configuration.html#devtool + * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps */ - path: helpers.root('dist'), + devtool: 'cheap-module-source-map', /** - * Specifies the name of each output file on disk. - * IMPORTANT: You must not specify an absolute path here! + * Options affecting the output of the compilation. * - * See: http://webpack.github.io/docs/configuration.html#output-filename + * See: http://webpack.github.io/docs/configuration.html#output */ - filename: '[name].bundle.js', + output: { + /** + * The output directory as absolute path (required). + * + * See: http://webpack.github.io/docs/configuration.html#output-path + */ + path: helpers.root('dist'), - /** - * 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].map', + /** + * 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].bundle.js', - /** 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', + /** + * 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].map', - library: 'ac_[name]', - libraryTarget: 'var' - }, + /** 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', - module: { + library: 'ac_[name]', + libraryTarget: 'var' + }, - // Too slow, life is short - // rules: [ - // { - // test: /\.ts$/, - // use: [ - // { - // loader: 'tslint-loader', - // options: { - // configFile: 'tslint.json' - // } - // } - // ], - // exclude: [ - // /\.(spec|e2e)\.ts$/, - // /node_modules\// - // ] - // } - // ] - }, + module: { - plugins: [ + // Too slow, life is short + // rules: [ + // { + // test: /\.ts$/, + // use: [ + // { + // loader: 'tslint-loader', + // options: { + // configFile: 'tslint.json' + // } + // } + // ], + // exclude: [ + // /\.(spec|e2e)\.ts$/, + // /node_modules\// + // ] + // } + // ] + }, - /** - * Plugin: DefinePlugin - * Description: Define free variables. - * Useful for having development builds with debug logging or adding global constants. - * - * Environment 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, - 'API_URL': JSON.stringify(METADATA.API_URL), - 'process.version': JSON.stringify(process.version), - 'process.env': { + plugins: [ + + /** + * Plugin: DefinePlugin + * Description: Define free variables. + * Useful for having development builds with debug logging or adding global constants. + * + * Environment 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), - 'NODE_ENV': JSON.stringify(METADATA.ENV), - 'HMR': METADATA.HMR - } - }), - - new DllBundlesPlugin({ - bundles: { - polyfills: [ - 'core-js', - { - name: 'zone.js', - path: 'zone.js/dist/zone.js' - }, - { - name: 'zone.js', - path: 'zone.js/dist/long-stack-trace-zone.js' - } - ], - vendor: [ - '@angular/platform-browser', - '@angular/platform-browser-dynamic', - '@angular/core', - '@angular/common', - '@angular/forms', - '@angular/http', - '@angular/router', - '@angularclass/hmr', - 'rxjs' - ] - }, - dllDir: helpers.root('dll'), - webpackConfig: webpackMergeDll(commonConfig({env: ENV}), { - devtool: 'cheap-module-source-map', - plugins: [] - }) - }), - - /** - * Plugin: AddAssetHtmlPlugin - * Description: Adds the given JS or CSS file to the files - * Webpack knows about, and put it into the list of assets - * html-webpack-plugin injects into the generated html. - * - * See: https://github.com/SimenB/add-asset-html-webpack-plugin - */ - new AddAssetHtmlPlugin([ - { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) }, - { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) } - ]), - - /** - * Plugin: NamedModulesPlugin (experimental) - * Description: Uses file names as module name. - * - * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb - */ - new NamedModulesPlugin(), - - /** - * Plugin LoaderOptionsPlugin (experimental) - * - * See: https://gist.github.com/sokra/27b24881210b56bbaff7 - */ - new LoaderOptionsPlugin({ - debug: true, - options: { - - /** - * 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: false, - failOnHint: false, - typeCheck: true, - resourcePath: 'src' - }, - - // FIXME: Remove - // https://github.com/bholloway/resolve-url-loader/issues/36 - // https://github.com/jtangelder/sass-loader/issues/289 - context: __dirname, - output: { - path: helpers.root('dist') + '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 } + }), + new DllBundlesPlugin({ + bundles: { + polyfills: [ + 'core-js', + { + name: 'zone.js', + path: 'zone.js/dist/zone.js' + }, + { + name: 'zone.js', + path: 'zone.js/dist/long-stack-trace-zone.js' + } + ], + vendor: [ + '@angular/platform-browser', + '@angular/platform-browser-dynamic', + '@angular/core', + '@angular/common', + '@angular/forms', + '@angular/http', + '@angular/router', + '@angularclass/hmr', + 'rxjs' + ] + }, + dllDir: helpers.root('dll'), + webpackConfig: webpackMergeDll(commonConfig({env: ENV}), { + devtool: 'cheap-module-source-map', + plugins: [] + }) + }), + + /** + * Plugin: AddAssetHtmlPlugin + * Description: Adds the given JS or CSS file to the files + * Webpack knows about, and put it into the list of assets + * html-webpack-plugin injects into the generated html. + * + * See: https://github.com/SimenB/add-asset-html-webpack-plugin + */ + new AddAssetHtmlPlugin([ + { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) }, + { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) } + ]), + + /** + * Plugin: NamedModulesPlugin (experimental) + * Description: Uses file names as module name. + * + * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb + */ + new NamedModulesPlugin(), + + /** + * Plugin LoaderOptionsPlugin (experimental) + * + * See: https://gist.github.com/sokra/27b24881210b56bbaff7 + */ + new LoaderOptionsPlugin({ + debug: true, + options: { + + /** + * 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: false, + failOnHint: false, + typeCheck: true, + resourcePath: 'src' + }, + + // FIXME: Remove + // https://github.com/bholloway/resolve-url-loader/issues/36 + // https://github.com/jtangelder/sass-loader/issues/289 + context: __dirname, + output: { + path: helpers.root('dist') + } + + } + }) + + ], + + /** + * Webpack Development Server configuration + * Description: The webpack-dev-server is a little node.js Express server. + * The server emits information about the compilation state to the client, + * which reacts to those events. + * + * See: https://webpack.github.io/docs/webpack-dev-server.html + */ + devServer: { + port: METADATA.port, + host: METADATA.host, + historyApiFallback: true, + watchOptions: { + ignored: /node_modules/ } - }) + }, - ], - - /** - * Webpack Development Server configuration - * Description: The webpack-dev-server is a little node.js Express server. - * The server emits information about the compilation state to the client, - * which reacts to those events. - * - * See: https://webpack.github.io/docs/webpack-dev-server.html - */ - devServer: { - port: METADATA.port, - host: METADATA.host, - historyApiFallback: true, - watchOptions: { - ignored: /node_modules/ + /* + * 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', + fs: 'empty', + process: true, + module: false, + clearImmediate: false, + setImmediate: false } - }, + }), - /* - * 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', - fs: 'empty', - process: true, - module: false, - clearImmediate: false, - setImmediate: false - } - }) + videoEmbedConfig({env: ENV}) + ] } diff --git a/client/config/webpack.prod.js b/client/config/webpack.prod.js index 4f33961f5..ddc9343a7 100644 --- a/client/config/webpack.prod.js +++ b/client/config/webpack.prod.js @@ -5,6 +5,7 @@ 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 videoEmbedConfig = require('./webpack.video-embed.js') /** * Webpack Plugins @@ -31,266 +32,270 @@ const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, { }) module.exports = function (env) { - return webpackMerge(commonConfig({env: ENV}), { - /** - * 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', + return [ + videoEmbedConfig({ env: ENV }), - /** - * Options affecting the output of the compilation. - * - * See: http://webpack.github.io/docs/configuration.html#output - */ - output: { + webpackMerge(commonConfig({ env: ENV }), { + /** + * 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 output directory as absolute path (required). + * Options affecting the output of the compilation. * - * See: http://webpack.github.io/docs/configuration.html#output-path + * See: http://webpack.github.io/docs/configuration.html#output */ - path: helpers.root('dist'), + output: { - /** - * 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 output directory as absolute path (required). + * + * See: http://webpack.github.io/docs/configuration.html#output-path + */ + path: helpers.root('dist'), - /** - * 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: '[file].map', + /** + * 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 non-entry chunks as relative path - * inside the output.path directory. - * - * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename - */ - chunkFilename: '[name].[chunkhash].chunk.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: '[file].map', - publicPath: '/client/' - }, + /** + * 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: '[name].[chunkhash].chunk.js', - module: { - rules: [ - { - test: /junk\/index\.js$/, - // exclude: /(node_modules|bower_components)/, - use: { - loader: 'babel-loader', - options: { - presets: [ 'env' ] + publicPath: '/client/' + }, + + module: { + rules: [ + { + test: /junk\/index\.js$/, + // exclude: /(node_modules|bower_components)/, + use: { + loader: 'babel-loader', + options: { + presets: [ 'env' ] + } } } - } - ] - }, - - /** - * Add additional plugins to the compiler. - * - * See: http://webpack.github.io/docs/configuration.html#plugins - */ - plugins: [ + ] + }, /** - * Webpack plugin to optimize a JavaScript file for faster initial load - * by wrapping eagerly-invoked functions. + * Add additional plugins to the compiler. * - * See: https://github.com/vigneshshanmugam/optimize-js-plugin + * See: http://webpack.github.io/docs/configuration.html#plugins */ + plugins: [ - new OptimizeJsPlugin({ - sourceMap: false - }), + /** + * Webpack plugin to optimize a JavaScript file for faster initial load + * by wrapping eagerly-invoked functions. + * + * See: https://github.com/vigneshshanmugam/optimize-js-plugin + */ - /** - * 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(), + new OptimizeJsPlugin({ + sourceMap: false + }), - /** - * Plugin: DefinePlugin - * Description: Define free variables. - * Useful for having development builds with debug logging or adding global constants. - * - * Environment 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, - 'API_URL': JSON.stringify(METADATA.API_URL), - 'process.version': JSON.stringify(process.version), - 'process.env': { + /** + * 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(), + + /** + * Plugin: DefinePlugin + * Description: Define free variables. + * Useful for having development builds with debug logging or adding global constants. + * + * Environment 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), - '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 - 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 - } - }), - - new NormalModuleReplacementPlugin( - /angular2-hmr/, - helpers.root('config/empty.js') - ), - - new NormalModuleReplacementPlugin( - /zone\.js(\\|\/)dist(\\|\/)long-stack-trace-zone/, - helpers.root('config/empty.js') - ), - - 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 - */ - // install compression-webpack-plugin - // new CompressionPlugin({ - // regExp: /\.css$|\.html$|\.js$|\.map$/, - // threshold: 2 * 1024 - // }) - - /** - * Plugin LoaderOptionsPlugin (experimental) - * - * See: https://gist.github.com/sokra/27b24881210b56bbaff7 - */ - new LoaderOptionsPlugin({ - minimize: true, - debug: false, - options: { - - /** - * 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: [/\)?]?=/] - }, - - // FIXME: Remove - // https://github.com/bholloway/resolve-url-loader/issues/36 - // https://github.com/jtangelder/sass-loader/issues/289 - context: __dirname, - output: { - path: helpers.root('dist') + '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 } - } - }) - ], + }), - /* - * 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', - fs: 'empty', - process: true, - module: false, - clearImmediate: false, - setImmediate: false - } + /** + * 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 + 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 + } + }), + + new NormalModuleReplacementPlugin( + /angular2-hmr/, + helpers.root('config/empty.js') + ), + + new NormalModuleReplacementPlugin( + /zone\.js(\\|\/)dist(\\|\/)long-stack-trace-zone/, + helpers.root('config/empty.js') + ), + + 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 + */ + // install compression-webpack-plugin + // new CompressionPlugin({ + // regExp: /\.css$|\.html$|\.js$|\.map$/, + // threshold: 2 * 1024 + // }) + + /** + * Plugin LoaderOptionsPlugin (experimental) + * + * See: https://gist.github.com/sokra/27b24881210b56bbaff7 + */ + new LoaderOptionsPlugin({ + minimize: true, + debug: false, + options: { + + /** + * 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: [/\)?]?=/] + }, + + // FIXME: Remove + // https://github.com/bholloway/resolve-url-loader/issues/36 + // https://github.com/jtangelder/sass-loader/issues/289 + context: __dirname, + output: { + path: helpers.root('dist') + } + } + }) + ], + + /* + * 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', + fs: 'empty', + process: true, + module: false, + clearImmediate: false, + setImmediate: false + } + + }) + ] } diff --git a/client/config/webpack.video-embed.js b/client/config/webpack.video-embed.js new file mode 100644 index 000000000..a04d5be8b --- /dev/null +++ b/client/config/webpack.video-embed.js @@ -0,0 +1,183 @@ +const helpers = require('./helpers') + +const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin +const HtmlWebpackPlugin = require('html-webpack-plugin') +const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin') +const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin') +const ExtractTextPlugin = require('extract-text-webpack-plugin') +const PurifyCSSPlugin = require('purifycss-webpack') + +module.exports = function (options) { + const isProd = options.env === 'production' + + const configuration = { + entry: { + 'video-embed': './src/standalone/videos/embed.ts' + }, + + 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' ], + + modules: [ helpers.root('src'), helpers.root('node_modules') ] + }, + + output: { + path: helpers.root('dist/standalone/videos'), + filename: '[name].[hash].bundle.js', + sourceMapFilename: '[file].map', + chunkFilename: '[id].chunk.js', + publicPath: '/client/standalone/videos/' + }, + + module: { + + rules: [ + { + test: /\.ts$/, + use: [ + { + loader: 'awesome-typescript-loader', + options: { + configFileName: 'tsconfig.webpack.json', + useCache: !isProd + } + } + ], + exclude: [/\.(spec|e2e)\.ts$/] + }, + + { + test: /\.(sass|scss)$/, + use: ExtractTextPlugin.extract({ + fallback: 'style-loader', + use: [ + { + loader: 'css-loader', + options: { + sourceMap: true, + importLoaders: 1 + } + }, + 'resolve-url-loader', + { + loader: 'sass-loader', + options: { + sourceMap: true + } + }, + { + loader: 'sass-resources-loader', + options: { + resources: [ + helpers.root('src/sass/_variables.scss') + ] + } + } + ] + }) + }, + + { + test: /\.html$/, + use: 'raw-loader', + exclude: [ + helpers.root('src/index.html'), + helpers.root('src/standalone/videos/embed.html') + ] + }, + + { + test: /\.(jpg|png|gif)$/, + use: 'url-loader' + }, + + { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&minetype=application/font-woff' }, + { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'file-loader' } + ] + + }, + + plugins: [ + new ExtractTextPlugin({ + filename: '[name].[contenthash].css' + }), + + new PurifyCSSPlugin({ + paths: [ helpers.root('src/standalone/videos/embed.ts') ], + purifyOptions: { + minify: true, + whitelist: [ '*vjs*', '*video-js*' ] + } + }), + + new CheckerPlugin(), + + new HtmlWebpackPlugin({ + template: 'src/standalone/videos/embed.html', + filename: 'embed.html', + title: 'PeerTube', + chunksSortMode: 'dependency', + inject: 'body' + }) + ], + + node: { + global: true, + crypto: 'empty', + fs: 'empty', + process: true, + module: false, + clearImmediate: false, + setImmediate: false + } + } + + if (isProd) { + configuration.module.rules.push( + { + test: /junk\/index\.js$/, + // exclude: /(node_modules|bower_components)/, + use: { + loader: 'babel-loader', + options: { + presets: [ 'env' ] + } + } + } + ) + + configuration.plugins.push( + new UglifyJsPlugin({ + beautify: false, + 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 + } + }), + + new HashedModuleIdsPlugin() + ) + } + + return configuration +} diff --git a/client/package.json b/client/package.json index b19a3e57d..f66c6e2c2 100644 --- a/client/package.json +++ b/client/package.json @@ -86,7 +86,7 @@ "url-loader": "^0.5.7", "video.js": "^6.2.0", "videojs-dock": "^2.0.2", - "webpack": "^3.0.0", + "webpack": "^3.3.0", "webpack-merge": "~4.1.0", "webpack-notifier": "^1.3.0", "webtorrent": "^0.98.0", @@ -96,6 +96,9 @@ "@types/webtorrent": "^0.98.4", "add-asset-html-webpack-plugin": "^2.0.1", "codelyzer": "^3.0.0-beta.4", + "extract-text-webpack-plugin": "^3.0.0", + "purify-css": "^1.2.5", + "purifycss-webpack": "^0.7.0", "standard": "^10.0.0", "tslint-config-standard": "^6.0.1", "webpack-bundle-analyzer": "^2.8.2", diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html index f72080937..627acb5af 100644 --- a/client/src/standalone/videos/embed.html +++ b/client/src/standalone/videos/embed.html @@ -7,143 +7,12 @@ - - - - - - - - -
- + - -