react-paint-test/webpack.components.js

a simple paint tool

"use strict";
const TerserPlugin = require("terser-webpack-plugin"); // 压缩插件
const miniCssPlugin = require("mini-css-extract-plugin");
const PnpWebpackPlugin = require("pnp-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("react-dev-utils/ForkTsCheckerWebpackPlugin");
const resolve = require("resolve");

const paths = require("./config/paths");
const modules = require("./config/modules");

const fs = require("fs");
process.env.BABEL_ENV = "production";
process.env.NODE_ENV = "production";
const useTypeScript = fs.existsSync(paths.appTsConfig);

const isEnvProductionProfile = true;
module.exports = {
  entry: {
    test: paths.appIndexJs,
    "test.min": paths.appIndexJs
  },
  output: {
    filename: "./lib/[name].js",
    library: "test", // 使用时 test.add()
    libraryTarget: "umd",
    libraryExport: "default"
  },
  mode: "none", // 默认production
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        include: /\.min\.js$/
      })
    ]
  },
  resolve: {
    //    extensions: [".js", ".jsx", ".tsx"]
    modules: ["node_modules", paths.appNodeModules].concat(modules.additionalModulePaths || []),
    extensions: paths.moduleFileExtensions
      .map((ext) => `.${ext}`)
      .filter((ext) => useTypeScript || !ext.includes("ts")),
    alias: {
      "react-native": "react-native-web",
      ...(isEnvProductionProfile && {
        "react-dom$": "react-dom/profiling",
        "scheduler/tracing": "scheduler/tracing-profiling"
      }),
      ...(modules.webpackAliases || {})
    }
  },
  resolveLoader: {
    plugins: [PnpWebpackPlugin.moduleLoader(module)]
  },
  module: {
    // 当webpack 原本不支持的模块，需要其他方式使之可以使用时，需要做module这个key 下对其设置
    rules: [
      {
        test: /\.css$/,
        use: [miniCssPlugin.loader, "css-loader"]
      },
      {
        test: /\.less$/,
        use: [miniCssPlugin.loader, "css-loader", "postcss-loader", "less-loader"]
      },
      {
        test: /\.(jpe?g|png|gif|webp)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "[name].[ext]", //[ext] 占位符，原本是什么后缀名，就是什么后缀名，
            outputPath: "images", // 存放资源的位置
            publicPath: "../images", // 图片资源的引入资源的位置
            limit: 3 * 1024
          }
        }
      },
      {
        test: /\.(svg|eot|woff|woff2|ttf)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name].[ext]", //[ext] 占位符，原本是什么后缀名，就是什么后缀名，
            outputPath: "font", // 存放资源的位置
            publicPath: "../font" // 图片资源的引入资源的位置
          }
        }
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      },

      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        include: paths.appIndexJs,
        loader: require.resolve("babel-loader"),
        options: {
          customize: require.resolve("babel-preset-react-app/webpack-overrides"),
          presets: [[require.resolve("babel-preset-react-app")]],
          plugins: [
            [
              require.resolve("babel-plugin-named-asset-import"),
              {
                loaderMap: {
                  svg: {
                    ReactComponent: "@svgr/webpack?-svgo,+titleProp,+ref![path]"
                  }
                }
              }
            ]
          ].filter(Boolean),
          cacheDirectory: true,
          cacheCompression: false
          // compact: isEnvProduction
        }
      },
      {
        test: /\.(js|mjs)$/,
        exclude: /@babel(?:\/|\\{1,2})runtime/,
        loader: require.resolve("babel-loader"),
        options: {
          babelrc: false,
          configFile: false,
          compact: false,
          presets: [[require.resolve("babel-preset-react-app/dependencies"), { helpers: true }]],
          cacheDirectory: true,
          cacheCompression: false,
          sourceMaps: true,
          inputSourceMap: true
        }
      }
    ]
  },
  plugins: [
    useTypeScript &&
      new ForkTsCheckerWebpackPlugin({
        typescript: resolve.sync("typescript", {
          basedir: paths.appNodeModules
        }),
        // async: isEnvDevelopment,
        checkSyntacticErrors: true,
        resolveModuleNameModule: process.versions.pnp ? `${__dirname}/pnpTs.js` : undefined,
        resolveTypeReferenceDirectiveModule: process.versions.pnp ? `${__dirname}/pnpTs.js` : undefined,
        tsconfig: paths.appTsConfig,
        reportFiles: [
          "../**/src/**/*.{ts,tsx}",
          "**/src/**/*.{ts,tsx}",
          "!**/src/**/__tests__/**",
          "!**/src/**/?(*.)(spec|test).*",
          "!**/src/setupProxy.*",
          "!**/src/setupTests.*"
        ],
        silent: true
      })
  ]
};