webpack.config.js

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var paths = require('./config/paths');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  .BundleAnalyzerPlugin;
const EntrypointAssetsPlugin = require('./entrypoint-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const nodeEnv = process.env.NODE_ENV || 'development';
const hotReload = process.env.HOT_RELOADING !== 'FALSE';
const isProd = nodeEnv === 'production';

const config = {
  mode: isProd ? 'production' : 'development',
  // Don't attempt to continue if there are any errors.
  bail: isProd ? true : false,
  // We generate sourcemaps in production. This is slow but gives good results.
  // You can exclude the *.map files from the build during deployment.
  devtool: isProd ? (shouldUseSourceMap ? 'source-map' : false) : 'eval',

  entry: {
    app: isProd
      ? './modules/app.js'
      : hotReload
        ? [
            require.resolve('react-dev-utils/webpackHotDevClient'),
            './modules/app.js',
          ]
        : './modules/app.js',
  },
  output: {
    path: path.resolve(__dirname, '../backend/priv/static/'),
    pathinfo: true,
    publicPath: isProd ? undefined : '/',
    filename: isProd ? 'js/[name].[chunkhash:8].js' : 'js/[name].js',
    chunkFilename: isProd ? 'js/[chunkhash:8].chunk.js' : 'js/[name].chunk.js',
    // devtoolModuleFilenameTemplate: info => {
    //   // console.log(info);
    //   return `webpack:///${info.resource}`;
    // },
    // sourceMapFilename: '[file].map',
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath),
    //// this is necessary to fix a webpack error: https://github.com/webpack/webpack/issues/6642
    globalObject: 'this',

    // devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]?[hash]',
  },
  optimization: isProd
    ? {
        minimizer: [
          new UglifyJsPlugin({
            uglifyOptions: {
              ecma: 5,
              compress: {
                warnings: false,
                // Disabled because of an issue with Uglify breaking seemingly valid code:
                // https://github.com/facebook/create-react-app/issues/2376
                // Pending further investigation:
                // https://github.com/mishoo/UglifyJS2/issues/2011
                comparisons: false,
              },
              mangle: {
                safari10: true,
              },
              output: {
                comments: false,
                // Turned on because emoji and regex is not minified properly using default
                // https://github.com/facebook/create-react-app/issues/2488
                ascii_only: true,
              },
            },
            exclude: /\.min\.js/,
            // Use multi-process parallel running to improve the build speed
            // Default number of concurrent runs: os.cpus().length - 1
            parallel: true,
            // Enable file caching
            cache: true,
            sourceMap: shouldUseSourceMap,
          }),
        ],
        // Automatically split vendor and commons
        // https://twitter.com/wSokra/status/969633336732905474
        splitChunks: {
          chunks: 'all',
          name: false,
          maxInitialRequests: Infinity,
          maxAsyncRequests: Infinity,
        },
        // Keep the runtime chunk seperated to enable long term caching
        // https://twitter.com/wSokra/status/969679223278505985
        runtimeChunk: true,
      }
    : {
        removeAvailableModules: false,
      },

  resolve: {
    // This allows you to set a fallback for where Webpack should look for modules.
    // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
    // We use `fallback` instead of `root` because we want `node_modules` to "win"
    // if there any conflicts. This matches Node resolution mechanism.
    // https://github.com/facebookincubator/create-react-app/issues/253
    // fallback: paths.nodePaths,

    // 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
    modules: [path.join(__dirname, 'node_modules')],
    extensions: ['.js', '.json', '.jsx'],
    alias: {
      modules: path.resolve(__dirname, 'modules'),
      components: path.resolve(__dirname, 'modules', 'components'),
      shared: path.resolve(__dirname, '..', 'shared'),
    },
  },
  module: {
    strictExportPresence: true,
    rules: [
      { parser: { requireEnsure: false } },
      // {
      //   loader: 'worker-loader',
      //   // options: { publicPath: '/' },
      // },
      {
        test: /\.svg$/,
        // use the URL-loader to convert the image to a data attribute
        // and use svgo to drastically decrease teh size of the image
        loaders: [
          'url-loader?limit=10000',
          `svgo-loader?${JSON.stringify({
            plugins: [],
          })}`,
        ],
      },
      {
        test: /\.(jpe?g|png|gif|ico)$/,
        loader: 'url-loader',
        options: { limit: 10000, name: 'images/[name].[ext]' },
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
      {
        test: /\.(js|jsx|mjs)$/,
        enforce: 'pre',
        use: [
          {
            options: {
              formatter: eslintFormatter,
              eslintPath: require.resolve('eslint'),
              // @remove-on-eject-begin
              ignore: false,
              // @remove-on-eject-end
            },
            loader: require.resolve('eslint-loader'),
          },
        ],
        include: [
          path.resolve(__dirname, '..', 'shared'),
          path.resolve(__dirname, 'modules'),
          path.resolve(__dirname, 'node_modules', 'react-icons'),
        ],
        exclude: [/[/\\\\]node_modules[/\\\\]/, /min\.js/],
      },
      // Process any JS outside of the app with Babel.
      // Unlike the application JS, we only compile the standard ES features.

      {
        test: /\.js$/,
        use: [
          // This loader parallelizes code compilation, it is optional but
          // improves compile time on larger projects
          require.resolve('thread-loader'),
          {
            loader: require.resolve('babel-loader'),
            options: {
              compact: false,
              cacheDirectory: true,
              highlightCode: true,
            },
          },
        ],
        include: [
          path.resolve(__dirname, '..', 'shared'),
          path.resolve(__dirname, 'modules'),
          path.resolve(__dirname, 'node_modules', 'react-icons'),
        ],
        exclude: [/\/node_modules\//],
      },
    ],
  },
  plugins: [
    // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    // In development, this will be an empty string.
    new HtmlWebpackPlugin({
      inject: !isProd,
      template: paths.appHtml,
    }),
    // new NpmInstallPlugin(),
    // isProd && new ManifestPlugin(),
    !isProd && new webpack.NamedModulesPlugin(),
    process.env.ANALYZE &&
      new BundleAnalyzerPlugin({
        analyzerMode: 'static',
      }),
    isProd &&
      new CopyWebpackPlugin([
        {
          from: 'node_modules/pdfjs-dist/build/pdf.worker.min.js',
          to: 'js/pdf.worker.min.js',
        },
      ]),
    isProd &&
      new CopyWebpackPlugin([
        {
          from: 'node_modules/pdfjs-dist/cmaps/',
          to: 'js/cmaps/',
        },
      ]),
    isProd && new CopyWebpackPlugin([{ from: './assets' }]),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(nodeEnv),
      },
    }),
    !isProd && new webpack.HotModuleReplacementPlugin(),
    // Watcher doesn't work well if you mistype casing in a path so we use
    // a plugin that prints an error when you attempt to do this.
    // See https://github.com/facebookincubator/create-react-app/issues/240
    !isProd && new CaseSensitivePathsPlugin(),
    // If you require a missing module and then `npm install` it, you still have
    // to restart the development server for Webpack to discover it. This plugin
    // makes the discovery automatic so you don't have to restart.
    // See https://github.com/facebookincubator/create-react-app/issues/186

    // for some reason this doesn't work....
    // !isProd && new WatchMissingNodeModulesPlugin('node_modules'),
    new webpack.IgnorePlugin(/pdf.worker.js$/, /pdfjs-dist/),
    new EntrypointAssetsPlugin(),

    // new webpack.IgnorePlugin(/pdf.js$/, /pdfjs-dist/),
  ].filter(Boolean),
  // 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: {
    fs: false,
    net: false,
    tls: false,
  },
  // Turn off performance hints during development because we don't do any
  // splitting or minification in interest of speed. These warnings become
  // cumbersome.
  ...(isProd
    ? {
        performance: {
          hints: false,
        },
      }
    : {}),
};

module.exports = config;