Webpack Simple Starter 项目教程

Webpack Simple Starter 项目教程

webpack-simple-starter A simple webpack starter without framework (Like Vue, React, Angular, etc.) 项目地址: https://gitcode.com/gh_mirrors/we/webpack-simple-starter

1. 项目目录结构及介绍

webpack-simple-starter/
├── build/
│   ├── webpack.config.js
│   └── ...
├── config/
│   ├── dev.js
│   ├── prod.js
│   └── ...
├── src/
│   ├── scripts/
│   │   └── main.js
│   ├── styles/
│   │   └── main.scss
│   └── views/
│       └── index.pug
├── static/
│   ├── images/
│   ├── fonts/
│   └── ...
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
└── package.json

目录结构说明

• build/: 包含 Webpack 的配置文件，用于构建项目。
• config/: 包含开发环境和生产环境的配置文件。
• src/: 项目的主要开发文件，包括 JavaScript、样式文件和 HTML 模板。
  • scripts/: 存放 JavaScript 文件。
  • styles/: 存放样式文件（如 SCSS）。
  • views/: 存放 HTML 模板文件（如 Pug）。
• static/: 存放静态文件，如图片、字体等。
• .babelrc: Babel 配置文件，用于 ES6 编译。
• .eslintrc.js: ESLint 配置文件，用于代码规范检查。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文件。
• package.json: 项目依赖和脚本配置文件。

2. 项目启动文件介绍

启动文件

• src/scripts/main.js: 这是项目的入口 JavaScript 文件。它负责初始化项目并加载其他模块。
• src/styles/main.scss: 这是项目的入口样式文件，负责引入其他样式模块。
• src/views/index.pug: 这是项目的入口 HTML 模板文件，负责渲染页面结构。

启动流程

1. 安装依赖: 使用 npm install 安装项目所需的所有依赖模块。
2. 开发模式启动: 使用 npm run dev 启动开发服务器，支持热重载和实时编译。
3. 生产模式构建: 使用 npm run build 构建生产环境文件，输出到 dist/ 目录。

3. 项目的配置文件介绍

Webpack 配置文件

• build/webpack.config.js: 这是 Webpack 的主要配置文件，定义了如何打包和构建项目。
  • 入口文件: 配置项目的入口文件，如 src/scripts/main.js。
  • 输出文件: 配置打包后的输出路径和文件名。
  • 模块加载器: 配置各种模块加载器，如 Babel、SCSS、Pug 等。
  • 插件: 配置各种 Webpack 插件，如 HTML 插件、清理插件等。

开发和生产环境配置

• config/dev.js: 开发环境的配置文件，定义了开发服务器的端口、热重载等配置。
• config/prod.js: 生产环境的配置文件，定义了生产环境的输出路径、压缩选项等配置。

其他配置文件

• .babelrc: Babel 配置文件，定义了 ES6 编译的规则。
• .eslintrc.js: ESLint 配置文件，定义了代码规范检查的规则。
• package.json: 项目依赖和脚本配置文件，定义了项目的依赖模块和启动脚本。

通过以上配置文件，项目可以灵活地适应不同的开发和生产环境需求。

webpack-simple-starter A simple webpack starter without framework (Like Vue, React, Angular, etc.) 项目地址: https://gitcode.com/gh_mirrors/we/webpack-simple-starter