Negatory. Postpone Mission.
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

wieldy-webpack

1.0.6 • Public • Published

wieldy-webpack

NPM version changelog license

易于使用的 webpack

将通用的 webpack 配置做为一个模块封装起来

  • 封装繁琐的配置信息
  • 提供通用功能
  • 统一维护管理
  • 方便升级

为什么要易于使用?

  • webpack 需要的配置项太多了
    • 并不是每个人都需要深入去了解
    • 通常只要知道如何配置入口就可以了
  • 每个项目都存在着一些通用的 webpack 配置
    • babel-loader
    • css-loader
    • 等等
  • 每个项目都在一遍又一遍地复制着 webpack 的配置文件
    • 脚手架工程
    • webpack.base.conf.js
    • webpack.dev.conf.js
    • webpack.prod.conf.js
    • webpack.test.conf.js
  • 如果需要添加通用配置, 难道每个项目去修改一遍?
    • 为了优化性能, 统一添加一个 image-webpack-loader 怎么样?

怎样才能易于使用?

  • 简而言之: 重复的逻辑就需要封装
  • 但绝不过度封装, 增加学习成本
  • 仅封装配置, 完整的返回 webpack 的配置, 可以理解为返回了一份默认的 webpack 配置信息
  • 可以对返回的 webpack 配置再做扩展以适用不同的项目, 例如支持 vue/react

内置功能

  • 优选的默认配置
  • 多环境构建
  • mock server(扩展了 webpack dev server)
  • 随机端口启动开发服务器(webpack dev server)
  • 组件化构建, 方便提取和使用组件, 不用关心组件依赖的资源和样式
  • 支持多入口配置
  • 支持根据同一份源码, 生成多份不同的输出结果
    • 通过动态配置在 HTML 页面/JS 文件中注入参数来实现
  • 支持上传构建后的静态资源到 CDN(ftp)

使用方法

使用示例

常见问题

其他实践

install

npm i wieldy-webpack

Downloadsweekly downloads

7

version

1.0.6

license

MIT

repository

githubgithub

last publish

collaborators

  • avatar