/webpack-driven-web

通过 webpack 来驱动 Web 开发

Primary LanguageHTML

webpack-driven-web

wdw: 通过 webpack 来驱动 Web 开发

  • webpack 前端工程化应用
  • 基于 webpack 的多页应用架构

wdw-snapshot

功能

webpack-driven-web 功能演示

  • 基于 webpack@1.x 的前端工程化实践
    • 没有任何魔法, 便于扩展出适合自己的前端工程化方案, 例如单页, react, vue 等
  • 使用 ES2015 来开发
    • 使用 ES2015 模块来写标准的代码
  • 支持多页面的架构
  • 区分开发模式
    • 开发模式下不做压缩
    • 开发模式下不做文件 hash
    • 开发模式下开启 sourcemap
  • 抽离出独立的 CSS 文件
    • 第三方 CSS(vendor.css)
    • 项目公共 CSS(app.css)
    • 页面 CSS(page.css)
  • 提取出公共模块
    • 第三方 JS(vendor.js)
    • 项目功能 JS(app.js)
  • 考虑了前端项目开发过程中的一般问题
    • 图片优化(image-webpack)
    • inline manifest(InlineManifestWebpackPlugin)
    • 生成稳定的模块ID(HashedModuleIdsPlugin)
    • 使用 webpack-dev-server 作为开发时的服务器, 并配置了代理

使用方法

首先 npm install 来安装项目依赖, 然后执行 npm start 启动 webpack-dev-server 来开始开发

其他命令

命令 作用
npm run watch 执行 webpack 构建并处于 watch 模式, 便于脱离 webpack-dev-server 来开发
npm run build 清理构建文件, 重新执行一次构建, 一般用于发布版本的时候
npm run mockserver 启动 puer-mock 作为 mockserver
npm run analyzer 分析项目中的依赖

目录说明

webpack-driven-web/
├── src/                         -- 项目源码
├── dist/                        -- 构建生成(前端部署的目录)
├── config/
|   |── webpack.base.config.js   -- webpack 基础配置
|   |── project-config.js        -- 项目配置和环境配置
|   └── HashedModuleIdsPlugin.js -- 用于生成稳定的模块ID(源自 webpack2)
|── _mockserver.json             -- puer-mock 接口配置文件
|── _apidoc.html
|── _mockserver.js
|── package.json
└── webpack.config.js

常见问题答疑