创建一个空的项目 mkdir init-react 创建 init-react 文件夹 cd init-react 前往 init-react 文件夹 npm init 生成package.json 接下来就可以一步步来创建一个webpack4+react的项目了 生成一个简单的react页面，并且通过webpack4，运行起来 生成index.html文件 安装react react-dom webpack yarn add react react-dom yarn add webpack -D 创建src文件夹，在src文件下创建index.js，这是一个入口文件，并且添加App.js写第一个react componet 接下来，就要使用webpack4打包这个文件了,并且运行起来 首先我们先安装一下，我们接下来要使用的一些依赖 yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react -D 首先webpack需要一个配置文件，我们在主目录下生成一个webpack.config.js 接下来，我们需要创建.babelrc 文件，.babelrc就是babel的配置文件，类似于ESLint(.eslintrc)。 所有文件编写完成后，需要在package.json中，配置一下我们的启动命令 最终在我们的命令行输入 yarn run dev，没有输出错误后，打开浏览器，输入网站http://localhost:8080/就可以看到 i am app view了。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>init-react</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
// src/index.js
import React from "react";
import ReactDom from "react-dom";
import App from "./App"; //引入src/app.js
ReactDom.render(<App /> , document.getElementById("app"))
// src/App.js
import React from 'react'
const App = () => {
return(
<div>
i am app view
</div>
)
}
export default App;
// webpack.config.js
const webpack = require("webpack");
const path = require("path"); // nodejs的模块 path
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 在我们再次打包文件时，需要清除上次留存的文件，需要用到clean-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development", // mode 分为 development production
entry: ["./src/index.js"], // 入口文件
output: {
path: path.join(__dirname, "dist"), // 输入目录
filename: "bundle.js" // 文件名称
},
optimization: {
splitChunks: {
chunks: "all" // 所有的chunks 代码公共的部分 分离出来成为一个独立的文件
}
},
resolve: {
extensions: [".js", ".jsx"] // 自动解析确定的扩展，省去你引入组件写后缀的麻烦
},
module: {
// 编译规则
rules: [
// 也就是以前的loader
{
test: /\.jsx?$/, // 正则表达式，匹配编译的文件
exclude: /node_modules/, // 排除特定条件，如通常会写node_modules，即把某些目录/文件过滤掉
use: [
{
loader: "babel-loader" // loader 必需要有它，它相当于是一个test匹配到的文件对应的解析起，babel-loader、style-loader、sass-loader等等
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(), // clean-webpack-plugin的基本用法
new HtmlWebpackPlugin({
filename: "index.html", // 最终生成的文件名
template: path.join(__dirname, "index.html")
})
],
devServer: {
hot: true, // 热更新
contentBase: path.join(__dirname, "./dist"), // 需要启动的文件名
host: "0.0.0.0", // 可以使用手机访问
port: 8080, // 端口,
historyApiFallback: true, // 该选项的作用所有的404都链接到index.html
proxy: {
// 代码到后端的服务地址，会拦截所有以api开头的请求地址
api: "http://localhost:3000"
}
}
};
// .babelrc
{
"presets": [["@babel/preset-env"], "@babel/preset-react"]
}
// package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js --color --propgress" // 添加这一行
},