X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fconfig%2Fwebpack.dev.js;h=964ea56a5f73384189308e7c9e2247941b1d6e0e;hb=e903c2f3b7a3e63e58d9ef5934bcfd8f186b021a;hp=50193bf58f18c7f2e61e4eb48c271083853c5f27;hpb=7f82b8ae377214dd9b3f13a76a5e5f4e963e9425;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/config/webpack.dev.js b/client/config/webpack.dev.js index 50193bf58..964ea56a5 100644 --- a/client/config/webpack.dev.js +++ b/client/config/webpack.dev.js @@ -6,15 +6,19 @@ const commonConfig = require('./webpack.common.js') // the settings that are com * Webpack Plugins */ const DefinePlugin = require('webpack/lib/DefinePlugin') +const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin') +const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin') /** * Webpack Constants */ const ENV = process.env.ENV = process.env.NODE_ENV = 'development' +const HOST = process.env.HOST || 'localhost' +const PORT = process.env.PORT || 3000 const HMR = helpers.hasProcessFlag('hot') -const METADATA = webpackMerge(commonConfig.metadata, { - host: 'localhost', - port: 3000, +const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, { + host: HOST, + port: PORT, ENV: ENV, HMR: HMR }) @@ -24,119 +28,158 @@ const METADATA = webpackMerge(commonConfig.metadata, { * * See: http://webpack.github.io/docs/configuration.html#cli */ -module.exports = webpackMerge(commonConfig, { - /** - * Merged metadata from webpack.common.js for index.html - * - * See: (custom attribute) - */ - metadata: METADATA, - - /** - * Switch loaders to debug mode. - * - * See: http://webpack.github.io/docs/configuration.html#debug - */ - debug: true, - - /** - * 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: { +module.exports = function (env) { + return webpackMerge(commonConfig({env: ENV}), { /** - * The output directory as absolute path (required). - * - * See: http://webpack.github.io/docs/configuration.html#output-path - */ - path: helpers.root('dist'), + * 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', /** - * 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' - - }, - - externals: { - webtorrent: 'WebTorrent' - }, - - 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), - 'HMR': METADATA.HMR, - 'process.env': { + * 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].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', + + publicPath: '/client/' + }, + + externals: { + webtorrent: 'WebTorrent' + }, + + 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 - } - }) - ], - - /** - * 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, - resourcePath: 'src' - }, - - /* - * Include polyfills or mocks for various node stuff - * Description: Node configuration - * - * See: https://webpack.github.io/docs/configuration.html#node - */ - node: { - global: 'window', - crypto: 'empty', - process: true, - module: false, - clearImmediate: false, - setImmediate: false - } + 'HMR': METADATA.HMR, + 'process.env': { + 'ENV': JSON.stringify(METADATA.ENV), + 'NODE_ENV': JSON.stringify(METADATA.ENV), + 'HMR': METADATA.HMR + } + }), + + /** + * 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, + 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: { + 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 + } + }) +}