infra-cli/templates/react/webpack.config.base.babel.txt

infra cli

import path from 'path'
import webpack from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin'
import GenerateJsonPlugin from 'generate-json-webpack-plugin'
import appPackageJson from './package.json'
{{#if typeScript}}
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
{{/if}}

export default (env = {}, argv) => {
  const isProductionMode = argv.mode === 'production'
  const cssUse = [
    isProductionMode ? MiniCssExtractPlugin.loader : 'style-loader',
    // I remove thread-loader because it cause this problem https://github.com/webpack-contrib/thread-loader/issues/128
    // 'thread-loader',
    'cache-loader',
    'css-loader'
  ]

  return {
    target: 'web',
    entry: {
      {{#if typeScript}}
      app: ['./src/index.tsx']
      {{/if}}
      {{#unless typeScript}}
      app: ['./src/index.jsx']
      {{/unless}}
    },
    output: {
      filename: isProductionMode ? '[name].[hash].js' : '[name].js',
      path: path.resolve(__dirname, 'dist'),
      chunkFilename: '[name].[hash].js',
      publicPath: '/'
    },
    module: {
      rules: [
        {
          {{#if typeScript}}
          test: /\.(j|t)sx?$/,
          {{/if}}
          {{#unless typeScript}}
          test: /\.jsx?$/,
          {{/unless}}
          exclude: /node_modules/,
          use: [
            'thread-loader',
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
                babelrc: true
              }
            }
          ]
        },
        {
          test: /\.css$/,
          use: cssUse
        },
        {
          test: /\.(png|jpg|gif|svg|woff2?)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000
              }
            }
          ]
        }
      ]
    },
    resolve: {
      {{#if typeScript}}
      extensions: ['.tsx', '.ts', '.js'],
      {{/if}}
      {{#unless typeScript}}
      extensions: ['.jsx', '.js'],
      {{/unless}}
      modules: [path.resolve(__dirname, 'src'), 'node_modules']
    },
    plugins: [
      {{#if typeScript}}
      new ForkTsCheckerWebpackPlugin(),
      {{/if}}
      new HtmlWebpackPlugin({
        template: './src/index.html',
        favicon: path.resolve(__dirname, './src/favicon.ico')
      }),
      new webpack.DefinePlugin({
        __ENV__: env,
        __VERSION__: JSON.stringify(appPackageJson.version)
      }),
      new webpack.HotModuleReplacementPlugin(),
      new MiniCssExtractPlugin({
        filename: isProductionMode ? '[name].[hash].css' : '[name].css',
        chunkFilename: isProductionMode ? '[id].[hash].css' : '[id].css'
      }),
      new OptimizeCssAssetsPlugin({
        cssProcessorOptions: {
          map: {
            inline: false,
            annotation: true
          }
        }
      }),
      new GenerateJsonPlugin('version.json', {
        version: appPackageJson.version
      })
    ].filter(plugin => plugin),
    devtool: isProductionMode ? 'source-map' : 'eval-cheap-module-source-map'
  }
}