@lemon-clown-wpg/webpack-rule-tsx

Usage

• Install

  yarn add --dev @lemon-clown-wpg/webpack-rule-tsx

• Use in webpack.config.js/webpack.config.ts

  import path from 'path'
  import { calcTsxRule, calcOutsideJsRule, calcEslintRule } from '@lemon-clown-wpg/webpack-rule-tsx'
  
  export default {
    ...
    module: {
      rules: [
        ...
        // First, run the linter.
        // It's important to do this before Babel processes the JS.
        {
          calcEslintRule({
            include: path.resolve('src'),
            eslintOptions: {
              resolvePluginsRelativeTo: __dirname,
            }
          })
        },
        {
          // "oneOf" will traverse all following loaders until one will
          // match the requirements. When no loader matches it will fall
          // back to the "file" loader at the end of the loader list.
          oneOf: [
            ...
            // Process application JS with Babel.
            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
            calcTsRule({
              include: path.resolve('src'),
              isEnvProduction: process.env.NODE_ENV === 'production',
              babelLoaderOptions: { }, // optional
            }),
            // Process any JS outside of the app with Babel.
            // Unlike the application JS, we only compile the standard ES features.
            calcOutsideJsRule({
              shouldUseSourceMap: true,
              babelLoaderOptions: { }, // optional
            }),
            ...
          ]
        }
        ...
      ]
    }
    ...
  }

Options

• calcTsxRule: see TsxRuleProps

• calcOutsideJsRule: see OutsideJsRuleProps

• calcEslintRule: see EslintRuleProps