]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/config/webpack.dev.js
Client: responsive design
[github/Chocobozzz/PeerTube.git] / client / config / webpack.dev.js
index 0b6c00cbde54eca23acc9718fbbe97134e858a4c..5e0f36d7f688532b16b632e1f13f31505083dfcc 100644 (file)
@@ -1,12 +1,15 @@
 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
 
 /**
  * Webpack Plugins
  */
+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')
 
 /**
  * Webpack Constants
@@ -22,91 +25,102 @@ const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
   HMR: HMR
 })
 
+const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin
+
 /**
  * Webpack configuration
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
 module.exports = function (env) {
-  return webpackMerge(commonConfig({env: ENV}), {
-    /**
-     * 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,
-
+  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
-     */
+    * 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
-     */
+    * 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
-       */
+      * 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
-       */
+      * 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
-       */
+      * 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
-       */
+      * inside the output.path directory.
+      *
+      * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
+      */
       chunkFilename: '[id].chunk.js',
 
       library: 'ac_[name]',
-      libraryTarget: 'var'
+      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: [
 
       /**
-       * 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
-       */
+      * 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),
@@ -118,21 +132,102 @@ module.exports = function (env) {
         }
       }),
 
-      new NamedModulesPlugin()
+      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')
+          }
+
+        }
+      })
+
     ],
 
     /**
-     * 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'
-    },
-
+    * 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,
@@ -145,13 +240,13 @@ module.exports = function (env) {
     },
 
     /*
-     * Include polyfills or mocks for various node stuff
-     * Description: Node configuration
-     *
-     * See: https://webpack.github.io/docs/configuration.html#node
-     */
+    * Include polyfills or mocks for various node stuff
+    * Description: Node configuration
+    *
+    * See: https://webpack.github.io/docs/configuration.html#node
+    */
     node: {
-      global: 'window',
+      global: true,
       crypto: 'empty',
       process: true,
       module: false,