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就可以监听到文件的变化，自动重启了。

来自：https://segmentfault.com/a/1190000018769334

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/2732