/miniprogram_webpack

配合webpack 5探索微信小程序工程化

Primary LanguageJavaScript

webpack 5微信小程序工程化

@antv/f2自定义封装使用案例

启动项目

npm run dev

打包项目

npm run build

工程化关键步骤：

  • 指定miniprogramRoot
{
  ...
  "miniprogramRoot":"dist",
  ...
}

注意：若写成'/dist', 模拟器上可以正常运行，但真机调试时会显示'app.json'找不到

  • 开始webpack watch监听

    • 监听文件修改以实现自动重新构建，无需每次运行npx webpack

  • 入口文件自动注入插件

    • 无需每新建一个页面就重新配置一下webpack.config.js文件

由于webpack 5出现的问题

  • splitChunks
TypeError: Cannot read property 'webpackChunk' of undefined
  • SingleEntryPlugin/MultiEntryPlugin
升级到webpack5之后，这两个插件就没了，取而代之的是EntryPlugin，用法如SingleEntryPlugin；MultiEntryPlugin可以用EntryPlugin多次利用代替；

感谢以下文章