7.工程架构的优化

到这一章节，一个前端项目的工程架构基本已经搭建起来了，但是还有有需要优化的地方。

webpack配置重复

client端和server端的配置有重复的地方，优化的手段就是将两个文件中重复的配置项提取出来，然后利用webpack-merge包去合并配置。

提取公共的配置到webpack.config.base.js文件

const path = require('path')

function resolvePath(filePath) {
  return path.join(__dirname, filePath);
}

module.exports = {
  mode: 'development',
  resolve: {
    extensions: ['.js','.jsx']
  },
  output: {
    path: resolvePath('../dist'),
    publicPath: '/public/'
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /.jsx$/,
        loader: 'eslint-loader',
        exclude: [
          resolvePath('../node_modules')
        ]
      },
      {
        test: /.jsx$/,
        loader: 'babel-loader'
      },
      {
        test: /js$/,
        loader: 'babel-loader',
        exclude: [
          resolvePath('../node_modules')
        ]
      }
    ]
  }
}

在wenpack.config.client和webpack.config.server文件中删除base文件中的配置，

const webpackMerge = require('webpack-merge')

webpackMerge(baseConfig, {/不同的配置/})

服务端的icon

在润兴dev:server时，或有一个favicon.ico的请求，目前我们返回的html文件。可利用serve-favicon工具来解决这个问题。只需要创建一个ico文件，然后在server/server.js文件中增加几行代码即可。

const favicon = require('serve-favicon')

app.use(favicon(path.join(__dirname, '../favicon.ico'))) //

服务端服务自动重启

目前服务端的代码改动后，需要重新启动服务。利用nodemon，可以做到文件改动后，自动重启服务。安装nodemon,在根目录下创建nodemon.json文件

{
  "restartable": "rs",  // 是否可以重启
  "ignore": [  // 忽略文件的变化
    ".git",
    "node_modules/**/node_modules",
    ".eslint",
    "slient",
    "build"
  ],
  "env": {
    "NODE_ENV": "development"  // 开发环境
  },
  "verbose": true,
  "ext": "js"   // js文件
}

更改package.json中的scripts

"dev:server": "nodemon server/server.js",

这样dev:server就可以监听到文件的变化，自动重启了。

本小结改动位于仓库的2-10分支