webpack.config.js

// Usage webpack --mode production or webpack --mode development
// This will be called from package.json - yarn scripts
const path = require('path');
const webpack = require('webpack');
const config = require('config');
// Plugins
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const NodemonPlugin = require('nodemon-webpack-plugin');
const S3Plugin = require('webpack-s3-plugin');

module.exports = (env, options) => {
  const mode = options.mode;
  // For debugging and source maps we want the unminified version in development
  // If you want to add a library to be used externally, you will need to add it here
  const copyMap = {
    'react': (mode === 'development') ? 'react/dist/react.js' : 'react/dist/react.min.js',
    'react-dom': (mode === 'development') ? 'react-dom/dist/react-dom.js' : 'react-dom/dist/react-dom.min.js',
    'redux': (mode === 'development') ? 'redux/dist/redux.js' : 'redux/dist/redux.min.js',
    'react-redux': (mode === 'development') ? 'react-redux/dist/react-redux.js' : 'react-redux/dist/react-redux.min.js',
    'axios': (mode === 'development') ? 'axios/dist/axios.js' : 'axios/dist/axios.min.js',
    'react-modal': (mode === 'development') ? 'react-modal/dist/react-modal.js' : 'react-modal/dist/react-modal.min.js',
    'cap-web-components': (mode === 'development') ? '@bbc/cap-web-components/dist/cap-web-components.js' : '@bbc/cap-web-components/dist/cap-web-components.js'
  }

  const webpackConfig =  [{
    name: 'Server Side',
    target: 'node',
    entry: {
      play: './app/react/play-bundle.js',
      listen: './app/react/listen-bundle.js'
    },
    output: {
      path: path.join(__dirname, "app/es5-bundles"),
      filename: '[name].js',
      libraryTarget: "commonjs2" // https://github.com/webpack/webpack/issues/1114
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          loader: "babel-loader",
          exclude: /node_modules/
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(["./app/es5-bundles/*", "./web/*"])
    ],
    resolve: {
      extensions: ['.js', '.json', '.jsx'],
      symlinks: false
    },
    watchOptions: {
      poll: 1000,
      ignored: /node_modules/
    }
  },
  // CLIENT SIDE CONFIG
  {
    name: 'Client Side',
    // target: 'web',
    entry: {
      play: './app/react/play.jsx',
      listen: './app/react/listen.jsx'
    },
    devtool: (mode === 'development') ? "source-map" : false,
    output: {
      path: path.join(__dirname, "web/assets/"),
      filename: 'js/[name].[chunkhash].js',
      libraryTarget: 'amd'
    },
    externals: {
      "react-dom": "react-dom",
      "react": "react",
      "react-redux": "react-redux",
      "redux": "redux",
      "axios": {
        amd: "axios"
      },
      "react-modal": {
        amd: "react-modal"
      },
      "@bbc/cap-web-components": {
        amd: "cap-web-components"
      }
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          loader: "babel-loader",
        },
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
            use: [
              {
                loader: 'css-loader',
                options: {
                  // If you are having trouble with urls not resolving add this setting.
                  // See https://github.com/webpack-contrib/css-loader#url
                  url: false,
                  minimize: (mode !== 'development'),
                  sourceMap: true
                }
              },
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: true
                }
              }
            ]
          })
        }
      ]
    },
    resolve: {
      extensions: ['.js', '.json', '.jsx', '.scss']
    },
    plugins: [
      // Im sure there's a less verbose way to do this but i started to become tired
      // hash:10 because https://github.com/webpack-contrib/copy-webpack-plugin/issues/104
      new CopyWebpackPlugin([
        { from: copyMap['react'], to: 'js/vendor/react.[hash:10].js' },
        { from: copyMap['react-dom'], to: 'js/vendor/react-dom.[hash:10].js' },
        { from: copyMap['react-redux'], to: 'js/vendor/react-redux.[hash:10].js' },
        { from: copyMap['redux'], to: 'js/vendor/redux.[hash:10].js' },
        { from: copyMap['axios'], to: 'js/vendor/axios.[hash:10].js' },
        { from: copyMap['react-modal'], to: 'js/vendor/react-modal.[hash:10].js' },
        { from: copyMap['cap-web-components'], to: 'js/cap-web-components.[hash:10].js' },
        { from: path.join(__dirname, "./assets/img"), to: './img/'}
      ], {
        context: path.join(__dirname, "./node_modules")
      }),
      new ExtractTextPlugin({
        filename: 'css/[name].[hash].css'
      }),
      new ManifestPlugin({
        fileName: 'rev-manifest.json',
        map(file) {
          // https://github.com/webpack-contrib/copy-webpack-plugin/issues/104
          // We need to do this until copy-webpack-plugin supports webpack hashing
          file.name = file.name.replace(/\.[a-f0-9]{10}\./, '.');
          return file;
        }
      })
    ],
    watchOptions: {
      poll: 1000,
      aggregateTimeout: 1000
    }
  }]

  // Add on NodemonPlugin if in watch mode
  if (mode === 'development' && options.watch) {
    webpackConfig[1].plugins.push(new NodemonPlugin({
      legacyWatch: true,
      watch: path.resolve('./app'),
      script: './server.js',
      verbose: true,
    }))
  }

  // Only do S3 upload on production
  if (mode === 'production') {
    webpackConfig[1].plugins.push(new S3Plugin({
      directory: path.resolve('./web/assets'),
      s3UploadOptions: {
        Bucket: config.get('s3.bucket'),
        CacheControl: config.get('s3.cacheControl')
      },
      basePath: 'playspace'
    }))
  }

  return webpackConfig;
}