Webpack Boilerplate 项目教程

Webpack Boilerplate 项目教程

webpack-boilerplateA minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board项目地址:https://gitcode.com/gh_mirrors/webpa/webpack-boilerplate

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

webpack-boilerplate/
├── src/
│   ├── index.js
│   ├── styles/
│   │   ├── main.css
│   ├── assets/
│   │   ├── image.png
├── dist/
├── webpack.config.js
├── package.json
├── README.md

• src/: 源代码目录，包含项目的入口文件和其他资源文件。
  • index.js: 项目的入口 JavaScript 文件。
  • styles/: 存放 CSS 样式文件的目录。
    • main.css: 主要的 CSS 文件。
  • assets/: 存放静态资源文件的目录。
    • image.png: 示例图片文件。
• dist/: 打包后的文件目录，包含最终生成的文件。
• webpack.config.js: Webpack 配置文件。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js。这个文件是 Webpack 打包的入口点，通常会引入其他模块和资源文件，并初始化应用。

// src/index.js
import './styles/main.css';
import './assets/image.png';

console.log('Hello, Webpack!');

3. 项目的配置文件介绍

项目的配置文件是 webpack.config.js。这个文件定义了 Webpack 的打包规则、插件和其他配置项。

// webpack.config.js
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: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

• entry: 指定入口文件路径。
• output: 指定输出文件路径和文件名。
• module: 定义模块的加载规则。
  • rules: 包含多个加载器配置，如 css-loader 和 file-loader。
• plugins: 配置插件，如 HtmlWebpackPlugin，用于生成 HTML 文件。

以上是基于 https://github.com/cvgellhorn/webpack-boilerplate.git 项目的教程，包含了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助！

webpack-boilerplateA minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board项目地址:https://gitcode.com/gh_mirrors/webpa/webpack-boilerplate