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分支
相关推荐
goodyatou 2020-02-16
xiashulin 2020-02-03
goodyatou 2020-01-29
goodyatou 2013-05-10
Chenliaoyuan 2020-01-19
Caleb0 2019-12-22
道北吴彦祖 2014-01-12
Simagle 2014-05-31
kobemini 2019-11-04
道北吴彦祖 2014-11-11
slytop 2016-11-16
Donven 2019-03-23
万俟飞技术 2018-12-21
Donven 2010-12-30
李大仁 2019-07-01
ccgsteel 2019-06-30
李大仁 2019-06-29