从零开始使用webpack(4.x)+bable+react+ant-design配置单页面应用开发环境（附模板）

前言

学习即进步。本人一直使用vue框架，对于react框架一直是得闻不如一见。在一些简单的网站学习了react框架的基本教程之后，参照本人一直使用的webpack+bable+vue+iview开发环境。对应着想搭建一个基于react的开发环境，借此来对比，看看到底是哪个框架比较好用，效率高。进过分析，比对，我选择了与react最为般配的ant-design作为前端ul框架。即模式确定为webpack+bable+react+ant-design;如果需要偷懒，可以直接下载我的github项目，开包即用。

一 准备工作

先挂一下我的package.json,小白可以先忽略。项目结束之后可以提供参考。注意 我使用的是webpack4.x的版本。与3.x的部分内容可能不兼容。

 "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-import": "^1.11.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "mini-css-extract-plugin": "^0.5.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.0",
    "webpack-merge": "^4.1.0",
    "uglifyjs-webpack-plugin": "^2.1.1"
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "antd": "^3.13.5"
  }

1 建立项目目录

• 新建项目文件夹E:\study\webpack 下面简写为 根目录
• 命令行进入目录，使用npm init指令进行npm的初始化。按照提示依次键入信息，不知道的直接回车。

2 安装webpack

• 不建议全局安装webpack
• 局部安装webpack 根目录>cnpm i webpack --save-dev
• 没有cnpm的话安装一下淘宝镜像，npm install -g cnpm --registry=https://registry.npm.taobao.org
• 这时自动安装完毕。package.json中devDependencies自动添加了对webpack的依赖。

"devDependencies": {
  "webpack": "^4.0.0",
}

说明1: webpack版本只要是4之后都可以。我这里只是演示
说明2: devDependencies是开发依赖，只会在打包过程中用到，不会包含到最后的代码中
说明3: 如果想安装指定版本的webpack，使用npm install --save-dev webpack@<版本号>格式

3 准备项目文件结构

我们的项目需要脚本，html，样式，图片以及一些其他资源。

│   package.json
├───node_modules
│       └╌╌ 下面是npm包
├───build
│   ├╌╌╌╌╌ build.js
│   ├╌╌╌╌╌ webpack.base.conf.js
│   ├╌╌╌╌╌ webpack.dev.conf.js
│   └╌╌╌╌╌ webpack.prod.conf.js
├───src
│   ├╌╌╌╌╌ main.js
│   └╌╌╌╌╌template
│         └╌╌╌╌╌template.html // 首页的模板
│   └╌╌╌╌╌images
│         └╌╌╌╌╌logo.jpg  

对，暂时我们就准备这些。

二 配置webpack的工作

webpack的工作就一个。根据一个入口文件，通过import，require等建立目标文件之间的关联关系，调用对应文件后缀的loader实现按需加载。有关完整的配置，可以参考我的下一篇文章。我们今天讲的，都是基本的配置。

1 基础配置

首先我们配置文件,打开webpack.base.conf.js,填写如下内容。

module.exports = {
    entry: './src/main', //main.js中的.js可以省略，前面的./不能省
}

有些朋友也许会问，build目录下有那么多js。为什么是webpack.base.conf.js。

首先，我们知道开发一个项目。有开发阶段和打包发布阶段，所以webpack的工作配置，也分为dev（开发）阶段配置和prod(发布产品)配置。开发模式与产品模式的webpack配置最主要的区别就是开发时需要一个热更新的服务器。以便于我们写的代码能够保存一次就能看到最新效果。而发布之后就是生成静态html文件，由产品服务器托管了。还有很多其他的区别，在之后我们会一一讲到。但是，大部分的基本配置都是一样的，所以我们分了3个文件，webpack.base.conf.js中是webpack通用的配置组成，例如入口文件，这绝对是通用的部分。然后我们再把区分的配置分别写到webpack.dev.conf.js 和 webpack.prod.conf.js中，再通过webpack-merge去合并配置。

在package.json中配置webpack的调用方式，在script标签栏内填入

  "scripts": {
    "build": "webpack --config ./build/webpack.prod.conf.js",
    "dev": "webpack-dev-server --config ./build/webpack.dev.conf.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

理所当然的，我们现在分成了两个指令：build负责打包生成产品文件，dev负责搭建热更新服务器，实时调试我们的代码。

所以，我们在webpack.dev.conf.js中配webpack-dev-server服务器。

2 配置webpack-dev-server

在这里说明一下，为了保证大家安装的包版本跟我一致，安装依赖包的方式为直接在devDependencies中添加相关的版本，然后再调用cnpm install.

找到package.json添加依赖项

 "webpack-dev-server": "^3.1.0",
 "webpack-cli": "^3.2.3"

注意。webpack-dev-server依赖了"webpack-cli中的相关内容，所以也需要添加依赖。

在根目录下执行cnpm install.

完成之后，在webpack.dev.conf.js中填入如下内容

const path = require('path');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf')
module.exports = merge(baseWebpackConfig, {
    devtool: 'cheap-module-eval-source-map',
    output: {
        filename: './dist/[hash]app.js', // dist文件夹不存在时，会自动创建
        hashDigestLength: 8 // 默认长度是20
    },
    devServer: {
        contentBase: path.join(__dirname, "../dist"), //网站的根目录为 根目录/dist，如果配置不对，会报Cannot GET /错误
        port: 9000, //端口改为9000
        open: true// 自动打开浏览器，适合懒人
    },
})

webpack-merge也是webpack的库，需要单独安装
找到package.json添加依赖项

 "webpack-merge": "^4.1.0"

在根目录下执行cnpm install.

• webpack.dev.conf.js中通过引用webpack.base.conf.js，再通过merge对比，有的继承，没有的覆盖，这样就实现了公用基础配置的方法。
• devtool : cheap-module-eval-source-map, devtool的配置比较复杂。这里你们先这样填，表示我可以在dev模式下F12 定位到原始文件debug我的代码。
• output其实也是webpack基本配置。配置了项目打包生成的文件的存放处。由于我的dev模式和prod模式不一样，所以写在了dev的配置环境下。
• devserver的配置参数我已经注释了。

好了。现阶段用于dev模式的webpack已经配置好了，接下来我们就可以开始编写我们的应用了。

三 使用React开发页面

使用React框架编写页面的方法有两种，第一种是直接在html文件中直接引用react.js和react-dom.js，然后在后续的脚本中使用React带来的能力。

一个普通的html文件便可以做到。

  
    
    
  
  
    
Hello world
    

    
  

但是这并不能很好的发挥react的作用。我们要使用ES6、JSX、UI重用等特性，因此我们将使用下面的第二种方法。

四 使用Webpack、Babel和React开发页面

1 安装react

react是我们项目运行时需要用到的包，所以我们需要在package.json中添加依赖项。react最终会被打包进我们的app.js中，供应用程序运行。安装单页面react运行环境目前需要2个包 react和react-dom。我这里安装的是16.x的react(为了适配之后提到的antd):

//--package.json
"dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  },

然后在根目录cnpm install;

2 生成主入口文件

react安装好了。接下来我们就可以使用它了。在我们上面建立好的src/main.js中填入按照上面的js修改后的如下内容：

//--main.js
import React from 'react';
import ReactDOM from 'react-dom';
var e = React.createElement('p', null, 'This is React');
ReactDOM.render(e, document.getElementById('main'));

这里我们引用了npm包中安装的react和react-dom。仔细一看，

ReactDOM.render(e, document.getElementById('main'));

噢、看来我们至少需要一个html作为父容器，毕竟没有dom，脚本不可能正常运行。

到这里我们发现，react跟Vue一样，需要一个html页面作为最大的容器，所有的内容最后都会被webpack各种loader编译为浏览器可执行的文件，放到html中。

3 生成我们的html

这时候我们就需要webpack的一个插件html-webpack-plugin，来生成html。首先我们需要安装他。这是在项目编译打包阶段需要使用的库，所以我们把他放在devDependencies中。

//--package.json
"devDependencies": {
    "webpack": "^4.0.0",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.0",
    "webpack-merge": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
  }

根目录执行cnpm install.

接下来我们要使用它。这个配置属于通用的基础配置，所以我们继续打开刚才的基础配置文件webpack.base.conf.js,添加如下语句

//--webpack.base.conf.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //先引入
module.exports = {
    entry: './src/main', //main.js中的.js可以省略，前面的./不能省
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

现在服务器也好了这样我们应该就可以跑着看了。我们在根目录执行npm run dev,没错，由于我们对于webpack-dev-server的配置open:true，在执行完毕之后我们就可以看到自动打开了浏览器，访问了我们配置的9000端口。

当然我们发现我们的浏览器一片空白

我们打开F12调试工具，先不管报的那个错误。我们去source栏查看，发现webpack确实已经帮我们根据入口main.js打包好了能运行的html。dist中是我们打包生成的app.js，并且已经根据我们配置在webpack.dev.conf.js中的输出，即加上8位哈希值相匹配。但是这些文件都是在内存中生成的，本地并不能找到。生成的html中在body标签的下方引用了生成的js。

可以点开那个app.js查看一下。发现内部有我们配置在dependencies中的react已经被打包进去了。

但是，我们在main.js中的代码引用了html中的元素。然而这个html是webpack自动生成的。所以我们需要修改html-webpack-plugin的配置，用我们自己的html作为模板。

• 打开webpack.base.conf.js添加对于HtmlWebpackPlugin的配置。关于配置的详解我已经注释。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //第二步导入
module.exports = {
    entry: './src/main', //main.js中的.js可以省略，前面的./不能省
    plugins: [
        new HtmlWebpackPlugin(
            {
                title: 'SEIE5.0', // html5文件中