静态HTML Webpack Boilerplate 使用教程

静态HTML Webpack Boilerplate 使用教程

static-html-webpack-boilerplate🔮 modern tooling for old-school static webpage development 项目地址:https://gitcode.com/gh_mirrors/st/static-html-webpack-boilerplate

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

static-html-webpack-boilerplate/
├── src/
│   ├── js/
│   ├── scss/
│   └── index.html
├── .eslintrc.js
├── .gitignore
├── .pa11yci
├── .stylelintrc.js
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── postcss.config.js
├── webpack.config.common.js
├── webpack.config.dev.js
└── webpack.config.prod.js

• src/: 源代码目录，包含JavaScript、SCSS和HTML文件。
  • js/: JavaScript文件。
  • scss/: SCSS文件。
  • index.html: 主HTML文件。
• package.json: 项目依赖和脚本配置文件。
• webpack.config.common.js: Webpack通用配置文件。
• webpack.config.dev.js: Webpack开发环境配置文件。
• webpack.config.prod.js: Webpack生产环境配置文件。
• .eslintrc.js: ESLint配置文件。
• .gitignore: Git忽略文件配置。
• .pa11yci: Pa11y配置文件。
• .stylelintrc.js: Stylelint配置文件。
• .travis.yml: Travis CI配置文件。
• CHANGELOG.md: 更新日志。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• postcss.config.js: PostCSS配置文件。

2. 项目的启动文件介绍

• package.json 中的 scripts 部分定义了项目的启动命令：
  • build: 生产环境构建，使用 webpack --config webpack.config.prod.js。
  • lint:js: JavaScript代码检查，使用 eslint src/js/*.js。
  • lint:styles: SCSS代码检查，使用 stylelint "src/**/*.scss"。
  • lint:html: HTML代码检查，使用 pa11y-ci /src/**/*.html。
  • start:dev: 开发环境启动，使用 webpack-dev-server --config webpack.config.dev.js。
  • start: 生产环境启动，使用 webpack --config webpack.config.prod.js && http-server /dist -o。

3. 项目的配置文件介绍

• webpack.config.common.js: 通用Webpack配置，包含入口文件、输出目录、模块解析规则等。
• webpack.config.dev.js: 开发环境Webpack配置，包含开发服务器、热更新等配置。
• webpack.config.prod.js: 生产环境Webpack配置，包含代码压缩、优化等配置。
• postcss.config.js: PostCSS配置，用于处理CSS预处理器。
• .eslintrc.js: ESLint配置，用于JavaScript代码检查。
• .stylelintrc.js: Stylelint配置，用于SCSS代码检查。
• .pa11yci: Pa11y配置，用于HTML代码检查。
• .travis.yml: Travis CI配置，用于持续集成和部署。

以上是静态HTML Webpack Boilerplate项目的目录结构、启动文件和配置文件的详细介绍。希望这份教程能帮助你更好地理解和使用该项目。

static-html-webpack-boilerplate🔮 modern tooling for old-school static webpage development 项目地址:https://gitcode.com/gh_mirrors/st/static-html-webpack-boilerplate