webpack 优化

1， webpack的公共逻辑抽取 

build 目录下 新建一个webpack.base.config

代码如下：

const path = require("path");

module.exports={
  //设置 模块
  module:{
    //设置文件 编译的规则。可以 使文件应用插件，或者处理不处理该文件
    rules: [
      // 此配置是js/jsx应用 eslint-loader 的规则 在 处理其他的规则之前(enforce:"pre")，除了 node_module模块；
      {   enforce:"pre",
        test:/.(js|jsx)$/,
        loader: "eslint-loader",
        exclude:[path.resolve(__dirname,"../node_modules")]

      },
      {
        //test 就是你要编译加工的文件后缀名； loader的话就是要加工的编译插件
        test:/.jsx$/,
        loader: 'babel-loader'
      },{
        test:/.js$/,
        loader: 'babel-loader',
        // exclude include 决定是否编译 该模块；
        exclude:[path.join(__dirname,"../node_modules")]
      }]
  }, output:{
    //打包文件的存放路径；
    path:path.join(__dirname,"../dist"),
    //静态资源路径，可以区分是静态资源还是url请求。功能就是加前缀很方便 比如cdn的前缀。
    publicPath:"/public/",
  },

}

安装工具 cnpm  i -D webpack-merge ；专门用来合并 webpack 配置项的；

首先在 webpack client 和server 的config 文件里引入一下代码 

//引入webpack-merge
const webpackMerge=require("webpack-merge");
//引入webpack.base.config.js 公共逻辑
const baseConfig=require("./webpack.base.config.js");

然后client的代码 变成了 

let config=webpackMerge(baseConfig,{
    //入口
    entry:{
        //“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
        app:path.join(__dirname,"../client/app.js")
    },
    //出口
    output:{
        //文件命是变量的话是用【】。这边是加上一个hash值；
        filename:"[name].[hash].js",
    },

    //webpack的插件。 是一个数组,
    plugins:[new HTMLPlugin({
        // 意思就是模版的路径就是template.html，插入js用的
        template:path.join(__dirname,"../client/template.html")
    })]


});

server的代码 变成了

module.exports=webpackMerge(baseConfig,{
    //告诉webpack当前环境是node
    target:"node",
    //入口
    entry:{
        //“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
        app:path.join(__dirname,"../client/server-entry.js")
    },
    //出口
    output:{
        //文件命是变量的话是用【】。这边是加上一个hash值；
        filename:"server-entry.js",
        //设置编译环境规范,当前使用commonjs2的语法；
        libraryTarget: "commonjs2"

    },



});

从而达到精简代码的目的 

2,    fav.ico的丢失 

因为我们在服务端渲染的时候  ，所有的请求 都被 *成了 html模版 ；所以这边我们去处理这个问题 

首先安装工具 cnpm i -S serve-favicon

然后我们去生产一张icon 的图片 挂在到主目录 

//引入处理fav的工具
const fav=require("serve-favicon");


//在请求处理之前就去处理这个图标的地址 和静态资源请求是一样的；
   app.use(fav(path.join(__dirname,"../favicon.ico")),porxy({target:"localhost:8888"}))

3, 使用 nodemon 实现服务端 热加载

首先安装  nodemon  ;  cnpm i -D nodemon 

这个工具  如果不使用 配置文件  是直接就可以 热更新的的 ，

package.json 里的命令行是 

nodemon  “***.js”

使用的话配置文件的话就需要 读一下 各个配置文件的意思了，

下面 说下配置文件 

在主目录下 新建文件 nodemon.json

{
  "restartable":"rs",
  "ignore":[
    ".git","node_modules/**/node_modules",".eslintrc","util","build"
  ],
  "verbose":true,
  "ext":"js",
  "env":{
    "NODE_ENV":"development"
  }
}

"restatrable" :"rs"  如果使用了配置项 那么 就必须这么写这一项 才能使热更新生效 

“ignore” 是指 数组里的文件 更替 不做热加载   

node_module/**/node_module的意思是指 node_module下的所有文件包括node_module 文件 ；build 指build的文件夹 .git 指git配置文件

verbose ：输出详细的信息

ext： 指的是 什么结尾的 文件改动 需要热加载 这里是js

env： 指的 热加载启动的的环境  此处是 node_env:development

然后 在package。json文件 的的 dev:server 命令更改为

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

这样 服务端的代码更替 就不要重启了；