未完待续。。。。
准备工作,需要的依赖包
// react react-dom
npm install react
// webpack三剑客
npm i --save-dev webpack webpack-dev-server webpack-cli
// 面向babel编程,别忘记html模板
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin
css loader
npm install --save-dev style-loader css-loader
webpack.config.js配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundlefile.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
.babelrc文件配置
{
"presets": [
"@babel/preset-env",
"@babel/react"
]
}
在src文件夹下新建index.js入口文件
在src文件夹下新建html模板文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Send it react</title>
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div id="App"></div>
</body>
</html>
新建一个react入口文件
src/js/components
import React from 'react'
const App = () => {
return(
<div>
<h1>Hello React</h1>
</div>
)
}
export default App;
package.json配置如下,版本不一定要跟我一样
npm run dev/npm run start
"scripts": {
"dev": "webpack-dev-server --mode development --open",
"build": "webpack --mode production --config ./webpack.config.js --progress --color "
},
"devDependencies": {
"@babel/core": "^7.22.6",
"@babel/plugin-transform-runtime": "^7.22.6",
"@babel/preset-env": "^7.22.6",
"@babel/preset-react": "^7.22.5",
"babel-loader": "^9.1.2",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^5.5.3",
"raw-loader": "^2.0.0",
"style-loader": "^0.23.1",
"webpack": "^5.88.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。