Webpack

搭配玩法

5

查看全部 5 条

Webpack +

Vue + Weex+ easywebpack-weex+ incubator-weex-loader

Weex+Vue项目基于Webpack的一站式构建方案

Webpack负责打包，weex-loader处理.we/Vue单文件，easywebpack-weex封装配置开箱即用

✓ 配置封装开箱即用✓ 官方loader保证兼容 ✕ 绑定Webpack体系✕ 配置定制需懂Webpack

完整方案出处

Webpack +

React + Node 5.3++ npm 3.3++ Ant Design+ webpack-dev-server+ React Router

用配置文件快速生成含菜单/导航/登录的后台界面框架

React负责组件化渲染，Ant Design提供后台UI，React Router管理菜单路由，webpack打包，配置文件驱动

✓ 配置优于代码，快速搭建✓ 界面体验还算看得过去 ✕ 所有后台都长一个样子✕ bundle 1M多首屏慢

完整方案出处

Webpack + Module Federation+ 模块联邦

基于 Webpack 5 Module Federation 实现跨应用模块共享与微前端实践。

ModuleFederationPlugin 是 Webpack 5 内置能力，Vue 项目通过它暴露与消费远程模块，实现应用间共享。

✓ 跨应用共享模块✓ Webpack 5 原生支持 ✕ 生态较新，实践经验少

完整方案出处

Webpack +

babel-preset-jongleberry + ES6 Modules+ Tree Shaking

用 Webpack 2 与 Babel 6 组合实现 ES6 模块 Tree Shaking 摇树优化，去除无用代码。

Babel 负责编译 ES6 代码，Webpack 2 负责打包并基于 ES Module 静态分析剔除死代码。

✓ 有效减小打包体积✓ 面向模块化开发 ✕ 受 Babel 转译影响效果有限