Webpack 示例项目教程

Webpack 示例项目教程

webpack-by-sample Learn webpack by sample, each of the samples contains a readme.md file that indicates the purpose of the sample plus an step by step guide to reproduce it. 项目地址: https://gitcode.com/gh_mirrors/we/webpack-by-sample

1. 项目目录结构及介绍

webpack-by-sample/
├── __older_versions/
│   ├── version 3/
│   └── version 4/
├── 00 Intro/
│   ├── 00 Boilerplate/
│   ├── 01 Import/
│   └── 02 Server/
├── 01 Styles/
│   ├── 01 Custom CSS/
│   ├── 02 Import Bootstrap/
│   └── 03 SASS/
├── 02 Fx/
│   ├── 00 TypeScript/
│   ├── 01 React/
│   └── 02 Angular/
├── .gitignore
├── LICENSE
├── README.md
└── webpack.config.js

目录结构介绍

• __older_versions/: 包含项目的旧版本，每个版本都有独立的目录。
• 00 Intro/: 介绍基本的Webpack配置和使用，包括初始化项目、导入模块和服务器配置。
• 01 Styles/: 介绍如何处理样式文件，包括自定义CSS、导入Bootstrap和使用SASS。
• 02 Fx/: 介绍如何集成不同的框架和库，包括TypeScript、React和Angular。
• .gitignore: 指定Git忽略的文件和目录。
• LICENSE: 项目的开源许可证。
• README.md: 项目的介绍和使用说明。
• webpack.config.js: Webpack的配置文件。

2. 项目的启动文件介绍

项目的启动文件通常是index.js或main.js，具体取决于项目的结构。在00 Intro/00 Boilerplate目录中，启动文件是index.js。

示例启动文件 (index.js)

// 00 Intro/00 Boilerplate/index.js
console.log('Hello, Webpack!');

这个文件是项目的入口文件，Webpack会从这个文件开始打包整个项目。

3. 项目的配置文件介绍

项目的配置文件是webpack.config.js，它定义了Webpack如何打包项目。

示例配置文件 (webpack.config.js)

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  devServer: {
    contentBase: './dist',
  },
};

配置文件介绍

• entry: 指定Webpack打包的入口文件。
• output: 指定打包后的输出文件名和路径。
• module: 定义不同类型文件的处理规则，例如CSS文件使用style-loader和css-loader。
• devServer: 配置开发服务器，指定服务器根目录。

通过以上配置，Webpack可以正确地打包和运行项目。

webpack-by-sample Learn webpack by sample, each of the samples contains a readme.md file that indicates the purpose of the sample plus an step by step guide to reproduce it. 项目地址: https://gitcode.com/gh_mirrors/we/webpack-by-sample