webpack4进阶知识点（二）
2019-10-09 本文已影响0人
躺在家里干活
1.eslint
js代码检查工具,帮助发现代码错误规则，保持团队的代码风格统一 ：eslint-config-airbnb
如何执行落地？
和CI/CD系统集成
image
和webpack集成
使用eslint-loader，构建时检查js规范
2.webpack打包基础组件和基础库
library：指定库的全局变量
libraryTarget:支持库的引用方式
webpack.config.js
//正常压缩代码，mode为production的时候默认使用此插件压缩，但是此处mode为none，所以需要手动添加插件
const TerserPlugin=require('terser-webpack-plugin');
module.exports={
entry:{
'large-number':'./src/index.js',
'large-number.min':'./src/index.js'
},
output:{
filename:'[name].js',//包名
library:'largeNumber',//指定库的全局变量
libraryTarget:'umd',//支持该库的引用方式，ES module，CJS，AMD，直接通过 script 引⼊入
libraryExport:'default'//设置为default，这样引用时不需要再加default，否则引用时还需要使用largeNumber.default()
},
mode:'none',
optimization:{
minimize:true,
minimizer:[
// 压缩代码
new TerserPlugin({
include:/\.min\.js$/
})
]
}
package.json入口mian:index.js
//判断引入该包的项目处于生产还是开发环境，不同环境引入不同文件
if(process.env.NODE_ENV==='production'){
module.exports=require('./dist/large-number.min.js')
}else{
module.exports=require('./dist/large-number.js')
}
3.webpack实现SSR打包(本章学的很模糊)
服务端渲染（SSR）是什么
客户端渲染：HTML+CSS+JS+Data -->渲染后的HTML
服务端：
- 所有的模板等资源都存储在服务端
- 内网机器拉取数据更快
- 一个HTML返回所有数据
浏览器和服务器交互流程
image
客户端渲染 vs 服务端渲染
image
SSR 的优势
- 减少白屏时间
- 对于 SEO 友好
SSR 代码实现思路
服务端:
- 使⽤ react-dom/server 的 renderToString 方法将 React 组件渲染成字符串
- 服务端路由返回对应的模板
客户端:
- 打包出针对服务端的组件
image
webpack ssr 打包存在的问题
1.浏览器器的全局变量量 (Node.js 中没有 document, window)
- 组件适配:将不兼容的组件根据打包环境进行适配
- 请求适配:将 fetch 或者 ajax 发送请求的写法改成 isomorphic-fetch 或者 axios
2.样式问题 (Node.js 无法解析 css)
- ⽅案⼀:服务端打包通过 ignore-loader 忽略掉 CSS 的解析
- ⽅案⼆:将 style-loader 替换成 isomorphic-style-loader
3.如何解决样式不显示的问题?
- 使⽤用打包出来的浏览器端 html 为模板
- 设置占位符，动态插入组件
4.⾸首屏数据如何处理?
- 服务端获取数据
- 替换占位符
4.当前构建时的日志显示
展示一⼤堆日志，很多并不需要开发者关注
统计信息 stats
image
如何优化命令⾏的构建日志
使⽤ friendly-errors-webpack-plugin 插件
-
success: 构建成功的⽇志提示 -
warning: 构建警告的日志提示 -
error: 构建报错的日志提示
npm i friendly-errors-webpack-plugin
// 优化构建日志
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
module.exports={
plugins:[
new FriendlyErrorsWebpackPlugin()
],
// 统计信息 stats,仅显示错误信息
stats: 'errors-only',
}
如何判断构建成功
在 CI/CD 的 pipline 或者发布系统需要知道当前构建状态
每次构建完成后输⼊ echo $? 获取错误码
构建异常和中断处理
webpack4 之前的版本构建失败不会抛出错误码 (error code)
Node.js 中的 process.exit 规范
- 0 表示成功完成，回调函数中，err 为 null
- ⾮ 0 表示执行失败，回调函数中，err 不为 null，err.code 就是传给 exit 的数字
如何主动捕获并处理构建错误?
compiler 在每次构建结束后会触发 done 这 个 hook
process.exit 主动处理理构建报错
plugins: [
function() {
this.hooks.done.tap('done', (stats) => {
if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('- -watch') == -1)
{
console.log('build error');
process.exit(1); }
})
}
]
5.webpack 构建配置
构建配置的可选方案
- 通过多个配置文件管理不同环境的构建
{
"dev": "webpack-dev-server --config webpack.dev.js",
"build": "webpack --config webpack.pro.js"
}
- 将所有配置放在同一个文件，通过--env参数控制分支选择
{
"dev": "webpack-dev-server --env development",
"build": "webpack --env production"
}
- 将构建配置设计成一个库，比如:
hjs-webpack、Neutrino、webpack-blocks - 抽成一个工具进行管理，比如:
create-react-app,kyt,nwb
构建配置包设计
- 通过多个配置文件管理不同环境
- 基础配置:webpack.base.js
- 开发环境:webpack.dev.js
- 生产环境:webpack.prod.js
- SSR环境:webpack.ssr.js
- 抽离成一个 npm 包统一管理
- 通过 webpack-merge 组合配置
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
module.exports = merge(baseWebpackConfig,devWebpackConfig);
功能模块设计
image
目录结构设计
- lib 放置源代码
- test 放置测试代码
|- /test
|- /lib
|- webpack.dev.js
|- webpack.prod.js
|- webpack.ssr.js
|- webpack.base.js
|- README.md
|- CHANGELOG.md
|- .eslinrc.js
|- package.json
|- index.js
