arojunior / awesome-feed

'use strict'

const autoprefixer = require('autoprefixer')

const path = require('path')

const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const ManifestPlugin = require('webpack-manifest-plugin')

const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')

const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')

const eslintFormatter = require('react-dev-utils/eslintFormatter')

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')

const paths = require('./paths')

const getClientEnvironment = require('./env')

const fs = require('fs')

// Webpack uses `publicPath` to determine where the app is being served from.

// It requires a trailing slash, or the file assets will get an incorrect path.

const publicPath = paths.servedPath

// Some apps do not use client-side routing with pushState.

// For these, "homepage" can be set to "." to enable relative asset paths.

const shouldUseRelativeAssetPaths = publicPath === './'

// `publicUrl` is just like `publicPath`, but we will provide it to our app

// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.

// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.

const publicUrl = publicPath.slice(0, -1)

// Get environment variables to inject into our app.

const env = getClientEnvironment(publicUrl)

// Assert this just to be safe.

// Development builds of React are slow and not intended for production.

if (env.stringified['process.env'].NODE_ENV !== '"production"') {

  throw new Error('Production builds must have NODE_ENV=production.')

}

// Note: defined here because it will be used more than once.

const cssFilename = 'static/css/[name].[contenthash:8].css'

// ExtractTextPlugin expects the build output to be flat.

// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)

// However, our output is structured with css, js and media folders.

// To have this structure working with relative paths, we have to use custom options.

const extractTextPluginOptions = shouldUseRelativeAssetPaths

  ? // Making sure that the publicPath goes back to to build folder.

    {publicPath: Array(cssFilename.split('/').length).join('../')}

  : {}

// Find dependencies in package.json

const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'))

const vendorDependencies = Object.keys(packageJson.dependencies)

// This is the production configuration.

// It compiles slowly and is focused on producing a fast and minimal bundle.

// The development configuration is different and lives in a separate file.

module.exports = {

  // Don't attempt to continue if there are any errors.

  bail: true,

  // We generate sourcemaps in production. This is slow but gives good results.

  // You can exclude the *.map files from the build during deployment.

  devtool: 'source-map',

  // In production, we only want to load the polyfills and the app code.

  entry: {

    app: [require.resolve('./polyfills'), paths.appIndexJs],

    vendor: vendorDependencies

  },

  output: {

    // The build folder.

    path: paths.appBuild,

    // Generated JS file names (with nested folders).

    // There will be one main bundle, and one file per asynchronous chunk.

    // We don't currently advertise code splitting but Webpack supports it.

    filename: 'static/js/[name].[chunkhash:8].js',

    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',

    // We inferred the "public path" (such as / or /my-project) from homepage.

    publicPath: publicPath,

    // Point sourcemap entries to original disk location (format as URL on Windows)

    devtoolModuleFilenameTemplate: info =>

      path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/')

  },

  resolve: {

    // This allows you to set a fallback for where Webpack should look for modules.

    // We placed these paths second because we want `node_modules` to "win"

    // if there are any conflicts. This matches Node resolution mechanism.

    // https://github.com/facebookincubator/create-react-app/issues/253

    modules: ['node_modules', paths.appNodeModules].concat(

      // It is guaranteed to exist because we tweak it in `env.js`

      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)

    ),

    // These are the reasonable defaults supported by the Node ecosystem.

    // We also include JSX as a common component filename extension to support

    // some tools, although we do not recommend using it, see:

    // https://github.com/facebookincubator/create-react-app/issues/290

    // `web` extension prefixes have been added for better support

    // for React Native Web.

    extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],

    alias: {

      // Support React Native Web

      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/

      'react-native': 'react-native-web'

    },

    plugins: [

      // Prevents users from importing files from outside of src/ (or node_modules/).

      // This often causes confusion because we only process files within src/ with babel.

      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,

      // please link the files into your node_modules/ and let module-resolution kick in.

      // Make sure your source files are compiled, as they will not be processed in any way.

      new ModuleScopePlugin(paths.appSrc)

    ]

  },

  module: {

    strictExportPresence: true,

    rules: [

      // TODO: Disable require.ensure as it's not a standard language feature.

      // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.

      // { parser: { requireEnsure: false } },

      // First, run the linter.

      // It's important to do this before Babel processes the JS.

      {

        test: /\.(js|jsx)$/,

        enforce: 'pre',

        use: [

          {

            options: {

              formatter: eslintFormatter

            },

            loader: require.resolve('eslint-loader')

          }

        ],

        include: paths.appSrc

      },

      // ** ADDING/UPDATING LOADERS **

      // The "file" loader handles all assets unless explicitly excluded.

      // The `exclude` list *must* be updated with every change to loader extensions.

      // When adding a new loader, you must add its `test`

      // as a new entry in the `exclude` list in the "file" loader.

      // "file" loader makes sure those assets end up in the `build` folder.

      // When you `import` an asset, you get its filename.

      {

        exclude: [

          /\.html$/,

          /\.(js|jsx)$/,

          /\.css$/,

          /\.json$/,

          /\.bmp$/,

          /\.gif$/,

          /\.jpe?g$/,

          /\.png$/

        ],

        loader: require.resolve('file-loader'),

        options: {

          name: 'static/media/[name].[hash:8].[ext]'

        }

      },

      // "url" loader works just like "file" loader but it also embeds

      // assets smaller than specified size as data URLs to avoid requests.

      {

        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],

        loader: require.resolve('url-loader'),

        options: {

          limit: 10000,

          name: 'static/media/[name].[hash:8].[ext]'

        }

      },

      // Process JS with Babel.

      {

        test: /\.(js|jsx)$/,

        include: paths.appSrc,

        loader: require.resolve('babel-loader'),

        options: {

          compact: true

        }

      },

      // The notation here is somewhat confusing.

      // "postcss" loader applies autoprefixer to our CSS.

      // "css" loader resolves paths in CSS and adds assets as dependencies.

      // "style" loader normally turns CSS into JS modules injecting <style>,

      // but unlike in development configuration, we do something different.

      // `ExtractTextPlugin` first applies the "postcss" and "css" loaders

      // (second argument), then grabs the result CSS and puts it into a

      // separate file in our build process. This way we actually ship

      // a single CSS file in production instead of JS code injecting <style>

      // tags. If you use code splitting, however, any async bundles will still

      // use the "style" loader inside the async code so CSS from them won't be

      // in the main CSS file.

      {

        test: /\.css$/,

        loader: ExtractTextPlugin.extract(

          Object.assign(

            {

              fallback: require.resolve('style-loader'),

              use: [

                {

                  loader: require.resolve('css-loader'),

                  options: {

                    importLoaders: 1,

                    minimize: true,

                    sourceMap: true

                  }

                },

                {

                  loader: require.resolve('postcss-loader'),

                  options: {

                    // Necessary for external CSS imports to work

                    // https://github.com/facebookincubator/create-react-app/issues/2677

                    ident: 'postcss',

                    plugins: () => [

                      require('postcss-flexbugs-fixes'),

                      autoprefixer({

                        browsers: [

                          '>1%',

                          'last 4 versions',

                          'Firefox ESR',

                          'not ie < 9' // React doesn't support IE8 anyway

                        ],

                        flexbox: 'no-2009'

                      })

                    ]

                  }

                }

              ]

            },

            extractTextPluginOptions

          )

        )

        // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.

      }

      // ** STOP ** Are you adding a new loader?

      // Remember to add the new extension(s) to the "file" loader exclusion list.

    ]

  },

  plugins: [

    // Makes some environment variables available in index.html.

    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:

    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    // In production, it will be an empty string unless you specify "homepage"

    // in `package.json`, in which case it will be the pathname of that URL.

    new InterpolateHtmlPlugin(env.raw),

    // Generates an `index.html` file with the <script> injected.

    new HtmlWebpackPlugin({

      inject: true,

      template: paths.appHtml,

      minify: {

        removeComments: true,

        collapseWhitespace: true,

        removeRedundantAttributes: true,

        useShortDoctype: true,

        removeEmptyAttributes: true,

        removeStyleLinkTypeAttributes: true,

        keepClosingSlash: true,

        minifyJS: true,

        minifyCSS: true,

        minifyURLs: true

      }

    }),

    // Makes some environment variables available to the JS code, for example:

    // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.

    // It is absolutely essential that NODE_ENV was set to production here.

    // Otherwise React will be compiled in the very slow development mode.

    new webpack.DefinePlugin(env.stringified),

    // Minify the code.

    new webpack.optimize.UglifyJsPlugin({

      compress: {

        warnings: false,

        // Disabled because of an issue with Uglify breaking seemingly valid code:

        // https://github.com/facebookincubator/create-react-app/issues/2376

        // Pending further investigation:

        // https://github.com/mishoo/UglifyJS2/issues/2011

        comparisons: false

      },

      output: {

        comments: false,

        // Turned on because emoji and regex is not minified properly using default

        // https://github.com/facebookincubator/create-react-app/issues/2488

        ascii_only: true

      },

      sourceMap: true

    }),

    // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.

    new ExtractTextPlugin({

      filename: cssFilename

    }),

    // Generate a manifest file which contains a mapping of all asset filenames

    // to their corresponding output file so that tools can pick it up without

    // having to parse `index.html`.

    new ManifestPlugin({

      fileName: 'asset-manifest.json'

    }),

    // Generate a service worker script that will precache, and keep up to date,

    // the HTML & assets that are part of the Webpack build.

    new SWPrecacheWebpackPlugin({

      // By default, a cache-busting query parameter is appended to requests

      // used to populate the caches, to ensure the responses are fresh.

      // If a URL is already hashed by Webpack, then there is no concern

      // about it being stale, and the cache-busting can be skipped.

      dontCacheBustUrlsMatching: /\.\w{8}\./,

      filename: 'service-worker.js',

      logger(message) {

        if (message.indexOf('Total precache size is') === 0) {

          // This message occurs for every build and is a bit too noisy.

          return

        }

        if (message.indexOf('Skipping static resource') === 0) {

          // This message obscures real errors so we ignore it.

          // https://github.com/facebookincubator/create-react-app/issues/2612

          return

        }

        console.log(message)

      },

      minify: true,

      // For unknown URLs, fallback to the index page

      navigateFallback: publicUrl + '/index.html',

      // Ignores URLs starting from /__ (useful for Firebase):

      // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219

      navigateFallbackWhitelist: [/^(?!\/__).*/],

      // Don't precache sourcemaps (they're large) and build asset manifest:

      staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/]

    }),

    // Moment.js is an extremely popular library that bundles large locale files

    // by default due to how Webpack interprets its code. This is a practical

    // solution that requires the user to opt into importing specific locales.

    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack

    // You can remove this if you don't use Moment.js:

    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'vendor',

      filename: 'static/js/vendor.js'

    })

  ],

  // Some libraries import Node modules but don't use them in the browser.

  // Tell Webpack to provide empty mocks for them so importing them works.

  node: {

    dgram: 'empty',

    fs: 'empty',

    net: 'empty',

    tls: 'empty'

  }

}