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

    },

}；

修改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 出现了