@ali-i18n-fe/dada-component/libs/webpack/webpack.common.js

dada component

const path = require("path");
const autoprefixer = require("autoprefixer");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { getTsOrTsx } = require("../utils");
const { getDefaultPublicPath } = require("../utils/def");
const VisionConfigPlugin = require("./plugins/vision-config-plugin");

const postCssConfig = {
  loader: require.resolve("postcss-loader"),
  options: {
    ident: "postcss",
    plugins: () => [
      require("postcss-flexbugs-fixes"),
      autoprefixer({
        flexbox: "no-2009",
        remove: false
      })
    ]
  }
};

module.exports = ({ rootPath, publicPath: userSetPublicPath, libraryName }) => {
  const entry = {
    index: getTsOrTsx(path.resolve(rootPath, "./src/index.tsx"))
  };
  const mobilePath = getTsOrTsx(
    path.resolve(rootPath, "./src/index.mobile.tsx")
  );
  !!mobilePath && (entry.mobile = mobilePath);

  const fileLoader = {
    loader: require.resolve("url-loader"),
    options: {
      limit: 1024 * 1024 * 2 // 2mb
    }
  };

  const publicPath = getDefaultPublicPath();

  const output = {
    library: libraryName,
    libraryTarget: "umd",
    libraryExport: "default",
    filename: "[name].js",
    publicPath,
    chunkFilename: "[id].chunk.js",
    path: path.resolve(rootPath, "dist")
  };

  return {
    context: rootPath,
    entry,
    stats: "minimal",
    output,
    plugins: [
      new VisionConfigPlugin(),
      new CleanWebpackPlugin(),
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      })
    ],
    resolve: {
      extensions: [".tsx", ".ts", ".js", ".jsx"],
      alias: {
        "@root": path.resolve(rootPath),
        "@src": path.resolve(rootPath, "./src/"),
        "@utils": path.resolve(rootPath, "./src/utils/"),
        "@constants": path.resolve(rootPath, "./src/constants/"),
        "@interface": path.resolve(rootPath, "./src/interface/"),
        "@components": path.resolve(rootPath, "./src/components/")
      }
    },
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          use: [
            {
              loader: require.resolve("ts-loader"),
              options: {
                happyPackMode: true,
                transpileOnly: true
              }
            }
          ]
        },
        {
          exclude: [path.resolve(__dirname, "../../public")],
          test: /[^(docs)]+\.tsx?$/,
          use: [
            {
              loader: require.resolve("./loader/docs-filepath-loader")
            }
          ]
        },
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: require.resolve("./loader/babel-loader")
            }
          ]
        },
        {
          test: /\.scss$/,
          // exclude: /node_modules/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader
            },
            require.resolve("css-loader"),
            // require.resolve('postcss-loader'),
            postCssConfig,
            {
              loader: require.resolve("sass-loader"),
              options: {
                implementation: require("sass")
              }
            }
          ]
        },
        {
          test: /\.css$/,
          // exclude: /node_modules/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader
            },
            require.resolve("css-loader"),
            postCssConfig
          ]
        },
        {
          test: /\.svg$/,
          loader: fileLoader
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: fileLoader
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: fileLoader
        }
      ]
    },
    externals: {
      react: {
        commonjs: "react",
        commonjs2: "react",
        amd: "React",
        root: "React"
      },
      "react-dom": {
        commonjs: "react-dom",
        commonjs2: "react-dom",
        amd: "ReactDOM",
        root: "ReactDOM"
      }
    }
  };
};