Bootstrap 5 + Webpack 开源项目教程

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

bootstrap5-webpack-boilerplate/
├── src/
│   ├── babelrc
│   ├── editorconfig
│   ├── eslintrc
│   ├── gitignore
│   ├── LICENSE
│   ├── README.md
│   ├── package.json
│   ├── purgecss.config.js
│   ├── webpack.config.js
├── public/
│   ├── images
│   ├── index.html
├── bin/
├── .env
├── postcss.config.js
├── prettier.config.js

目录结构说明

• src/: 源代码目录，包含所有的开发文件。
  • babelrc: Babel 配置文件。
  • editorconfig: 编辑器配置文件。
  • eslintrc: ESLint 配置文件。
  • gitignore: Git 忽略文件配置。
  • LICENSE: 项目许可证。
  • README.md: 项目说明文档。
  • package.json: 项目依赖和脚本配置。
  • purgecss.config.js: PurgeCSS 配置文件。
  • webpack.config.js: Webpack 配置文件。
• public/: 公共资源目录，包含静态文件和入口 HTML 文件。
  • images: 图片资源。
  • index.html: 项目入口 HTML 文件。
• bin/: 可执行文件目录。
• .env: 环境变量配置文件。
• postcss.config.js: PostCSS 配置文件。
• prettier.config.js: Prettier 配置文件。

2. 项目的启动文件介绍

启动文件

• package.json: 包含了项目的依赖和启动脚本。

{
  "name": "my-project",
  "description": "A description of my new project",
  "author": "Your Name",
  "license": "MIT",
  "scripts": {
    "dev": "webpack serve --config webpack.config.js",
    "build": "webpack --config webpack.config.js",
    "deploy": "npm run build && gh-pages -d dist"
  }
}

启动命令

• 开发模式: npm run dev
  • 启动开发服务器，监听代码变化，支持热重载。
• 构建模式: npm run build
  • 构建生产环境代码。
• 部署模式: npm run deploy
  • 构建并部署到 GitHub Pages。

3. 项目的配置文件介绍

Webpack 配置文件

• webpack.config.js: Webpack 的主要配置文件。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};

Babel 配置文件

• babelrc: Babel 的配置文件。

{
  "presets": ["@babel/preset-env"]
}

ESLint 配置文件

• eslintrc: ESLint 的配置文件。

{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
    "no-console": "off"
  }
}

Prettier 配置文件

• prettier.config.js: Prettier 的配置文件。