]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/config/webpack.common.js
Client: add dll support
[github/Chocobozzz/PeerTube.git] / client / config / webpack.common.js
index 5f3f44bb13f81d3dcdb66872d2886e49d09c0884..223f55c2e39aab1894b8dca120b4c62c7ef48f1e 100644 (file)
@@ -1,20 +1,29 @@
-const webpack = require('webpack')
 const helpers = require('./helpers')
 
 /*
  * Webpack Plugins
  */
 
-var CopyWebpackPlugin = (CopyWebpackPlugin = require('copy-webpack-plugin'), CopyWebpackPlugin.default || CopyWebpackPlugin)
+const AssetsPlugin = require('assets-webpack-plugin')
+const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin')
+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 ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
+const ngcWebpack = require('ngc-webpack')
+
+const WebpackNotifierPlugin = require('webpack-notifier')
 
 /*
  * Webpack Constants
  */
 const METADATA = {
   title: 'PeerTube',
-  baseUrl: '/'
+  baseUrl: '/',
+  isDevServer: helpers.isWebpackDevServer()
 }
 
 /*
@@ -22,240 +31,306 @@ const METADATA = {
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = {
-  /*
-   * Static metadata for index.html
-   *
-   * See: (custom attribute)
-   */
-  metadata: METADATA,
-
-  /*
-   * Cache generated modules and chunks to improve performance for multiple incremental builds.
-   * This is enabled by default in watch mode.
-   * You can pass false to disable it.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#cache
-   */
-  // cache: false,
-
-  /*
-   * The entry point for the bundle
-   * Our Angular.js app
-   *
-   * See: http://webpack.github.io/docs/configuration.html#entry
-   */
-  entry: {
-    'polyfills': './src/polyfills.ts',
-    'vendor': './src/vendor.ts',
-    'main': './src/main.ts'
-  },
-
-  /*
-   * Options affecting the resolving of modules.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#resolve
-   */
-  resolve: {
+module.exports = function (options) {
+  const isProd = options.env === 'production'
+  const AOT = isProd
+
+  return {
+
     /*
-     * An array of extensions that should be used to resolve modules.
+     * Cache generated modules and chunks to improve performance for multiple incremental builds.
+     * This is enabled by default in watch mode.
+     * You can pass false to disable it.
      *
-     * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
+     * See: http://webpack.github.io/docs/configuration.html#cache
      */
-    extensions: [ '', '.ts', '.js', '.scss' ],
-
-    // Make sure root is src
-    root: helpers.root('src'),
-
-    // remove other default values
-    modulesDirectories: [ 'node_modules' ]
-
-  },
+    // cache: false,
 
-  /*
-   * Options affecting the normal modules.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#module
-   */
-  module: {
     /*
-     * An array of applied pre and post loaders.
+     * The entry point for the bundle
+     * Our Angular.js app
      *
-     * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
+     * See: http://webpack.github.io/docs/configuration.html#entry
      */
-    preLoaders: [
+    entry: {
+      'polyfills': './src/polyfills.browser.ts',
+      'main': AOT
+              ? './src/main.browser.aot.ts'
+              : './src/main.browser.ts'
+    },
 
+    /*
+     * Options affecting the resolving of modules.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#resolve
+     */
+    resolve: {
       /*
-       * Tslint loader support for *.ts files
+       * An array of extensions that should be used to resolve modules.
        *
-       * See: https://github.com/wbuchwalter/tslint-loader
+       * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
        */
-      // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
+      extensions: [ '.ts', '.js', '.json', '.scss' ],
 
-      /*
-       * Source map loader support for *.js files
-       * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
-       *
-       * See: https://github.com/webpack/source-map-loader
-       */
-      {
-        test: /\.js$/,
-        loader: 'source-map-loader',
-        exclude: [
-          // these packages have problems with their sourcemaps
-          helpers.root('node_modules/rxjs'),
-          helpers.root('node_modules/@angular')
-        ]
-      }
+      modules: [ helpers.root('src'), helpers.root('node_modules') ],
 
-    ],
+      alias: {
+        'video.js': 'video.js/dist/alt/video.novtt'
+      }
+    },
 
     /*
-     * An array of automatically applied loaders.
+     * Options affecting the normal modules.
      *
-     * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
-     * This means they are not resolved relative to the configuration file.
+     * See: http://webpack.github.io/docs/configuration.html#module
+     */
+    module: {
+
+      rules: [
+
+        /*
+         * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+         *
+         * See: https://github.com/s-panferov/awesome-typescript-loader
+         */
+        {
+          test: /\.ts$/,
+          use: [
+            '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
+            'awesome-typescript-loader?{configFileName: "tsconfig.webpack.json"}',
+            'angular2-template-loader',
+            {
+              loader: 'ng-router-loader',
+              options: {
+                loader: 'async-system',
+                genDir: 'compiled',
+                aot: AOT
+              }
+            }
+          ],
+          exclude: [/\.(spec|e2e)\.ts$/]
+        },
+
+        /*
+         * Json loader support for *.json files.
+         *
+         * See: https://github.com/webpack/json-loader
+         */
+        {
+          test: /\.json$/,
+          loader: 'json-loader'
+        },
+
+        {
+          test: /\.(sass|scss)$/,
+          use: ['css-to-string-loader', 'css-loader?sourceMap', 'resolve-url-loader', 'sass-loader?sourceMap'],
+          exclude: [ helpers.root('src', 'styles') ]
+        },
+        { 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' },
+
+        /* Raw loader support for *.html
+         * Returns file content as string
+         *
+         * See: https://github.com/webpack/raw-loader
+         */
+        {
+          test: /\.html$/,
+          loader: 'raw-loader',
+          exclude: [ helpers.root('src/index.html'), helpers.root('src/standalone/videos/embed.html') ]
+        }
+
+      ]
+
+    },
+
+    /*
+     * Add additional plugins to the compiler.
      *
-     * See: http://webpack.github.io/docs/configuration.html#module-loaders
+     * See: http://webpack.github.io/docs/configuration.html#plugins
      */
-    loaders: [
+    plugins: [
+      new AssetsPlugin({
+        path: helpers.root('dist'),
+        filename: 'webpack-assets.json',
+        prettyPrint: true
+      }),
 
       /*
-       * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+       * Plugin: ForkCheckerPlugin
+       * Description: Do type checking in a separate process, so webpack don't need to wait.
        *
-       * See: https://github.com/s-panferov/awesome-typescript-loader
+       * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
        */
-      {
-        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        exclude: [/\.(spec|e2e)\.ts$/]
-      },
+      new CheckerPlugin(),
 
       /*
-       * Json loader support for *.json files.
+       * Plugin: CommonsChunkPlugin
+       * Description: Shares common code between the pages.
+       * It identifies common modules and put them into a commons chunk.
        *
-       * See: https://github.com/webpack/json-loader
+       * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
+       * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
        */
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
+      new CommonsChunkPlugin({
+        name: 'polyfills',
+        chunks: ['polyfills']
+      }),
+
+      // This enables tree shaking of the vendor modules
+      new CommonsChunkPlugin({
+        name: 'vendor',
+        chunks: ['main'],
+        minChunks: module => /node_modules\//.test(module.resource)
+      }),
+
+      // Specify the correct order the scripts will be injected in
+      new CommonsChunkPlugin({
+        name: ['polyfills', 'vendor'].reverse()
+      }),
+
+      /**
+       * Plugin: ContextReplacementPlugin
+       * Description: Provides context to Angular's use of System.import
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
+       * See: https://github.com/angular/angular/issues/11580
+       */
+      new ContextReplacementPlugin(
+        // The (\\|\/) piece accounts for path separators in *nix and Windows
+        /angular(\\|\/)core(\\|\/)src(\\|\/)linker/,
+        helpers.root('src'), // location of your src
+        {
+          // your Angular Async Route paths relative to this root directory
+        }
+      ),
 
       /*
-       * Raw loader support for *.css files
-       * Returns file content as string
+       * Plugin: CopyWebpackPlugin
+       * Description: Copy files and directories in webpack.
        *
-       * See: https://github.com/webpack/raw-loader
-       */
-      {
-        test: /\.scss$/,
-        exclude: /node_modules/,
-        loaders: [ 'raw-loader', 'sass-loader' ]
-      },
-
-      {
-        test: /\.(woff2?|ttf|eot|svg)$/,
-        loader: 'url?limit=10000&name=assets/fonts/[hash].[ext]'
-      },
-
-      /* Raw loader support for *.html
-       * Returns file content as string
+       * Copies project static assets.
        *
-       * See: https://github.com/webpack/raw-loader
+       * See: https://www.npmjs.com/package/copy-webpack-plugin
        */
-      {
-        test: /\.html$/,
-        loader: 'raw-loader',
-        exclude: [ helpers.root('src/index.html') ]
-      }
-
-    ]
+      // 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'
+        }
+      ]),
 
-  },
-
-  /*
-   * Add additional plugins to the compiler.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#plugins
-   */
-  plugins: [
-
-    /*
-     * Plugin: ForkCheckerPlugin
-     * Description: Do type checking in a separate process, so webpack don't need to wait.
-     *
-     * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
-     */
-    new ForkCheckerPlugin(),
-
-    /*
-     * Plugin: OccurenceOrderPlugin
-     * Description: Varies the distribution of the ids to get the smallest id length
-     * for often used ids.
-     *
-     * See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
-     * See: https://github.com/webpack/docs/wiki/optimization#minimize
-     */
-    new webpack.optimize.OccurenceOrderPlugin(true),
-
-    /*
-     * Plugin: CommonsChunkPlugin
-     * Description: Shares common code between the pages.
-     * It identifies common modules and put them into a commons chunk.
-     *
-     * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
-     * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
-     */
-    new webpack.optimize.CommonsChunkPlugin({
-      name: [ 'polyfills', 'vendor' ].reverse()
-    }),
+      /*
+       * Plugin: HtmlWebpackPlugin
+       * Description: Simplifies creation of HTML files to serve your webpack bundles.
+       * This is especially useful for webpack bundles that include a hash in the filename
+       * which changes every compilation.
+       *
+       * See: https://github.com/ampedandwired/html-webpack-plugin
+       */
+      new HtmlWebpackPlugin({
+        template: 'src/index.html',
+        title: METADATA.title,
+        chunksSortMode: 'dependency',
+        metadata: METADATA
+      }),
 
-    /*
-     * Plugin: CopyWebpackPlugin
-     * Description: Copy files and directories in webpack.
-     *
-     * Copies project static assets.
-     *
-     * See: https://www.npmjs.com/package/copy-webpack-plugin
-     */
-    new CopyWebpackPlugin([{
-      from: 'src/assets',
-      to: 'assets'
-    }]),
+      /*
+      * Plugin: ScriptExtHtmlWebpackPlugin
+      * Description: Enhances html-webpack-plugin functionality
+      * with different deployment options for your scripts including:
+      *
+      * See: https://github.com/numical/script-ext-html-webpack-plugin
+      */
+      new ScriptExtHtmlWebpackPlugin({
+        sync: [ 'webtorrent.min.js' ],
+        defaultAttribute: 'defer'
+      }),
+
+      new WebpackNotifierPlugin({ alwaysNotify: true }),
+
+      /**
+      * Plugin LoaderOptionsPlugin (experimental)
+      *
+      * See: https://gist.github.com/sokra/27b24881210b56bbaff7
+      */
+      new LoaderOptionsPlugin({
+        options: {
+          sassLoader: {
+            precision: 10
+          }
+        }
+      }),
+
+      // Fix Angular 2
+      new NormalModuleReplacementPlugin(
+        /facade(\\|\/)async/,
+        helpers.root('node_modules/@angular/core/src/facade/async.js')
+      ),
+      new NormalModuleReplacementPlugin(
+        /facade(\\|\/)collection/,
+        helpers.root('node_modules/@angular/core/src/facade/collection.js')
+      ),
+      new NormalModuleReplacementPlugin(
+        /facade(\\|\/)errors/,
+        helpers.root('node_modules/@angular/core/src/facade/errors.js')
+      ),
+      new NormalModuleReplacementPlugin(
+        /facade(\\|\/)lang/,
+        helpers.root('node_modules/@angular/core/src/facade/lang.js')
+      ),
+      new NormalModuleReplacementPlugin(
+        /facade(\\|\/)math/,
+        helpers.root('node_modules/@angular/core/src/facade/math.js')
+      ),
+
+      new ngcWebpack.NgcWebpackPlugin({
+        disabled: !AOT,
+        tsConfig: helpers.root('tsconfig.webpack.json'),
+        resourceOverride: helpers.root('config/resource-override.js')
+      })
+    ],
 
     /*
-     * Plugin: HtmlWebpackPlugin
-     * Description: Simplifies creation of HTML files to serve your webpack bundles.
-     * This is especially useful for webpack bundles that include a hash in the filename
-     * which changes every compilation.
+     * Include polyfills or mocks for various node stuff
+     * Description: Node configuration
      *
-     * See: https://github.com/ampedandwired/html-webpack-plugin
+     * See: https://webpack.github.io/docs/configuration.html#node
      */
-    new HtmlWebpackPlugin({
-      template: 'src/index.html',
-      chunksSortMode: 'dependency'
-    }),
-
-    new webpack.ProvidePlugin({
-      jQuery: 'jquery',
-      $: 'jquery',
-      jquery: 'jquery'
-    })
-
-  ],
-
-  /*
-   * 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',
-    module: false,
-    clearImmediate: false,
-    setImmediate: false
+    node: {
+      global: true,
+      crypto: 'empty',
+      process: true,
+      module: false,
+      clearImmediate: false,
+      setImmediate: false,
+      setInterval: false,
+      setTimeout: false
+    }
   }
-
 }