自己构建 React项目
如果没有 create-react-app，我们应该如何构建项目呢？今天让我们一起通过自己的方式打包 react 项目吧！
第一步创建文件
mkdir react-boiler-plate
cd react-boiler-plate
然后初始化 npm
npm init -y
然后准备一个这样的目录结构
build
public
src
package.json
开始安装依赖了
npm i react react-dom npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D npm i @babel/core @babel/preset-react @babel/preset-env babel-loader style-loader css-loader -D
创建一个 webpack.config.js 的配置文件
const path = require('path')
const HTMLplugin = require('html-webpack-plugin')
module.exports = {
entry: path.join(__dirname, 'src', 'index.js'),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './build')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HTMLplugin({
template: './public/index.html'
})
]
}在 public 里面建模板文件 index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div></div> </body> </html>
在 src 里面建入口文件 index.js
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return <h1>hello world</h1>
}
ReactDOM.render(<App />, document.getElementById('root'))创建 babel 的配置文件.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}在 package.json 里面添加几个运行的脚本
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
}
到此为止项目已经配置完成，运行 npm run start 即可浏览
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论