client/config/webpack.common.js

   1 const webpack = require('webpack')
   2 const helpers = require('./helpers')
   3
   4 /*
   5  * Webpack Plugins
   6  */
   7
   8 const CopyWebpackPlugin = require('copy-webpack-plugin')
   9 const HtmlWebpackPlugin = require('html-webpack-plugin')
  10 const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin
  11 const AssetsPlugin = require('assets-webpack-plugin')
  12 const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin')
  13 const WebpackNotifierPlugin = require('webpack-notifier')
  14
  15 /*
  16  * Webpack Constants
  17  */
  18 const METADATA = {
  19   title: 'PeerTube',
  20   baseUrl: '/',
  21   isDevServer: helpers.isWebpackDevServer()
  22 }
  23
  24 /*
  25  * Webpack configuration
  26  *
  27  * See: http://webpack.github.io/docs/configuration.html#cli
  28  */
  29 module.exports = function (options) {
  30   var isProd = options.env === 'production'
  31
  32   return {
  33     /*
  34      * Static metadata for index.html
  35      *
  36      * See: (custom attribute)
  37      */
  38     metadata: METADATA,
  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.ts',
  57       'vendor': './src/vendor.ts',
  58       'main': './src/main.ts'
  59     },
  60
  61     /*
  62      * Options affecting the resolving of modules.
  63      *
  64      * See: http://webpack.github.io/docs/configuration.html#resolve
  65      */
  66     resolve: {
  67       /*
  68        * An array of extensions that should be used to resolve modules.
  69        *
  70        * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
  71        */
  72       extensions: [ '', '.ts', '.js', '.scss' ],
  73
  74       // Make sure root is src
  75       root: helpers.root('src'),
  76
  77       // remove other default values
  78       modulesDirectories: [ 'node_modules' ]
  79     },
  80
  81     output: {
  82       publicPath: '/client/'
  83     },
  84
  85     /*
  86      * Options affecting the normal modules.
  87      *
  88      * See: http://webpack.github.io/docs/configuration.html#module
  89      */
  90     module: {
  91       /*
  92        * An array of applied pre and post loaders.
  93        *
  94        * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
  95        */
  96       preLoaders: [
  97         {
  98           test: /\.ts$/,
  99           loader: 'string-replace-loader',
 100           query: {
 101             search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',
 102             replace: '$1.import($3).then(mod => (mod.__esModule && mod.default) ? mod.default : mod)',
 103             flags: 'g'
 104           },
 105           include: [helpers.root('src')]
 106         }
 107       ],
 108
 109       /*
 110        * An array of automatically applied loaders.
 111        *
 112        * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
 113        * This means they are not resolved relative to the configuration file.
 114        *
 115        * See: http://webpack.github.io/docs/configuration.html#module-loaders
 116        */
 117       loaders: [
 118
 119         /*
 120          * Typescript loader support for .ts and Angular 2 async routes via .async.ts
 121          *
 122          * See: https://github.com/s-panferov/awesome-typescript-loader
 123          */
 124         {
 125           test: /\.ts$/,
 126           loaders: [
 127             '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
 128             'awesome-typescript-loader',
 129             'angular2-template-loader'
 130           ],
 131           exclude: [/\.(spec|e2e)\.ts$/]
 132         },
 133
 134         /*
 135          * Json loader support for *.json files.
 136          *
 137          * See: https://github.com/webpack/json-loader
 138          */
 139         {
 140           test: /\.json$/,
 141           loader: 'json-loader'
 142         },
 143
 144         {
 145           test: /\.(sass|scss)$/,
 146           loaders: ['css-to-string-loader', 'css-loader?sourceMap', 'resolve-url', 'sass-loader?sourceMap']
 147         },
 148         { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&minetype=application/font-woff' },
 149         { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file' },
 150
 151         /* Raw loader support for *.html
 152          * Returns file content as string
 153          *
 154          * See: https://github.com/webpack/raw-loader
 155          */
 156         {
 157           test: /\.html$/,
 158           loader: 'raw-loader',
 159           exclude: [ helpers.root('src/index.html') ]
 160         }
 161
 162       ]
 163
 164     },
 165
 166     sassLoader: {
 167       precision: 10
 168     },
 169
 170     /*
 171      * Add additional plugins to the compiler.
 172      *
 173      * See: http://webpack.github.io/docs/configuration.html#plugins
 174      */
 175     plugins: [
 176       new AssetsPlugin({
 177         path: helpers.root('dist'),
 178         filename: 'webpack-assets.json',
 179         prettyPrint: true
 180       }),
 181
 182       /*
 183        * Plugin: ForkCheckerPlugin
 184        * Description: Do type checking in a separate process, so webpack don't need to wait.
 185        *
 186        * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
 187        */
 188       new ForkCheckerPlugin(),
 189
 190       /*
 191        * Plugin: CommonsChunkPlugin
 192        * Description: Shares common code between the pages.
 193        * It identifies common modules and put them into a commons chunk.
 194        *
 195        * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
 196        * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
 197        */
 198       new webpack.optimize.CommonsChunkPlugin({
 199         name: [ 'polyfills', 'vendor' ].reverse()
 200       }),
 201
 202       /**
 203        * Plugin: ContextReplacementPlugin
 204        * Description: Provides context to Angular's use of System.import
 205        *
 206        * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
 207        * See: https://github.com/angular/angular/issues/11580
 208       */
 209       new ContextReplacementPlugin(
 210         // The (\\|\/) piece accounts for path separators in *nix and Windows
 211         /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
 212         helpers.root('src') // location of your src
 213       ),
 214
 215       /*
 216        * Plugin: CopyWebpackPlugin
 217        * Description: Copy files and directories in webpack.
 218        *
 219        * Copies project static assets.
 220        *
 221        * See: https://www.npmjs.com/package/copy-webpack-plugin
 222        */
 223       new CopyWebpackPlugin([
 224         {
 225           from: 'src/assets',
 226           to: 'assets'
 227         },
 228         {
 229           from: 'node_modules/webtorrent/webtorrent.min.js',
 230           to: 'assets/webtorrent'
 231         }
 232       ]),
 233
 234       /*
 235        * Plugin: HtmlWebpackPlugin
 236        * Description: Simplifies creation of HTML files to serve your webpack bundles.
 237        * This is especially useful for webpack bundles that include a hash in the filename
 238        * which changes every compilation.
 239        *
 240        * See: https://github.com/ampedandwired/html-webpack-plugin
 241        */
 242       new HtmlWebpackPlugin({
 243         template: 'src/index.html',
 244         chunksSortMode: 'dependency'
 245       }),
 246
 247       new WebpackNotifierPlugin({ alwaysNotify: true })
 248     ],
 249
 250     /*
 251      * Include polyfills or mocks for various node stuff
 252      * Description: Node configuration
 253      *
 254      * See: https://webpack.github.io/docs/configuration.html#node
 255      */
 256     node: {
 257       global: 'window',
 258       crypto: 'empty',
 259       fs: 'empty',
 260       events: true,
 261       module: false,
 262       clearImmediate: false,
 263       setImmediate: false
 264     }
 265   }
 266 }