webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本

一. Integration

下文摘自webpack中文网:

首先我们要消除一个常见的误解,webpack是一个模块打包工具(module bundler),它不是一个任务执行工具,任务执行器是用来自动化处理开发中常见任务的,例如检查(lint),构建(build),测试(test)等。相对于打包器,任务执行器所面对的逻辑问题更为上层,你可以使用上层的工具来管理整个持续集成(CI),而把打包的部分交给webpack

webpack在工具链中的角色定位是非常清晰的,那么为了与其他流程进行合作,就需要使用任务管理工具来启动webpack,本文介绍两种常见的方法。

1. 使用Node-API

webpak暴露了一些方法,使得开发者可以通过调用他们而在脚本中启动webpack,使用的方法较为简单:

//webpack-node.js
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.html.js');
const cowsay = require('cowsay'); const compiler = webpack(webpackConfig); compiler.run((err, stats)=>{
if (!err) {
console.log(stats.toJson().assets);
console.log(cowsay.say({text:'Congratulations!'}));
} });

运行结果:

这里解释一下上面代码的基本逻辑,引入了webpack模块以及webpack.config.html.js的配置文件(从这里就很容易理解为什么webpack的配置文件可以导出为一个函数或多个配置,它实际上也是作为一个模块参与到整个运行过程的),通过调用webpack([Object config])方法得到一个compiler实例,调用compiler.run方法就启动了webpack的构建功能,run方法的回调函数中如果有运行错误,可以通过err来获取,与构建过程有关的信息都挂载在stats对象(例如stats。toJson().assets)。这样便实现了以非命令行的方式启动webpack

2.使用gulp

gulp是基于流的任务管理工具,实际上webpack的细分功能使用gulp也可以做到,而且很多功能型插件都会提供针对grunt,gulpwebpack等不同工具的集成方式。gulp的确更适合做宏观意义上的任务流管理,还是那句老话,工具是提供便利的,而不是提供束缚的。官方文档也提供了如下代码示例:

//gulpfile.js
var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default',function(){
return gulp.src('src/entry.js')
.pipe(webpack({
//...configs
})).pipe(gulp.dest('dist/'));
})

二. after webpack

至此,webpack已经被集成进了自动化工具链,开发者可以按自己的需求来定制构建以后需要执行的任务,但webpack的使命还没有结束,构建的结束距离用户能够访问站点和使用功能还需要非常多的工作要做,有很多问题并不是在构建中出现的,但是却需要在构建时加以处理,这个时候开发者又需要回过头来为webpack增加配置。

例如很多开发者最初不理解构建过程中为什么要使用hash,chunkhash等占位符来把文件名变得丑陋无比,直到不同版本的产品上线时出现不强制刷新页面就无法访问新资源的问题时,才会开始关注版本更新和缓存策略的问题,然后才会理解为了标记版本而启用hash,为了避免重复构建而使用chunkhash,为了减小体积而使用tree-shaking等等。

三. 商务吹捧走一波

webpack4.0各个击破》全系列文章就连载结束了,感谢您的关注,希望对你有所帮助,你也可以通过以下方式查看我的其他博文。

博客园地址:https://www.cnblogs.com/dashnowords

webpack4.0各个击破(10)—— Integration篇的更多相关文章

  1. Webpack4.0各个击破(10)integration篇

    一. Integration 下文摘自webpack中文网: 首先我们要消除一个常见的误解,webpack是一个模块打包工具(module bundler),它不是一个任务执行工具,任务执行器是用来自 ...

  2. webpack4.0各个击破(5)—— Module篇

    webpack4.0各个击破(5)-- Module篇 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决 ...

  3. webpack4.0各个击破(7)—— plugin篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  4. Webpack4.0各个击破(8)tapable篇

    目录 一. tapable概述 二. tapable-0.2源码解析 2.1 代码结构 2.2 事件监听方法 2.3 事件触发方法 三. tapable1.0概述 一. tapable概述 tapab ...

  5. Webpack4.0各个击破(7)plugin篇

    目录 一. plugin概述 1.1 Plugin的作用 1.2 Compiler 1.3 Compilation 二. 如何写一个plugin 四. 实战 [参考] 一. plugin概述 1.1 ...

  6. Webpack4.0各个击破(6)loader篇

    目录 一. loader综述 二. 如何写一个loader 三. loader的编译器本质 [参考] 一. loader综述 loader是webpack的核心概念之一,它的基本工作流是将一个文件以字 ...

  7. Webpack4.0各个击破(5)module篇

    一. 模块化乱炖 脚本合并是基于模块化规范的,javascript模块化是一个非常混乱的话题,各种[*MD]规范乱飞还要外加一堆[*.js]的规范实现.现代化前端项目多基于框架进行开发,较为流行的框架 ...

  8. Webpack4.0各个击破(1)html篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  9. webpack4.0各个击破(4)—— Javascript & splitChunk

    目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 ...

随机推荐

  1. WinccFlexible 同一个项目创建多个connections

    在一个WinccFlexible 项目中,可以创建多个通讯连接,以满足不同的接口要求. 但是需要在控制面板上 Set PG/PC Interface中添加新的连接,并绑定对应的网卡即可.

  2. Android第三次作业

    制作音乐播放器 实现的功能: 歌曲的播放.暂停.停止.上一首.下一首.歌单列表的显示(获取本地歌曲). 成品图: 功能代码实现: 实现歌曲的播放.暂停.停止.上一首.下一首: public void ...

  3. GameFreamWork框架----事件系统的应用

    事件系统用途广泛,对处理玩家数据有很大帮助(玩家金币,经验,等级),让数据多次调用,降低耦合 在unity中应用(以玩家金币发生变化来演示); 1).注册监听 2).移出监听 3).金币发生变化的时候 ...

  4. Linux入门总结——虚拟机安装配置以及vim简单操作

    安装配置ubuntu 安装准备 vittualbox-5.2.22版本(win10) ubuntu-12.04 安装VirtualBox 1.双击VirtualBox-5.2.2-119230-Win ...

  5. PTA第四次作业

    题目 7-1 计算职工工资 1.设计思路 (1)第一步:观察题意了解各个参数与所需函数在题目中的意义: 第二步:设计算法编写函数,让函数的功能实现题目中所需的功能: 第三步:运行程序检测是否错误. ( ...

  6. 企业IT管理员IE11升级指南【11】—— 通过SCCM 2012和WSUS部署Internet Explorer 11

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  7. 【RL-TCPnet网络教程】第22章 RL-TCPnet之网络协议IP

    第22章      RL-TCPnet之网络协议IP 本章节为大家讲解IP(Internet Protocol,网络协议),通过前面章节对TCP和UDP的学习,需要大家对IP也有个基础的认识. (本章 ...

  8. 深入理解Spring Redis的使用 (四)、RedisTemplate执行Redis脚本

    对于Redis脚本使用过的同学都知道,这个主要是为了防止竞态条件而用的.因为脚本是顺序执行的.(不用担心效率问题)比如我在工作用,用来设置考试最高分. 如果还没有用过的话,先去看Redis脚本的介绍, ...

  9. 深入理解Spring Redis的使用 (三)、使用RedisTemplate的操作类访问Redis

    上一篇说了RedisTemplate对注解事务的支持,以及提供的序列化器. 事务需要开启enableTransactionSupport,然后使用@transactional注解,里面直接通过回调的c ...

  10. 爱奇艺技术分享:爱奇艺Android客户端启动速度优化实践总结

    本文由爱奇艺技术团队原创分享,原题<爱奇艺Android客户端启动优化与分析>. 1.引言 互联网领域里有个八秒定律,如果网页打开时间超过8秒,便会有超过70%的用户放弃等待,对Andro ...