前言
最近真的都是在瞎学，看到自己不是很明白的东西，都喜欢自己手动去敲1到3遍（晚上下班的时候咯），
瞧，React 基于webpack 搭建，react 官方有一套手脚架工具，我自己也搭建过确实挺好使的，适合初学者学习学习。
但是自己还是想手动来搭建，嗯 于是写一篇不用手脚架搭建的博客，供自己加强记忆，哈哈哈 开始咯
创建项目目录
新建 react-webpack 项目
cd react-webpack
初始化 npm 环境
npm init //一路回车
package.json 文件下 其实就是记录依赖相关的 加载库
{ "name": "react-webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "yf", "license": "ISC" }
依赖安装
npm i react -D
npm i react-dom -D
npm i webpack -D
npm i webpack-cli -D (因为webpak 到 4版本以上 就需要这个 ，不然会报错)
创建目录
创建 src ,build 2个目录
在 src 下创建 webpack 打包入口文件 index.js
在创建webpack 配置文件
const path = require('path') // 引入‘path’，为了在这里使用绝对路径，避免相对路径在不同系统时出现不必要的问题
const publicPath = '/';
module.exports = {
// 应用入口
entry: {
app: path.join(__dirname, '../src/index.js') // index.js作为打包的入口
},
// 输出目录
output: {
filename: '[name].[hash:8].js',//name代表entry对应的名字; hash代表 整个app打包完成后根据内容加上hash。一旦整个文件内容变更，hash就会变化
path: path.join(__dirname, '../dist'), // 打包好之后的输出路径
publicPath: publicPath, //态资源文件引用时的路径
},
}；
修改package.json 下
添加如下代码：
需要引入 babel-loader 来编译 es6
npm i babel-core babel-loader babel-preset-env -D
npm install babel babel-cli -D
npm install babel-preset-react babel-preset-es2015 -D
{ test: /.(js|jsx)$/, //使用loader的目标文件。这里是.js use: { loader: 'babel-loader', options: { presets: ["env", "react"] //['@babel/preset-react'] }, }, exclude: [ path.join(__dirname, '../node_modules') // 由于node_modules都是编译过的文件，这里我们不让babel去处理其下面的js文件 ] },
在项目根目录下创建 babel 的配置文件 .babelrc:
{ "presets": [ ["es2015", {"loose": true}], "react" ] }
执行 npm run build
你的第一个打包就在dist 文件下了
在使用 html-webpack-plugin
webpack 可以根据你的配置生成你想要的文件 html
npm i html-webpack-plugin - D
const HTMLPlugin = require('html-webpack-plugin')
plugins: [
new HTMLPlugin({
filename: 'index.html', //制定的文件，默认
template:'index.html' //制定html生成使用的模板文件
}) // 生成一个html页面，同时在webpack编译的时候。把我们所生成的entry都注入到这个html页面中,路径都是根据我们output配置的来走的。
]
在 你的 index.html ，写这样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"></div> </body> </html>
写第一个 React 应用
import React from 'react'; import ReactDOM from 'react-dom'; export default class HelloReact extends React.Component{ constructor(props) { super(props); } render(){ return( <div>Hello React</div>); } } ReactDOM.render(<HelloReact />, document.getElementById('app'));
development 模式下启动服务器并实时刷新 webpack-dev-server
npm i webpack-dev-server --save-dev
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode development --config build/webpack.config.js"
在index.js 文件下引入
<!DOCTYPE html> <html lang="en"> <head> <title>Hello React</title> </head> <body> <div id="root"></div> <script type="text/javascript" src="./main.e09b122c.js"></script> </body> </html>
然后再编译： npm run build
npm run start
用浏览器打开 //http://localhost:8080，就可以看到 Hello React 出现了