@hzab/webpack-config v1.0.2

@hzab/webpack-config

webpack 相关核心配置

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);`,
      },
    },
  );

hash 缓存模式

webpack.config.js

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

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

module.exports = (env) =>
  // 必须调用 mergeConfig，并传入 env
  mergeConfig(
    env,
    // 用户自定义 webpack 配置
    {},
    {
      // 开启 hash 缓存模式
      isHash: true,
      // hash 缓存模式 publicPath 前缀
      hashPublicPath: "https://test.com/aaa/",
    },
  );

config/writeHash.js

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

package.json

  "build": "webpack -c ./config/webpack.config.js --env production & node ./config/writeHash.js",

svg 组件形式

// svg 支持 组件形式导入，导入文件增加 query: icon.svg?svgEle
import SvgIcon from "svg-icon.svg?svgEle";

function Test() {
  return (
    <div>
      <SvgIcon />
    </div>
  );
}

注意事项

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

mergeConfig 参数

option 参数

• 注意，组件模式中 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,
    },
  );

组件开发

文件目录

• example 本地开发测试代码
• src 组件源码

发布

• 注意：该组件无需 build

• 修改版本号

• 命令：npm publish --access public
• 发布目录：
  • src