React Webpack Starter 项目教程
1. 项目的目录结构及介绍
react-webpack-starter/
├── src/
│ ├── index.js
│ ├── App.js
│ ├── components/
│ └── styles/
├── public/
│ ├── index.html
│ └── favicon.ico
├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── webpack.config.js
└── yarn.lock
src/
: 包含项目的源代码文件,如index.js
和App.js
,以及组件和样式文件夹。public/
: 包含公共资源文件,如index.html
和favicon.ico
。.babelrc
: Babel 配置文件,用于转译 JavaScript 代码。.gitignore
: 指定 Git 忽略的文件和文件夹。LICENSE
: 项目许可证文件。README.md
: 项目说明文档。package.json
: 项目依赖和脚本配置文件。webpack.config.js
: Webpack 配置文件。yarn.lock
: Yarn 包管理器的锁定文件。
2. 项目的启动文件介绍
项目的启动文件是 src/index.js
。这个文件是整个应用的入口点,负责初始化 React 应用并将其挂载到 DOM 中。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import React from 'react'
: 引入 React 库。import ReactDOM from 'react-dom'
: 引入 ReactDOM 库,用于渲染 React 组件到 DOM 中。import App from './App'
: 引入主应用组件App
。ReactDOM.render(<App />, document.getElementById('root'))
: 将App
组件渲染到 DOM 中的root
元素。
3. 项目的配置文件介绍
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: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html'
})
],
resolve: {
extensions: ['.js', '.jsx']
}
};
entry
: 指定入口文件为src/index.js
。output
: 指定输出目录为dist
,输出文件名为bundle.js
。module.rules
: 定义模块的加载规则,如使用babel-loader
处理js
和jsx
文件,使用style-loader
和css-loader
处理css
文件。plugins
: 使用HtmlWebpackPlugin
自动生成index.html
文件。resolve
: 定义文件扩展名,以便在导入模块时可以省略扩展名。
.babelrc
Babel 配置文件定义了如何转译 JavaScript 代码。
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
presets
: 指定使用的预设,包括@babel/preset-env
用于转译现代 JavaScript 代码,以及@babel/preset-react
用于转译 React 代码。
package.json
package.json
文件定义了项目的依赖和脚本。