wpm

# API-webpack

# import-wpm-webpack-plugin

// webpack.config.js
const ImportWpmWebpackPlugin = require("import-wpm-webpack-plugin")
module.exports = {
  plugins: [
    new ImportWpmWebpackPlugin({
      // 区分包环境
      init: {
        env: "online" || "qa"
      },
      alias: {
        "vue": "wpmjs/$/vue"
      },
    })
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
配置项 类型 默认值 作用 使用场景
init object 无 wpmjs.setConfig的配置项
alias object 无 配置别名, 可以无需使用 "wpmjs/$/[包名]" 命名空间, 即可引入wpm包 例如antd会引入"react || vue", 而我们又不应该去改node_modules的代码
singleWarningPattern RegExp /./ 单例检查提示
singleWarningExcludePkgs string[] [] 单例检查排除

注意事项

注意需要在 @pmmmwh/react-refresh-webpack-plugin 插件之后

// webpack.config.js
{
  plugins: [
    new react-refresh-webpack-plugin(),
    new import-wpm-webpack-plugin()
  ]
}
1
2
3
4
5
6
7

# wpm-webpack-plugin

  • 集开发模式，热重载，模块转换，发布为一体的插件
  • 注意：
    • 若开启本地调试功能，或者本地启动wpm包，则webpack.config.js中mode字段必配，且为development
    • 包的输出形式，对应字段webpack.config.js中的output.libraryTarget会被插件修改为system，项目中配置的无效
// webpack.config.js
const wpmWebpackPlugin = require("wpm-webpack-plugin")
module.exports = {
  plugins: [
    new wpmWebpackPlugin(options)
  ]
}
1
2
3
4
5
6
7
配置项 必填 类型 默认值 作用
packageName 是 String 无 包名
autoUpload 否 Boolean false 是否打包完成自动上传至wpm平台

注意事项

注意需要在 @pmmmwh/react-refresh-webpack-plugin 插件之前

// webpack.config.js
{
  plugins: [
    new wpm-webpack-plugin(),
    new react-refresh-webpack-plugin()
  ]
}
1
2
3
4
5
6
7
上传文档
  1. 在项目根目录创建README.md
  2. 安装并增加 copy-webpack-plugin@5 的版本
  3. 打包发布后, 自动更新文档（wpm官网） (opens new window)
  // webpack.config.js
  const CopyPlugin = require("copy-webpack-plugin")
  module.exports = {
    plugins: [
      new CopyPlugin([
        { from: "README.md", to: "" },
      ])
    ]
  }
1
2
3
4
5
6
7
8
9

← API-cli →