搭建完美的React开发生产测试环境二

如果看了此文你还不是很清楚很多细节的问题，可以戳我的 Demo 希望对你有所帮助

前言

上一篇阐述了从零到能进行 React开发的基本流程，如果你已经很熟了，请继续往下看，如果你对基础结构还不是很了解的话，可以先看看第一篇 戳这里

本篇继续上文，说说如何搭建一个自动打包，无需每次修改代码重新打包，热重载的环境。

说的不准确，或者有错误，多多指教，多多指教，多多指教！！！！

express 服务器

express 是什么？基于Node.js平台，快速、开放、极简的 web 开发框架。我们需要一个能够自动更新代码的环境，不可能一直访问静态的index.html页面，所以需要我们的程序能够运行在服务器上，所以这时就用上了express，它能帮助我们快速搭建一个轻量的web服务器。

安装依赖

这一步我们应该还是很熟了，根目录下运行下面的命令。

$ npm install express --save-dev

创建服务启动文件

为了以后长远打算，我们不直接在根目录下创建服务入口文件，把构建文件都单独存放在build目录下，创建build目录并在目录下创建dev-server.js，我们一起来看看用express开启一个node.js环境是多么简单。

var express = require('express')

// 实例化express
var app = express()
// 监听端口
var port = 3030

// 所有请求
app.get('*',function (req,res) {
  res.sendFile(path.join(__dirname,'../index.html'))
})

// 监听3030端口，开启服务
app.listen(port,function (err) {
  if (err) {
    console.error(err)
  } else {
    console.info('Listening on port %s',port)
  }
})

此时我们在根目录下运行node build/dev-server.js就能启动node.js服务，同时我们在浏览器中访问http://localhost:3030/就能访问index.html，但是其实这个时候我们并不能看到上一篇结束时那样的Hello World!，这是因为我们并不能像之前那样访问到dist/bundle.js，怎么做呢，看后面。

修改 webpack 配置文件

在output选项中加入publicPath指定服务端静态资源路径。

// 出口
  output: {
    // 出口文件目录
    path: path.resolve(__dirname,'dist'),// 出口文件名
    filename: 'bundle.js',// 服务端资源路径
    publicPath: 'http://localhost:3030/dist/'
  },

改到这一步，访问http://localhost:3030/的时候就可以看到正常的Hello World!页面了，但是吧，好像还是要缺点什么，不能热重载....引入下一个问题。

热重载的服务器

要想页面能够热重载，实时的进行组件更新，还需要用的两个webpack插件，webpack-dev-middleware和webpack-hot-middleware。

安装依赖

我们依然还是首先安装这两个插件:

$ npm install webpack-dev-middleware webpack-hot-middleware --save-dev

• webpack-dev-middleware (它是组织webpack使其成为express的中间件)
• webpack-hot-middleware (与webpack-dev-middleware合用定制一个热重载的webpack开发服务器)

修改 dev-server.js 文件

在express中引入中间件还是比较简单的，本篇最终版dev-server.js如下：

var path = require('path')
var express = require('express')
var webpack = require('webpack')
var webpackConfig = require('../webpack.config.js')

// 实例化express
var app = express()
// 监听端口
var port = 3030

// 加载webpack配置
var compiler = webpack(webpackConfig)

// 加载中间件webpack-dev-middleware
// 1. 监听资源变更，自动打包 2. 快速编译，资源走内存，不读硬盘 3.返回中间件
app.use(require('webpack-dev-middleware')(compiler,{
  // 不打印多余信息
  noInfo: true,// 监听目录
  publicPath: webpackConfig.output.publicPath,// 控制台打包彩色 
  stats: {
    colors: true
  }
}))

// 加载中间件webpack-hot-middleware
// 热加载，实时更新改变
app.use(require('webpack-hot-middleware')(compiler))

// 所有请求
app.get('*',port)
  }
})

修改 webpack.config.js 文件

光在dev-server.js中引入两个中间件还不能达到想要的效果，还须在webpack.config.js中指明插件，在module之后加入plugins选项。

// 插件
  plugins: [
    // 启用热更新
    new webpack.HotModuleReplacementPlugin(),// 允许错误不打断程序
    new webpack.NoEmitOnErrorsPlugin()
  ]

走到这里，已经可以实现热重载的功能了。

重整 webpack 配置文件

为了以后更好的管理，我把webpack.config.js文件放到build目录下，改用ES6书写，同时分离webpack.config.js文件为两个文件webpack.base.conf.js和webpack.dev.conf.js。

安装依赖

要做到上述说的这些，还需两个个插件。

$ npm install babel-cli webpack-merge --save-dev

• babel-cli (使用babel命令)
• webpack-merge (合并webpack配置文件)

创建 webpack.base.conf.js

预设以后的生产环境的webpack配置文件，抽离开发、生产环境的公共配置。

import path from 'path'

export default {
  // 入口
  entry: {
    app: './src/main.js'
  },// 出口
  output: {
    // 服务器静态资源目录
    publicPath: 'http://loaclhost:3030/dist',// 出口文件目录
    path: path.resolve(__dirname,// 出口文件名
    filename: 'bundle.js'
  },// 模块
  module: {
    rules: [
      {
        // 匹配所有的 .js .jsx 文件
        test: /(\.js|\.jsx)$/,// 忽略 node_modules 目录
        exclude: /node_modules/,use: {
          // 使用的loader
          loader: 'babel-loader',// babel-loader 的选项
          options: {
            // 预设规则
            presets: ['es2015','react']
          }
        }
      }
    ]
  }
}

创建 webpack.dev.conf.js

我们将之前开发环境用到的插件抽离到这个文件下。

import webpack from 'webpack'
import merge from 'webpack-merge'
import baseWebpackConfig from './webpack.base.conf'

export default merge(baseWebpackConfig,{
  plugins: [
    new webpack.HotModuleReplacementPlugin(),new webpack.NoEmitOnErrorsPlugin()
  ]
})

统一风格

既然我们都已经改用ES6书写webpack配置文件了，在服务器文件dev-server.js还是使用的ES5，我们现在将这个文件也改为ES6的写法。

import path from 'path'
import express from 'express'
import webpack from 'webpack'
import webpackConfig from './webpack.dev.conf.js'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'

// 实例化express
const app = express()
// 监听端口
const port = 3030

// 加载webpack配置
const compiler = webpack(webpackConfig)

// 加载中间件webpack-dev-middleware
// 1. 监听资源变更，自动打包 2. 快速编译，资源走内存，不读硬盘 3.返回中间件
app.use(webpackDevMiddleware(compiler,// 控制台打包彩色 
  stats: {
    colors: true
  }
}))

// 加载中间件webpack-hot-middleware
// 热加载，实时更新改变
app.use(webpackHotMiddleware(compiler))

// 所有请求
app.get('*',function (err) {
  if (err) {
    console.error(err)
  } else {
    console.info(`Listening on port ${port} !`)
  }
})

好了，到这里不管是热重载的服务器搭建，webpack配置文件分离，改用ES6的语法书写都已经完工了，但是如果我们依然在命令行使用node build/dev-server.js并不能运行起来，因为node.js环境并没有完全的支持ES6的语法，所以我们用到了另一个命令babel-node build/dev-server.js以babel先转换在启动node.js服务器。

本篇结尾

到这里算是给我们的基本环境加了不少有用的配置了，但是还是不够，我们还想更懒一点，不想点开浏览器，不想输入一长串的url，不想写一大堆的../../../等等等，所以，远远没有结束，我们继续一步一步的来，请听下回分解。