@hzab/webpack-config

webpack 相关核心配置

使用

/**
 * 用户自定义的 webpack 配置文件
 * 注意：必须调用 mergeConfig，并传入 env
 */
const { resolve } = require("path");

const { mergeConfig } = require("@hzab/webpack-config");

module.exports = (env) =>
  // 必须调用 mergeConfig，并传入 env
  mergeConfig(
    env,
    // 用户自定义 webpack 配置
    {
      entry: "./src/index.tsx",
      // module: {
      //   rules: [
      //     {
      //       test: /\.(md)$/i,
      //       type: "asset/resource",
      //       generator: {
      //         filename: "static/[name]_[hash][ext][query]",
      //       },
      //     },
      //   ],
      // },
      resolve: {
        // 别名配置
        alias: {
          "@packages": resolve(__dirname, "./packages"),
          "@": resolve("./example"),
          "@assets": resolve("./example/assets"),
          "@service": resolve("./example/services"),
        },
      },
      devServer: {
        port: 3000,
        // 接口代理
        // https://webpack.docschina.org/configuration/dev-server/#devserverproxy
        proxy: {
          // http://localhost:3000/api -> http://localhost:13000/api
          "/api": "http://localhost:13000",
        },
      },
    },
    {
      // 是否关闭多环境配置，关闭之后请直接使用 public/config/config.js 文件，public-config 下的文件将失效！
      closeMulEnvConf: false,
      // 关闭 mock 接口功能
      closeMock: false,
      // 是否关闭内部样式处理规则，使用自定义规则
      closeStyleRules: false,
      lessLoaderOptions: {
        additionalData: `@import url(@/size.less);`,
      },
    },
  );

注意事项

源码中 resolve 目录是命令执行的目录(项目根目录)
closeMulEnvConf: true 时，请直接使用 public/config/config.js 文件，public-config 下的文件将失效
使用 xxx.module.(css|less) 开启 css module 功能

mergeConfig 参数

属性名称	属性类型	必须	描述
env	Object	是	webpack 环境变量
userConf	Object	否	用户自定义的 webpack 配置
option	Object	否	其他配置

option 参数

| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 | | ----------------- | -------------- | ---- | ------ | ------------------------------------------------------------------------------------------------- | --- | | closeMulEnvConf | boolean | 否 | false | 是否关闭多环境配置，关闭之后请直接使用 public/config/config.js 文件，public-config 下的文件将失效 | | splitCssFile | boolean | 否 | true | 是否拆分 css 文件到 css 文件夹，css/main.xxx.css。默认开启，传 false 关闭 | | | closeMock | boolean | 否 | true | 关闭 mock 接口功能 | | mockPort | number | 否 | 3100 | 自定义 mock 接口端口 | | mockPortAuto | boolean | 否 | | mock 接口端口自增 | | closeStyleRules | boolean | 否 | | 是否关闭内部样式处理规则，使用自定义规则 | | componentsMode | boolean/Object | 否 | | 是否使用组件模式，可配置对应的 entry 地址 localEntry、prodEntry | | | localConf | Object | 否 | | 运行时的 webpack 配置参数 | | | buildConf | Object | 否 | | 编译时的 webpack 配置参数 | | | lessLoaderOptions | Object | 否 | | less loader options 配置参数 | | | processEnv | Object | 否 | | 全局 process.env 参数 | | | filesystem | boolean | 否 | | 是否开启文件缓存 | | | filesystemConf | Object | 否 | | 文件缓存配置 | |

注意，组件模式中 output 需要自行配置类库名称 output: { library: "list-render", } // 类库名称

代理配置

/**
 * 用户自定义的 webpack 配置文件
 * 注意：必须调用 mergeConfig，并传入 env
 */
const { resolve } = require("path");

const { mergeConfig } = require("@hzab/webpack-config");

module.exports = (env) =>
  // 必须调用 mergeConfig，并传入 env
  mergeConfig(
    env,
    // 用户自定义 webpack 配置
    {
      devServer: {
        port: 3000,
        // 接口代理
        // https://webpack.docschina.org/configuration/dev-server/#devserverproxy
        proxy: {
          // http://localhost:3000/api -> http://localhost:13000/api
          "/api": "http://localhost:13000",
        },
      },
    },
    {
      processEnv: {
        TTT_ENV: "TTT",
      },
    },
  );

组件模式

适用于组件模板 webpack config
配置 output: { library: "list_render", }, // 类库名称, 用下划线连接字符
选择组件模式，并配置对应的 entry

/**
 * 用户自定义的 webpack 配置文件
 * 注意：必须调用 mergeConfig，并传入 env
 */
const { resolve } = require("path");

const { mergeConfig } = require("@hzab/webpack-config");

module.exports = (env) =>
  // 必须调用 mergeConfig，并传入 env
  mergeConfig(
    env,
    // 用户自定义 webpack 配置
    {
      // 组件模式自行配置
      output: {
        library: "webpack_config", // 类库名称, 用下划线连接字符
      },
      resolve: {
        // 别名配置
        alias: {
          // TODO: 本地开发测试，按需修改包名
          "@hzab/list-render": resolve(__dirname, "../src"),
        },
      },
      devServer: {
        port: 3000,
      },
    },
    {
      // 选择组件模式，并配置对应的 entry
      componentsMode: {
        localEntry: "./example/index.tsx",
        prodEntry: "./src/index.js",
      },
      // 是否关闭多环境配置，关闭之后请直接使用 public/config/config.js 文件，public-config 下的文件将失效！
      closeMulEnvConf: true,
    },
  );