7.工程架构的优化

时间 2019-11-10

原文原文链接

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

webpack配置重复

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

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

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文件中的配置，webpack

const webpackMerge = require('webpack-merge')

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

服务端的icon

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

const favicon = require('serve-favicon')

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

服务端服务自动重启

目前服务端的代码改动后，须要从新启动服务。利用nodemon，能够作到文件改动后，自动重启服务。安装nodemon,在根目录下建立nodemon.json文件github

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

更改package.json中的scriptsweb

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

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

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