dm-web-react/webpack.config.js

The DM web client with React.

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const env = require("./env.json");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");

process.env.NODE_ENV === process.env.NODE_ENV || "development"; // development | production
process.env.BUILD_ENV === process.env.BUILD_ENV || "prd"; // dev | qa | prd
const isDev = process.env.NODE_ENV === "development" ? true : false;

console.log(`========= LOG ENV ======== `);
console.log("socketIoUrl: ", env[process.env.BUILD_ENV].socketIoUrl);
console.log("apiUrl: ", env[process.env.BUILD_ENV].apiUrl);
console.log("hostUrl: ", env[process.env.BUILD_ENV].hostUrl);
console.log("publicPath: ", env[process.env.BUILD_ENV].publicPath);
const entry = {};
const plugins = [];

entry.main = ["./src/index.tsx"];
entry.preloadingEntry = "./src/preloading.tsx";
plugins.push(
  new webpack.DefinePlugin({
    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    VERSION: JSON.stringify(env[process.env.BUILD_ENV].version),
    SOCKET_IO_URL: JSON.stringify(env[process.env.BUILD_ENV].socketIoUrl),
    API_URL: JSON.stringify(env[process.env.BUILD_ENV].apiUrl),
    HOST_URL: JSON.stringify(env[process.env.BUILD_ENV].hostUrl),
  })
);
plugins.push(
  new HtmlWebpackPlugin({
    filename: "index.html",
    template: "./src/index.html",
    excludeAssets: [/\w+Worker.\w+.js/],
    excludeChunks: ["preloadingEntry"],
  })
);
plugins.push(
  new HtmlWebpackPlugin({
    filename: "preloading.html",
    template: "./src/preloading.html",
    excludeAssets: [/\w+Worker.\w+.js/],

    chunks: ["preloadingEntry"],
    // favicon: "./src/favicon.ico",
  })
);
plugins.push(
  new CopyWebpackPlugin([
    {
      from: "src/i18n",
      to: "i18n",
    },
  ])
);
if (process.env.analyze) {
  plugins.push(
    new BundleAnalyzerPlugin({
      analyzerMode: "server",
      analyzerHost: "127.0.0.1",
      analyzerPort: 8889,
      reportFilename: "report.html",
      defaultSizes: "parsed",
      openAnalyzer: true,
      generateStatsFile: false,
      statsFilename: "stats.json",
      statsOptions: null,
      logLevel: "info",
    })
  );
}

const config = {
  mode: process.env.NODE_ENV,
  target: "web",
  context: __dirname,
  entry: entry,
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-[hash].js",
    chunkFilename: "[name]-[chunkhash].js",
    globalObject: "this",
    publicPath: env[process.env.BUILD_ENV].publicPath,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loaders: ["babel-loader?cacheDirectory=true", "awesome-typescript-loader"],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        loaders: ["style-loader", "css-loader"],
      },
      {
        test: /\WebWorker\.js$/, //以.worker.js结尾的文件将被worker-loader加载
        use: {
          loader: "worker-loader",
        },
      },
      {
        test: /\SharedWorker\.js$/, //以.worker.js结尾的文件将被worker-loader加载
        use: {
          loader: "shared-worker-loader",
        },
      },
    ],
  },
  externals: {
    echarts: "echarts",
    lodash: "_",
    react: "React",
    "react-dom": "ReactDOM",
    moment: "moment",
    jquery: "jQuery",
    immutable: "Immutable",
  },
  resolve: {
    extensions: [".js", ".ts", ".tsx"],
  },
  plugins: plugins,
  // optimization: {
  //   splitChunks: {
  //     cacheGroups: {
  //       vendors: {
  //         test: /[\\/]node_modules[\\/]/,
  //         name: "vendors",
  //         enforce: true,
  //         chunks: "all",
  //       },
  //     },
  //   },
  //   runtimeChunk: {
  //     name: "manifest",
  //   },
  // },
  devServer: {
    contentBase: path.resolve(__dirname, "src"),
    historyApiFallback: true,
    disableHostCheck: true,
    proxy: {
      "/api": {
        target: "http://localhost:3000",
      },
    },
    port: 8000,
    hot: true,
  },
};

if (!isDev) {
  console.log("use UglifyJSPlugin==================================");
  compressOption = {};
  if (process.env.BUILD_ENV === "prd") {
    console.log("remove console.log");
    compressOption.pure_funcs = ["console.log"];
    compressOption.drop_debugger = true;
  }

  config.optimization = {
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {
          compress: compressOption,
        },
      }),
    ],
  };
}

if (isDev) {
  entry.main.unshift("webpack-dev-server/client?http://localhost:8000/");
  plugins.push(new webpack.HotModuleReplacementPlugin());
  config.output.filename = "[name].js";
  config.output.chunkFilename = "[name].js";
  config.devtool = "source-map";
}

module.exports = config;