webpack 搭建React（手动搭建）

前言

最近真的都是在瞎学，看到自己不是很明白的东西，都喜欢自己手动去敲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,  //态资源文件引用时的路径
    },
}；

在使用 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'));

需要引入 babel-loader 来编译 es6

npm i "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env -D

npm i @babel/preset-react -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": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }],
    "@babel/preset-react"
  ]
}

然后再编译：

./node_modules/.bin/webpack --mode=development

congratulations! 成功编译

在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>

用浏览器打开 build/index.html 文件，就可以看到 Hello React 出现了