从零搭一个极简版webpack+React工程（一）

序言

React 工程是前端经常使用的，通常使用 create-react-app 可以直接创建一个 React 项目，create-react-app 很全，很完整而且是有团队维护，React 开发者的首选。向社区开发者致敬，感谢他们的努力。本文是自己学习 webpack 产物，作者会使用 create-react-app 直接创建一个 React 项目，同时也想亲手创建一个 webpack+react 工程,一个极简版的 React 工程。个人学习文档仅供参考。如有不只欢迎评论区点评交流

文件地址

GitHub 地址

为什么放链接？

因为 webpack 社区很活跃，webpack+react 构建需要的各种依赖版本迭代非常快。或者现在作者在电脑上可以运行，但是看到这篇文章的你按照文中操作就会出现一些问题。如果在 GitHub 中下载文件无法运行，清忽略本文。

初始化

使用node版本v16.14.1

新建 study-webpack 文件夹，注意是文件夹;在 study-webpack 打开终端，执行下面的命令

npm init -y
复制代码

study-webpack 会自动创建一个 package.json 文件；

安装 webpack

既然是 webpack+react 肯定是需要安装 webpack 依赖；终端执行

npm i webpack webpack-cli -D
复制代码

新建一些文件

config 文件夹存放 webpack 配置文件
- webpack.common.js，用于 webpack 公共配置
- webpack.prod.js，用于 webpack 打包配置
- webpack.dev.js，用于 webpack 开发环境配置
src 文件夹存放 js、react 文件
- index.js

具体如图所示

初期 webpack 配置

先配置 webpack.common.js

const path = require("path")
module.exports = {
  entry: {
    index: path.join(__dirname, "../src/index.js"),
  },
  output: {
    filename: "[name].[hash:4].js",
    path: path.join(__dirname, "../dist"),
  },
}
复制代码

后配置 webpack.prod.js

const { merge } = require("webpack-merge")
const common = require("./webpack.common.js")

module.exports = merge(common, {
  mode: "production",
})
复制代码

因为在 webpack.prod.js 使用 webpack-merge，所以咱们需要安装一下 webpack-merge 依赖包。

webpack-merge：用于合并两个 webpack 配置想详细了解 webpack-merge 请点击我

安装 webpack-merge

npm i webpack-merge -D
复制代码

简单吧，很简单的；

entry 核心入口，
output 核心出口；这两个是 webpack 的入口与出口；路径可以使用 node 中 path 模块
mode 定义 webpack 的模式，可以是 production development

webpack 用于打包

使用前先安装一个依赖 cross-env

cross-env:跨平台设置和使用环境变量的脚本;详情请跳转 cross-env

安装 cross-env

npm i cross-env -D
复制代码

执行 webpack.prod.js

找到 package.json 文件，找到 scripts 添加 build

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"
  },
复制代码

build：这句代码的意思是，设置环境变量为 production 使用 webpack 并让 webpack 按照配置文件 config 文件夹中 webpack.prod.js 配置运行。

第一次执行 webpack

在根目录终端执行

npm run build
复制代码

当看到下图的时候，webpack 已经运行并将 src/index.js 的 js 打包到 dist 文件夹下

打包已经可以，如何在开发环境中使用呢？如何看到页面呢？

webpack 用于开发

需要的依赖包

webpack-dev-server 用于启动 webpack 服务
html-webpack-plugin 用于将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用

npm i html-webpack-plugin webpack-dev-server -D
复制代码

修改 webpack.common.js

引入 html-webpack-plugin
配置 html-webpack-plugin 需要的文件地址和文件名具体代码如下：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
  entry: {
    // doing
  },
  output: {
    // doing
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "../tempate.html"),
      filename: "index.html",
    }),
  ],
}
复制代码

因为在 webpack.common.js 文件中使用了 tempate.html，所以需要在根目录新建 tempate.html 文件；文件内容如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
复制代码

当前整个项目目录结构如下图所示：

修改 webpack.dev.js

引入 webpack 公共配置，webpack.common.js
定义环境 mode 为 development（开发环境）
定义 devServer 启动 webpack 服务的地址、端口

具体代码如下

const { merge } = require("webpack-merge")
const common = require("./webpack.common.js")
module.exports = merge(common, {
  mode: "development",
  devServer: {
    host: "localhost",
    port: "8888",
  },
})
复制代码

修改 package.json 文件中 scripts,新增 start 命令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js",
    "start": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.dev.js"
  },
复制代码

start 代码的意思是：设置环境变量为 development 使用 webpack-dev-server 并让 webpack-dev-server 按照配置文件 config 文件夹中 webpack.dev.js 配置运行。

修改 src/index.js

console.log("webpack")
const root = document.getElementById("root")
root.textContent = "webpack2"
复制代码

启动

根目录终端执行

npm start

复制代码

浏览器打开 http://localhost:8888/ 地址如果看到下图，你的 webpack 已启动成功

结语

第一阶段已经完成，通过一系列操作已经可以使用 webpack 搭建一个简单的服务器；修改 js 是已经可以在 webpack 中实时生效。本阶段到此结束。感谢各位读者。作者水平有限，过程描述如有不足欢迎评论区点评讨论