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",
这样 服务端的代码更替 就不要重启了;