从零开始使用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文件便可以做到。

<html>
  <head>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
  </head>
  <body>
    <p>Hello world</p>
    <div id='main'/>
    <script>
      var e = React.createElement('p', null, 'This is React');
      ReactDOM.render(e, document.getElementById('main'));
    </script>
  </body>
</html>

但是这并不能很好的发挥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.getEleme