webpack.config.js

var path = require("path");
// var webpack = require("webpack");

module.exports = {
  entry: "./src/core/index.ts",
  target: "web",
  node: {
    fs: "empty",
  },
  mode: "production",
  output: {
    path: path.resolve(__dirname, "build"),
    libraryTarget: "commonjs2",
    filename: "index.js",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json", ".scss", ".css"],
    alias: {
      react: path.resolve("./node_modules/react"),
      "react-dom": path.resolve("./node_modules/react-dom"),
    },
  },
  module: {
    rules: [
      {
        // Include ts, tsx, js, and jsx files.
        test: /\.(ts|js)x?$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: "ts-loader",
            options: {
              configFile: path.resolve(__dirname, "tsconfig.prod.json"),
            },
          },
        ],
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: "10000",
            },
          },
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          { loader: "style-loader" },
          // Translates CSS into CommonJS
          {
            loader: "css-loader",
            // options: {
            //   modules: {
            //     compileType: "module",
            //     mode: "local",
            //     auto: true,
            //     exportGlobals: true,
            //     localIdentName: "[path][name]__[local]--[hash:base64:5]",
            //     localIdentContext: path.resolve(__dirname, "src"),
            //     localIdentHashPrefix: "[sha1:hash:hex:4]",
            //     namedExport: true,
            //     exportLocalsConvention: "camelCase",
            //     exportOnlyLocals: false,
            //   },
            // },
          },
          // Compiles Sass to CSS
          { loader: "sass-loader" },
        ],
        include: /\.module\.scss$/,
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            // options: {
            //   modules: {
            //     compileType: "module",
            //     mode: "local",
            //     auto: true,
            //     exportGlobals: true,
            //     localIdentName: "[path][name]__[local]--[hash:base64:5]",
            //     localIdentContext: path.resolve(__dirname, "src"),
            //     localIdentHashPrefix: "my-custom-hash",
            //     namedExport: true,
            //     exportLocalsConvention: "camelCase",
            //     exportOnlyLocals: false,
            //   },
            // },
          },
        ],
      },
    ],
  },
  externals: [
    {
      react: {
        root: "React",
        commonjs2: "react",
        commonjs: "react",
        amd: "react",
      },
      "react-dom": {
        root: "ReactDOM",
        commonjs2: "react-dom",
        commonjs: "react-dom",
        amd: "react-dom",
      },
    },
    /^@material-ui\/.+$/,
  ],
};