dn-middleware-webpack5/lib/config.js

--- group: middleware name: webpack5 title: Webpack5 ---

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getWebpackConfig = void 0;

var path = _interopRequireWildcard(require("path"));

var _tsconfigPathsWebpackPlugin = _interopRequireDefault(require("tsconfig-paths-webpack-plugin"));

var _getModule = _interopRequireDefault(require("./dev-utils/getModule"));

var _getPlugins = _interopRequireDefault(require("./dev-utils/getPlugins"));

var _utils = require("./dev-utils/utils");

var _getOptimization = _interopRequireDefault(require("./dev-utils/getOptimization"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const moduleFileExtensions = [".js", ".mjs", ".json", ".jsx"]; // Generate webpack entries

const getEntry = options => {
  const webpackEntry = {}; // const hotClientEntry = require.resolve("react-dev-utils/webpackHotDevClient");

  options.entry.forEach(({
    name,
    file
  }) => {
    webpackEntry[name] = [...options.inject, file, ...options.append];

    if (options.hot) {
      webpackEntry[name].unshift(`webpack-hot-middleware/client?reload=true&log=false&name=${name}`); // 热更新添加对应patch
    }
  });
  return webpackEntry;
}; // Generate devtool/sourcemap


const getDevtool = (devtool, ctx) => {
  let formatDevtool;

  switch (devtool) {
    case false:
      formatDevtool = false;
      break;

    case true:
    case undefined:
    default:
      if (typeof devtool === "string") {
        formatDevtool = devtool;
      } else {
        formatDevtool = ctx.isEnvDevelopment ? "eval-cheap-module-source-map" : "cheap-source-map";
      }

      break;
  }

  return formatDevtool;
}; // Generate webpack config


const getWebpackConfig = async (options, ctx) => {
  var _options$folders$scri, _options$folders, _options$folders$scri2, _options$folders2, _options$output;

  // util symbol
  ctx.isEnvDevelopment = options.env === "development";
  ctx.isEnvProduction = options.env === "production";
  const webpackModule = await (0, _getModule.default)(options, ctx);
  const config = {
    // Learn more about the mode configuration and what optimizations take place on each value.
    // https://webpack.js.org/configuration/mode/
    mode: options.env,
    // stop compilation early in production
    bail: ctx.isEnvProduction,
    // https://webpack.js.org/configuration/devtool/#devtool
    devtool: getDevtool(options.devtool, ctx),
    // webpack can compile for multiple environments or targets.
    // to understand what a target is in detail: https://webpack.js.org/concepts/targets/
    target: options.target,
    // web script entry(ies)
    entry: getEntry(options),
    output: {
      // Add /* filename */ comments to generated require()s in the output.
      pathinfo: ctx.isEnvDevelopment,
      // There will be one main bundle, and one file per asynchronous chunk.
      // In development, it does not produce real files.
      filename: path.join((_options$folders$scri = options === null || options === void 0 ? void 0 : (_options$folders = options.folders) === null || _options$folders === void 0 ? void 0 : _options$folders.script) !== null && _options$folders$scri !== void 0 ? _options$folders$scri : "", "[name].js"),
      // There are also additional JS chunk files if you use code splitting.
      chunkFilename: path.join((_options$folders$scri2 = options === null || options === void 0 ? void 0 : (_options$folders2 = options.folders) === null || _options$folders2 === void 0 ? void 0 : _options$folders2.script) !== null && _options$folders$scri2 !== void 0 ? _options$folders$scri2 : "", "[name].[chunkhash:8].chunk.js"),
      // webpack uses `publicPath` to determine where the app is being served from.
      // It requires a trailing slash, or the file assets will get an incorrect path.
      // We inferred the "public path" (such as / or /my-project) from homepage.
      publicPath: (0, _utils.getPublicPath)(ctx),
      // this defaults to 'window', but by setting it to 'this' then
      // module chunks which are built will work in web workers as well.
      globalObject: "this",
      // User output option
      ...options.output,
      // The build folder.
      path: path.resolve(options.cwd, (_options$output = options.output) === null || _options$output === void 0 ? void 0 : _options$output.path)
    },
    module: webpackModule,
    plugins: (0, _getPlugins.default)(options, ctx).filter(Boolean),
    resolve: {
      alias: { // Allows for better profiling with ReactDevTools
        ...(options.profiling && {
          "react-dom$": "react-dom/profiling",
          // This is a package for cooperative scheduling in a browser environment.
          // It is currently used internally by React, but we plan to make it more generic.
          // https://www.npmjs.com/package/scheduler
          "scheduler/tracing": "scheduler/tracing-profiling"
        }),
        ...options.alias
      },
      // Enable resolving symlinks to the original location.
      symlinks: true,
      modules: ["node_modules", path.resolve(ctx.cwd, "./node_modules/"), path.resolve(__dirname, "../node_modules/"), ctx.cwd, path.resolve(__dirname, "../")],
      extensions: moduleFileExtensions.concat(ctx.useTypeScript ? [".ts", ".tsx", ".d.ts"] : []),
      mainFields: ["module", "jsnext:main", "browser", "main"],
      // Use tsconfig.paths as webpack alias
      plugins: [ctx.useTypeScript && new _tsconfigPathsWebpackPlugin.default()].filter(Boolean)
    },
    externals: options.externals,
    // Some libraries import Node modules but don't use them in the browser.
    // Tell webpack to provide empty mocks for them so importing them works.
    // webpack@v5 make some changes, see: https://webpack.js.org/migrate/5/#test-webpack-5-compatibility
    node: {// TODO: node
    },
    // Cache the generated webpack modules and chunks to improve build speed.
    // https://webpack.js.org/configuration/other-options/#cache
    cache: options.cache,
    // These options allows you to control how webpack notifies you
    // of assets and entry points that exceed a specific file limit.
    performance: options.performanceConfig,
    optimization: (0, _getOptimization.default)(options, ctx)
  };
  return config;
};

exports.getWebpackConfig = getWebpackConfig;