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分支