恒生数据 webpack 脚手架

安装

项目局部安装
npm i @hsdata/webpack-config -D / yarn add @hsdata/webpack-config -D
全局安装
npm i @hasdata/webpack-config -g / yarn add @hsdata/webpack-config -g

使用

项目局部使用：
package.json中增加命令行:
{
    "script":{
        "dev": "hsd dev",
        "build": "hsd build"
    }
}
执行: npm run dev /  npm run build


全局使用：
hsd dev / hsd build

使用规范

• 1.项目根目录下包含 public/index.html 文件，会作为 HtmlWebpackPlugin 插件的页面 template 引入
• 2.项目根目录下的 babel.config.js、.babelrc 文件删除，脚手架中已集成相关配置项，再次引入会使用项目中的配置，产生冲突

命令

• hsd dev 开发命令
• hsd build 打包命令
• hsd inspect 输出 webpack 配置项

hsd inspect  控制台输出webpack配置项
hsd inspect -o [fileName] webpack配置项输出为文件，默认输出inspect.webpack.js，可以自定义文件
hsd inspect -o -m webpack.config 输出合并后的配置项
hsd inspect --mode=[dev|pro] 输出dev/pro阶段的配置项，默认dev阶段配置

• hsd move(开发中) 子业务系统打包 dist 目录迁移到主框架

配置项

• -m/--merge 合并个性化配置项

  {
      "script":{
          "dev": "hsd dev -m webpack.config.js",
          "build": "hsd build -m webpack.config.js",
      }
  }

• --extract [true/false] 是否提取 css 到独立的文件

hsd dev --extract=true       // dev模式下默认extract不开启
hsd build --extract=false    // build模式下默认extract开启

• -oss/--ossTosee 打包文件发布到 see 平台(开发中)

脚手架使用错误解决

TypeError: Cannot read properties of undefined (reading 'styles')

vue-loader 升级/降级到 15.10.1

npm i vue-loader@^15.10.1 -D / yarn add vue-loader@^15.10.1 -D

webpack@"^2.0.0 || ^3.0.0 || ^4.0.0" from [email protected]

~~脚手架中依赖的 less-loader 是 5.0.0(项目中大多使用该版本，升级到 6.0.0 会有冲突)，在安装时会提示 less-loader 依赖 webpack4 及其以下版本(项目使用 webpack5)，可以强制安装~~ 脚手架 0.0.26 版本，less-loader 已升级 6.0.0，使用该版本注意项目中 less-loader 的版本处理

npm i @hsdata/webpack-config -f

忽略脚手架中默认配置

在传入的 webpack 配置文件中增加 ignoreDefault 属性，用来指定忽略哪些内容

ignoreDefault:{
        // 忽略默认插件(已支持)
        plugins:['HtmlWebpackPlugin']
}