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