创建一个空的项目
mkdir init-react 创建 init-react 文件夹
cd init-react 前往 init-react 文件夹
npm init 生成package.json
接下来就可以一步步来创建一个webpack4+react的项目了
生成一个简单的react页面，并且通过webpack4，运行起来
生成index.html文件
init-react
安装react react-dom webpack
yarn add react react-dom
yarn add webpack -D
创建src文件夹，在src文件下创建index.js，这是一个入口文件，并且添加App.js写第一个react componet
// src/index.js import React from "react"; import ReactDom from "react-dom"; import App from "./App"; //引入src/app.js ReactDom.render( , document.getElementById("app")) // src/App.js import React from 'react' const App = () => { return(
i am app view
) } export default App;接下来，就要使用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
// 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 文件，.babelrc就是babel的配置文件，类似于ESLint(.eslintrc)。
// .babelrc { "presets": [["@babel/preset-env"], "@babel/preset-react"] }
所有文件编写完成后，需要在package.json中，配置一下我们的启动命令
// package.json "scripts": { "test": "echo "Error: no test specified" && exit 1", "dev": "webpack-dev-server --config webpack.config.js --color --propgress" // 添加这一行 },
最终在我们的命令行输入 yarn run dev，没有输出错误后，打开浏览器，输入网站http://localhost:8080/就可以看到 i am app view了。