共计 1337 个字符，预计需要花费 4 分钟才能阅读完成。
到这一章节，一个前端项目的工程架构基本已经搭建起来了，但是还有有需要优化的地方。
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 分支