client/config/webpack.common.js

   1 const helpers = require('./helpers')
   2
   3 /*
   4  * Webpack Plugins
   5  */
   6
   7 const AssetsPlugin = require('assets-webpack-plugin')
   8 const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin')
   9 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
  10 const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin
  11 const HtmlWebpackPlugin = require('html-webpack-plugin')
  12 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
  13 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
  14 const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
  15 const ngcWebpack = require('ngc-webpack')
  16
  17 const WebpackNotifierPlugin = require('webpack-notifier')
  18
  19 const HMR = helpers.hasProcessFlag('hot')
  20 const AOT = process.env.BUILD_AOT || helpers.hasNpmFlag('aot')
  21 const METADATA = {
  22   title: 'PeerTube',
  23   baseUrl: '/',
  24   isDevServer: helpers.isWebpackDevServer(),
  25   HMR: HMR,
  26   AOT: AOT
  27 }
  28
  29 /*
  30  * Webpack configuration
  31  *
  32  * See: http://webpack.github.io/docs/configuration.html#cli
  33  */
  34 module.exports = function (options) {
  35   const isProd = options.env === 'production'
  36   const AOT = isProd
  37
  38   return {
  39
  40     /*
  41      * Cache generated modules and chunks to improve performance for multiple incremental builds.
  42      * This is enabled by default in watch mode.
  43      * You can pass false to disable it.
  44      *
  45      * See: http://webpack.github.io/docs/configuration.html#cache
  46      */
  47     // cache: false,
  48
  49     /*
  50      * The entry point for the bundle
  51      * Our Angular.js app
  52      *
  53      * See: http://webpack.github.io/docs/configuration.html#entry
  54      */
  55     entry: {
  56       'polyfills': './src/polyfills.browser.ts',
  57       'main': AOT
  58               ? './src/main.browser.aot.ts'
  59               : './src/main.browser.ts'
  60     },
  61
  62     /*
  63      * Options affecting the resolving of modules.
  64      *
  65      * See: http://webpack.github.io/docs/configuration.html#resolve
  66      */
  67     resolve: {
  68       /*
  69        * An array of extensions that should be used to resolve modules.
  70        *
  71        * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
  72        */
  73       extensions: [ '.ts', '.js', '.json', '.scss' ],
  74
  75       modules: [ helpers.root('src'), helpers.root('node_modules') ]
  76     },
  77
  78     /*
  79      * Options affecting the normal modules.
  80      *
  81      * See: http://webpack.github.io/docs/configuration.html#module
  82      */
  83     module: {
  84
  85       rules: [
  86
  87         /*
  88          * Typescript loader support for .ts and Angular async routes via .async.ts
  89          *
  90          * See: https://github.com/s-panferov/awesome-typescript-loader
  91          */
  92         {
  93           test: /\.ts$/,
  94           use: [
  95             {
  96               loader: 'ng-router-loader',
  97               options: {
  98                 loader: 'async-import',
  99                 genDir: 'compiled',
 100                 aot: AOT
 101               }
 102             },
 103             {
 104               loader: 'awesome-typescript-loader',
 105               options: {
 106                 configFileName: 'tsconfig.webpack.json',
 107                 useCache: !isProd
 108               }
 109             },
 110             {
 111               loader: 'angular2-template-loader'
 112             }
 113           ],
 114           exclude: [/\.(spec|e2e)\.ts$/]
 115         },
 116
 117         /*
 118          * Json loader support for *.json files.
 119          *
 120          * See: https://github.com/webpack/json-loader
 121          */
 122         {
 123           test: /\.json$/,
 124           use: 'json-loader'
 125         },
 126
 127         {
 128           test: /\.(sass|scss)$/,
 129           use: [
 130             'css-to-string-loader',
 131             {
 132               loader: 'css-loader',
 133               options: {
 134                 sourceMap: true,
 135                 importLoaders: 1
 136               }
 137             },
 138             'resolve-url-loader',
 139             {
 140               loader: 'sass-loader',
 141               options: {
 142                 sourceMap: true
 143               }
 144             },
 145             {
 146               loader: 'sass-resources-loader',
 147               options: {
 148                 resources: [
 149                   helpers.root('src/sass/_variables.scss'),
 150                   helpers.root('src/sass/_mixins.scss')
 151                 ]
 152               }
 153             }
 154           ]
 155         },
 156         { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&minetype=application/font-woff' },
 157         { test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000' },
 158
 159         /* Raw loader support for *.html
 160          * Returns file content as string
 161          *
 162          * See: https://github.com/webpack/raw-loader
 163          */
 164         {
 165           test: /\.html$/,
 166           use: 'raw-loader',
 167           exclude: [
 168             helpers.root('src/index.html'),
 169             helpers.root('src/standalone/videos/embed.html')
 170           ]
 171         },
 172
 173         /* File loader for supporting images, for example, in CSS files.
 174          */
 175         {
 176           test: /\.(jpg|png|gif)$/,
 177           use: 'url-loader'
 178         }
 179
 180       ]
 181
 182     },
 183
 184     /*
 185      * Add additional plugins to the compiler.
 186      *
 187      * See: http://webpack.github.io/docs/configuration.html#plugins
 188      */
 189     plugins: [
 190       new AssetsPlugin({
 191         path: helpers.root('dist'),
 192         filename: 'webpack-assets.json',
 193         prettyPrint: true
 194       }),
 195
 196       /*
 197        * Plugin: ForkCheckerPlugin
 198        * Description: Do type checking in a separate process, so webpack don't need to wait.
 199        *
 200        * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
 201        */
 202       new CheckerPlugin(),
 203
 204       /*
 205        * Plugin: CommonsChunkPlugin
 206        * Description: Shares common code between the pages.
 207        * It identifies common modules and put them into a commons chunk.
 208        *
 209        * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
 210        * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
 211        */
 212       new CommonsChunkPlugin({
 213         name: 'polyfills',
 214         chunks: ['polyfills']
 215       }),
 216
 217       // This enables tree shaking of the vendor modules
 218       new CommonsChunkPlugin({
 219         name: 'vendor',
 220         chunks: ['main'],
 221         minChunks: module => {
 222           return /node_modules\//.test(module.resource)
 223         }
 224       }),
 225
 226       // Specify the correct order the scripts will be injected in
 227       new CommonsChunkPlugin({
 228         name: ['polyfills', 'vendor'].reverse()
 229       }),
 230
 231       /**
 232        * Plugin: ContextReplacementPlugin
 233        * Description: Provides context to Angular's use of System.import
 234        *
 235        * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
 236        * See: https://github.com/angular/angular/issues/11580
 237        */
 238       new ContextReplacementPlugin(
 239         /**
 240          * The (\\|\/) piece accounts for path separators in *nix and Windows
 241          */
 242         /(.+)?angular(\\|\/)core(.+)?/,
 243         helpers.root('src'), // location of your src
 244         {
 245           /**
 246            * Your Angular Async Route paths relative to this root directory
 247            */
 248         }
 249       ),
 250
 251       /*
 252        * Plugin: HtmlWebpackPlugin
 253        * Description: Simplifies creation of HTML files to serve your webpack bundles.
 254        * This is especially useful for webpack bundles that include a hash in the filename
 255        * which changes every compilation.
 256        *
 257        * See: https://github.com/ampedandwired/html-webpack-plugin
 258        */
 259       new HtmlWebpackPlugin({
 260         template: 'src/index.html',
 261         title: METADATA.title,
 262         chunksSortMode: function (a, b) {
 263           const entryPoints = [ 'inline', 'polyfills', 'sw-register', 'styles', 'vendor', 'main' ]
 264           return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0])
 265         },
 266         metadata: METADATA,
 267         inject: 'body'
 268       }),
 269
 270       /*
 271        * Plugin: ScriptExtHtmlWebpackPlugin
 272        * Description: Enhances html-webpack-plugin functionality
 273        * with different deployment options for your scripts including:
 274        *
 275        * See: https://github.com/numical/script-ext-html-webpack-plugin
 276        */
 277       new ScriptExtHtmlWebpackPlugin({
 278         sync: [ /polyfill|vendor/ ],
 279         defaultAttribute: 'async',
 280         preload: [/polyfill|vendor|main/],
 281         prefetch: [/chunk/]
 282       }),
 283
 284       new WebpackNotifierPlugin({ alwaysNotify: true }),
 285
 286       /**
 287       * Plugin LoaderOptionsPlugin (experimental)
 288       *
 289       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
 290       */
 291       new LoaderOptionsPlugin({
 292         options: {
 293           sassLoader: {
 294             precision: 10,
 295             includePaths: [ helpers.root('src/sass') ]
 296           }
 297         }
 298       }),
 299
 300       new ngcWebpack.NgcWebpackPlugin({
 301         disabled: !AOT,
 302         tsConfig: helpers.root('tsconfig.webpack.json')
 303       }),
 304
 305       new InlineManifestWebpackPlugin()
 306     ],
 307
 308     /*
 309      * Include polyfills or mocks for various node stuff
 310      * Description: Node configuration
 311      *
 312      * See: https://webpack.github.io/docs/configuration.html#node
 313      */
 314     node: {
 315       global: true,
 316       crypto: 'empty',
 317       process: true,
 318       module: false,
 319       clearImmediate: false,
 320       setImmediate: false,
 321       setInterval: false,
 322       setTimeout: false
 323     }
 324   }
 325 }