webpack 搭建React（手动搭建）

  • Z时代
  • 2024-01-10
  • 分类：综合

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,  //态资源文件引用时的路径
    },
}；

修改package.json 下

    添加如下代码：

    "build": "webpack --mode production"

需要引入 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 出现了

以上是 webpack 搭建React（手动搭建） 的全部内容， 来源链接： utcz.com/z/381141.html

回到顶部