React Webpack Babel 项目教程
1. 项目的目录结构及介绍
react-webpack-babel/
├── dist/
│ ├── bundle.js
│ └── index.html
├── src/
│ ├── index.js
│ └── App.js
├── .babelrc
├── package.json
├── webpack.config.js
└── README.md
dist/
: 打包后的文件目录,包含bundle.js
和index.html
。src/
: 源代码目录,包含index.js
和App.js
。.babelrc
: Babel 配置文件。package.json
: 项目依赖和脚本配置文件。webpack.config.js
: Webpack 配置文件。README.md
: 项目说明文档。
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'));
src/App.js
这是主要的 React 组件,通常包含应用的布局和路由。
import React from 'react';
const App = () => {
return <div>Hello, World!</div>;
};
export default App;
3. 项目的配置文件介绍
.babelrc
Babel 配置文件,用于设置预设和插件。
{
"presets": [
"@babel/preset-env",
["@babel/preset-react", { "runtime": "automatic" }]
]
}
webpack.config.js
Webpack 配置文件,定义了入口、输出、插件和加载器。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
filename: 'bundle.[fullhash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
package.json
项目依赖和脚本配置文件。
{
"name": "react-webpack-babel",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"html-webpack-plugin": "^5.3.2",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}
以上是 React Webpack Babel 项目的详细教程,涵盖了目录结构、启动文件和配置文件的介绍。希望对您有所帮助!