Webpack-Seed 项目教程

Webpack-Seed 项目教程

webpack-seed Frontend engineering solution based on webpack and gulp. 项目地址: https://gitcode.com/gh_mirrors/web/webpack-seed

1. 项目的目录结构及介绍

Webpack-Seed 是一个基于 Webpack 和 Gulp 的前端工程解决方案模板。以下是项目的目录结构及其介绍：

├── config.rb          # Compass 配置文件
├── gulpfile.js        # Gulp 任务配置文件
├── mock/              # 假数据文件目录
├── package.json       # 项目配置文件
├── README.md          # 项目说明文件
├── server/            # 本地服务器目录
│   ├── app.js         # 本地服务器入口文件
│   ├── home.html      # 列出项目所有入口文件
│   └── routes.js      # 本地路由配置文件
├── src/               # 源码目录
│   ├── a.html         # 入口文件 a
│   ├── b.html         # 入口文件 b
│   ├── c.html         # 入口文件 c
│   ├── css/           # CSS 资源目录
│   ├── img/           # 图片资源目录
│   ├── js/            # JavaScript 资源目录
│   │   ├── a.js       # a 页面入口文件
│   │   ├── b.js       # b 页面入口文件
│   │   ├── c.js       # c 页面入口文件
│   │   ├── components/# 组件目录
│   │   ├── helpers/   # 业务相关的辅助工具目录
│   │   ├── lib/       # 没有存放在 npm 的第三方库或本地基础库目录
│   │   └── utils/     # 业务无关的辅助工具目录
│   ├── scss/          # SCSS 资源目录
│   ├── pathmap.json   # 手动配置某些模块的路径，加快 Webpack 编译速度
│   └── tmpl/          # 模板目录，如果是 React 项目可以删除
├── make-webpack.config.js # Webpack 配置文件
├── webpack.config.js      # 正式环境 Webpack 配置入口文件
└── webpack-dev.config.js  # 开发环境 Webpack 配置入口文件

2. 项目的启动文件介绍

2.1 本地开发环境启动

在本地开发环境中，可以通过以下命令启动开发服务器：

npm run start-dev

2.2 Compass 监听

如果项目中使用了 Compass，可以通过以下命令启动 Compass 监听：

compass watch

2.3 编译项目

通过以下命令可以编译项目：

npm run build

2.4 模拟生产环境

通过以下命令可以模拟生产环境：

npm run start-release

3. 项目的配置文件介绍

3.1 config.rb

这是 Compass 的配置文件，用于配置 Compass 的相关设置。

3.2 gulpfile.js

这是 Gulp 的任务配置文件，定义了项目中使用的各种 Gulp 任务。

3.3 package.json

这是项目的配置文件，包含了项目的依赖、脚本命令等信息。

3.4 webpack.config.js

这是正式环境的 Webpack 配置文件，定义了 Webpack 在正式环境中的配置项。

3.5 webpack-dev.config.js

这是开发环境的 Webpack 配置文件，定义了 Webpack 在开发环境中的配置项。

3.6 make-webpack.config.js

这是 Webpack 的配置文件，包含了 Webpack 的基础配置项。

3.7 pathmap.json

这是一个手动配置文件，用于配置某些模块的路径，以加快 Webpack 的编译速度。

webpack-seed Frontend engineering solution based on webpack and gulp. 项目地址: https://gitcode.com/gh_mirrors/web/webpack-seed