X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=inline;f=client%2Fconfig%2Fwebpack.dev.js;h=d825f40e08f2bf2080822e40b6c71a3a35936b68;hb=ec61fb7e2cbb3897fe29cb54ec3a1ec864163c91;hp=5e0f36d7f688532b16b632e1f13f31505083dfcc;hpb=383bfc8356d444cbed1dab7e5c1b3bb16becfdfd;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/config/webpack.dev.js b/client/config/webpack.dev.js index 5e0f36d7f..d825f40e0 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 @@ -10,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 @@ -17,13 +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 -}) + HMR: HMR, + AOT: AOT, + API_URL: 'http://localhost:9000' +} const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin @@ -33,225 +40,203 @@ 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', - - /** - * 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'), + return [ + webpackMerge(commonConfig({ env: ENV }), { /** - * Specifies the name of each output file on disk. - * IMPORTANT: You must not specify an absolute path here! + * Developer tool to enhance debugging * - * See: http://webpack.github.io/docs/configuration.html#output-filename + * See: http://webpack.github.io/docs/configuration.html#devtool + * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps */ - filename: '[name].bundle.js', + devtool: 'cheap-module-source-map', /** - * The filename of the SourceMaps for the JavaScript files. - * They are inside the output.path directory. + * Options affecting the output of the compilation. * - * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename + * See: http://webpack.github.io/docs/configuration.html#output */ - 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', - - library: 'ac_[name]', - libraryTarget: 'var', - - publicPath: '/client/' - }, - - externals: { - webtorrent: 'WebTorrent' - }, - - module: { - - // Too slow, life is short - // rules: [ - // { - // test: /\.ts$/, - // use: [ - // { - // loader: 'tslint-loader', - // options: { - // configFile: 'tslint.json' - // } - // } - // ], - // exclude: [ - // /\.(spec|e2e)\.ts$/, - // /node_modules\// - // ] - // } - // ] - }, - - plugins: [ + 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].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].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', + + library: 'ac_[name]', + libraryTarget: 'var' + }, - /** - * 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, - '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' + 'HMR': METADATA.HMR, + 'API_URL': JSON.stringify(METADATA.API_URL), + 'process.version': JSON.stringify(process.version), + 'process.env.ENV': JSON.stringify(METADATA.ENV), + 'process.env.NODE_ENV': JSON.stringify(METADATA.ENV), + 'process.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' }, - { - name: 'zone.js', - path: 'zone.js/dist/long-stack-trace-zone.js' + + // 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') } - ], - 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(), + new HotModuleReplacementPlugin() + ], /** - * Plugin LoaderOptionsPlugin (experimental) + * 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://gist.github.com/sokra/27b24881210b56bbaff7 + * See: https://webpack.github.io/docs/webpack-dev-server.html */ - 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') - } - + devServer: { + port: METADATA.port, + host: METADATA.host, + historyApiFallback: true, + hot: METADATA.HMR, + 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: { - aggregateTimeout: 300, - poll: 1000 }, - outputPath: 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', - 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}) + ] }