webpack进阶篇(二十九):构建异常和中断处理

简介: webpack进阶篇(二十九):构建异常和中断处理

说明

玩转webpack学习笔记


如何判断构建是否成功?


在 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);
            }
        })
    }
]


实列

先把my-project\src\index\index.js里的文件里引入一个不存在的模块,然后运行 npm run build

import { helloWebpck } from './helloWebpack';
import '../../common/index.js';
import '../../common/index/index.js'; // 不存在的模块
document.write(helloWebpck());

aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS84Y2UwNTJkOGU4YjUyMmUwNzNkNjcxOTJjMTgxOWRiYy8wRTlBMzU2QzhBNjE0QjcxQjYxMkMzQ0FFMzBDMjlGMw.png


然后在配置webpack.config.prod.js

module.exports = {
  plugins: [
    new FriendlyErrorsWebpackPlugin(),
    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);
          }
      })
    }
  ].concat(htmlWebpackPlugins),
  stats: 'errors-only'
};


可以看到这里打印的东西已经出来了,状态也变成 1 了。


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS84Y2UwNTJkOGU4YjUyMmUwNzNkNjcxOTJjMTgxOWRiYy9CQjRGNkRBMjM2RkQ0RDVBQjExMEM4NzhFNDQxMzlEQg.png




目录
相关文章
|
24天前
|
缓存 监控
webpack 提高构建速度的方式
【10月更文挑战第23天】需要根据项目的具体情况和需求,综合运用这些方法,不断进行优化和改进,以达到最佳的构建速度和效果。同时,随着项目的发展和变化,还需要持续关注和调整构建速度的相关措施,以适应不断变化的需求。
|
24天前
|
存储 缓存 前端开发
利用 Webpack 5 的持久化缓存来提高构建效率
【10月更文挑战第23天】利用 Webpack 5 的持久化缓存是提高构建效率的有效手段。通过合理的配置和管理,我们可以充分发挥缓存的优势,为项目的构建和开发带来更大的便利和效率提升。你可以根据项目的实际情况,结合以上步骤和方法,进一步优化和完善利用持久化缓存的策略,以达到最佳的构建效果。同时,不断探索和实践新的方法和技术,以适应不断变化的前端开发环境和需求。
|
5月前
|
缓存 JavaScript 前端开发
探讨如何通过一系列优化策略来提升TypeScript与Webpack的构建性能。
【6月更文挑战第11天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。通过这些方法,可以提升构建速度,提高开发效率。
79 0
|
3月前
|
前端开发 JavaScript C++
【绝技大公开】Webpack VS Rollup:一场前端工程化领域的巅峰对决,谁能笑到最后?——揭秘两大构建神器背后的秘密与奇迹!
【8月更文挑战第12天】随着前端技术的发展,模块化与自动化构建成为标准实践。Webpack与Rollup作为主流构建工具,各具特色。Webpack是一款全能型打包器,能处理多种静态资源,配置灵活,适合复杂项目;Rollup专注于ES6模块打包,利用Tree Shaking技术减少冗余,生成更精简的代码。Rollup构建速度快,配置简洁,而Webpack则拥有更丰富的插件生态系统。选择合适的工具需根据项目需求和个人偏好决定。两者都能有效提升前端工程化水平,助力高质量应用开发。
41 1
|
3月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
49 0
|
5月前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
63 3
|
6月前
|
缓存 JavaScript 前端开发
【TypeScript技术专栏】TypeScript与Webpack构建优化
【4月更文挑战第30天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(关闭不必要的类型检查,适配目标环境)和webpack.config.js(配置entry、output、resolve,使用压缩插件)。启用Webpack缓存和增量构建,利用代码拆分与懒加载,能有效提升构建速度和开发效率。
89 0
|
6月前
|
缓存 前端开发 JavaScript
|
6月前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
48 0
|
6月前
|
JavaScript 前端开发 Windows
《Webpack5 核心原理与应用实践》学习笔记-> 构建Electron
《Webpack5 核心原理与应用实践》学习笔记-> 构建Electron
85 1
下一篇
无影云桌面