Webpack3 环境配置篇 | React + Webpack3 后台管理项目搭建（1）

原创

已于 2023-02-28 12:56:16 修改 · 置顶 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#React #webpack #前端构建 #webpack3 #package.json

于 2018-09-21 15:12:13 首次发布

本文详细介绍React+React-router4+Webpack3+less+Antd单页面应用搭建流程，涵盖npm包版本、项目结构、webpack配置及React应用配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React + Webpack3 后台管理项目搭建（1）| webpack3 配置篇

最近的前端开发实践中，接触最多就是React后台管理的开发项目，多次对公司React项目配置进行优化升级，下面介绍的是基本的React + React-router4 + Webpack3 + less + Antd单页面应用程序的项目搭建方法。

React + Webpack3 后台管理项目搭建（1）| webpack3 配置篇

（2）“watch-dev”- 前端开发专用编译方法：

（3）“watch-min”- 产品级编译方法（仅供参考）：

五、Eslint代码检测及修复工具配置

六、React 及 react-router-dom4 应用配置

一、主要npm包的版本号

{
    "react": "^15.3.1"
    "react-dom": "^15.3.1",
    "react-router-dom": "^4.2.2"
    "antd": "^2.5.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.7.1"
}

二、项目结构介绍

>static   
    >app                         `业务代码文件夹`
        >components              `木偶组件`
           >Tooltip.jsx          `Tooltip文字提示组件，可复用`
        ----------------------------------------------------------------------
        >containers              `智能组件(主要页面)`
           >index                `首页文件夹`
              >index.jsx         `首页`
              >subpage           `首页专有组件文件夹`
              >style             `首页专有样式`
        ----------------------------------------------------------------------
        >templateHtml       `html模板文件，webpack打包后以此模版为原型生成新的html`
        >images             `图片`  
        >plugins            `插件`
        >router             `路由配置`
        >styles             `公共样式`
        >index.js           `入口文件index.js`
        >login.js           `入口文件login.js`
    --------------------------------------------------------------------------       
    >built                 `打包后自动生成的built文件夹，无需手动创建` 
        >branch            `存放按需加载的组件` 
        >css               `样式`
        >fonts             `fonts`
        >img               `img`
        >index.bundle.js   `index文件`
        >login.bundle.js   `login文件`
        >vendor.bundle.js  `第三方依赖` 
    --------------------------------------------------------------------------    
    >html            `打包后自动生成的html文件夹，修改html请在app/templateHtml文件中修改`
        >index.html  `自动生成的html，自动引入built中的文件，可加载带hash值的文件`
        >login.html  `自动生成的html，自动引入built中的文件，可加载带hash值的文件`
    --------------------------------------------------------------------------
    >node_modules
    --------------------------------------------------------------------------
    >.babelrc                 `babel配置文件`
    >.eslintrc.js             `eslint配置文件`
    >build.bat                `自定义build打包命令的批处理文件` 
    >cnpm.bat                 `cnpm批处理文件` 
    >package.json             `package.json配置文件`
    >postcss.config.js        `postcss配置文件` 
    >watch-dev.bat            `自定义watch-dev打包命令的批处理文件`
    >watch-min.bat            `自定义watch-min打包命令的批处理文件`
    >webpack.dev.config.js    `watch-dev打包命令所对应webpack配置文件`
    >webpack.min.config.js    `watch-min打包命令所对应webpack配置文件`
    >webpack.pro.config.js    `watch-build打包命令所对应webpack配置文件`

三、package.json配置

（1）基本环境配置

首先确保你的电脑已经安装了NodeJS，NodeJS官网可以提供下载。

然后在项目文件路径下，运行指令 npm init ，初始化项目：

npm init

运行 npm init 之后会要求回答一些基本问题，然后会在当前目录下自动生成一个基本的 package.json 文件。

Webpack 安装（指定版本：webpack@3.10.1）：

cmd工具中，输入命令：

npm install webpack@3.10.0 --save-dev

（2）淘宝 NPM 镜像：

使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具可以代替默认的 npm

在项目根文件目录下创建一个 cnpm.bat 批处理文件，加入以下内容：

npm --registry=https://registry.npm.taobao.org --cache=%USERPROFILE%/.npm/.cache/cnpm --disturl=https://npm.taobao.org/dist --userconfig=%USERPROFILE%/.cnpmrc %*

现在可以使用 cnpm 代替 npm 命令了，当网络不通畅时，这个中间镜像可以帮助程序猿保持持续的战斗力哦。

如使用cnpm 安装 webpack：

cnpm install webpack@3.10.0 --save-dev

（2）配置webpack打包命令：

在本项目中定义了三种 webpack打包命令，分别是"build"、"watch-dev"、"watch-min"，所对应的webpack配置文件分别是webpack.dev.config.js、webpack.dev.config.js、webpack.min.config.js。

在 package.json同级目录下创建这三个webapck的config空文件，然后在package.json的 scripts 中将打包命令与webpack的config文件绑定：

"scripts":{
    "build": "set NODE_ENV=production && webpack --config ./webpack.pro.config.js --progress --colors",
    "watch-dev": "set NODE_ENV=dev && webpack --config ./webpack.dev.config.js --progress --colors --watch",
    "watch-min": "set NODE_ENV=production && webpack --config ./webpack.min.config.js --progress --colors --watch"
  }

上述代码中 " set NODE_ENV = dev "设置环境变量为开发环境；"set NODE_ENV = production"设置环境变量为生产环境；添加"--watch"可设置为实时编译，在此为"watch-dev”和"watch-min"命令设置实时编译；

配置webpack打包命令的批处理文件：

为了更加方便使用命令，建议为每个打包命令配置一个.bat（批处理文件）。可以更加简短的使用命令

build 命令，在package.json同级目录下，创建 build.bat文件，并写入：

cnpm run build

此时，我们就可以直接使用cmd工具，输入build 即可打包项目了。

同理，配置watch-dev.bat文件：

cnpm run watch-dev

watch.min.bat文件：

cnpm run watch-min

package.json代码展示：

{
  "name": "ReactDemo",
  "version": "1.0.0",
  "description": "React + React-router4 + Webpack3 + less + Antd",
  "main": "index.js",
  "scripts": {
    "build": "set NODE_ENV=production && webpack --config ./webpack.pro.config.js --progress --colors",
    "watch-dev": "set NODE_ENV=dev && webpack --config ./webpack.dev.config.js --progress --colors --watch",
    "watch-min": "set NODE_ENV=production && webpack --config ./webpack.min.config.js --progress --colors --watch",
  },
  "repository": {
    "type": "svn",
    "url": "https://me.youkuaiyun.com/m0_37128507"
  },
  "author": "ChiWen",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.10.0"
  },
  "dependencies": {
  }  
}

四、Webpack3配置方法介绍

本项目使用的 webpack 是 3.10.0 版本，同时配置了三种打包方式，第一种"build"：生成经过压缩且带哈希值的文件，非常适用于产品发布；第二种“watch-dev”：代码没有压缩，没有哈希值，优点是实时编译，反应灵敏，适用于前端开发；第三种“watch-min”：代码经过压缩，实时编译，但文件名没有哈希值，缺点是编译速度慢，仅供参考使用。