使用webpack手动构建react项目
安装开发依赖包和相关依赖包
// package.json 文件下的相关配置
{
"devDependencies": {
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"style-loader": "^2.0.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.10",
"@babel/preset-env": "^7.12.10",
"@babel/preset-react": "^7.12.10",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
webpack： 模块打包工具.
webpack-cli ： webpack脚手架
webpack-dev-server：webpack官网出的一个小型express服务器，主要特性是支持热加载。
npm install webpack webpack-cli webpack-dev-server --save-dev
react: 安装react
react-dom：安装React Dom,这个包是用来处理virtual DOM（虚拟dom）
npm install react react-dom --save
@babel/core：babel 核心包，编译器，提供转换的API。
@babel/preset-react：Babel可以转换JSX语法
@babel/plugin-proposal-class-properties：解析类的属性
@babel/plugin-proposal-decorators：解析装饰器
@babel/plugin-transform-runtime：将 helper 和 polyfill 都改为从一个统一的地方引入，并且引入的对象和全局变量是完全隔离的，可以提高代码重用性，缩小编译后的代码体积
@babel/preset-env：对es2015, es2016. es2017的支持
npm install @babel/core @babel/preset-react @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/plugin-proposal-decorators --save--dev
css-loader,style-loader: 加载css
html-webpack-plugin: 所有的 bundle 会自动添加到 html 中
npm install css-loader style-loader html-webpack-plugin --save-dev
配置webpack.config.js
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //生成html文件
const MinCssExtractPlugin = require("mini-css-extract-plugin"); //将css抽离成单独的文件
module.exports = {
entry: {
app: "./src/index.tsx",
vendor: [
"react",
"react-dom",
"immutable",
"redux",
"react-redux",
"react-router-dom",
],
},
output: {
filename: "js/[name].bundle.js",
path: resolve(__dirname, "dist"),
},
plugins: [
new HtmlWebpackPlugin({
template: "public/index.html",
filename: "index.html",
inject: true,
}),
new MinCssExtractPlugin({
filename: "css/[name].css",
}),
],
module: {
rules: [
{
test: /\.(ts|tsx|js)?$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /(?<!\.d)\.tsx?$/,
exclude: /node_modules/,
use: ["ts-loader"],
},
{
test: /\.less$/,
exclude: /node_modules/,
use: [MinCssExtractPlugin.loader, "css-loader", "less-loader"],
},
],
},
devServer: {
contentBase: resolve(__dirname, "../public"),
port: 8888,
},
resolve: {
alias: {
"@": resolve(__dirname, "./src"),
},
extensions: [".tsx", ".ts", ".jsx", ".js"],
},
};
编写babelrc 文件
{
"presets": ["@babel/preset-react", "@babel/preset-env"],
"plugins": [
[
"@babel/plugin-proposal-class-properties", //编译类
{
"loose": true //将编译类属性以使用赋值表达式而不是Object.defineProperty
}
],
["@babel/plugin-transform-runtime"]
]
}
构建React目录结构
react 项目目录结构
// App.js
import React from "react";
class App extends React.Component {
constructor() {
super()
}
render() {
return (
<div id="app">
<h1>TEST-PROJECT</h1>
</div>
)
}
}
export default App;
//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App"
ReactDOM.render(
<App/>,
document.getElementById("root")
)
<!-- 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>test-project</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
在package.json 文件配置start命令并启动
"start": "webpack-dev-server --open"
执行 npm run start
