webpack4.0各个击破(10)—— Integration篇

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Kevin-ZhangCG

前后端分离原理

  前后端分离已成为互联网项目开发的业界标准使用方式,通过Nginx+Tomcat的方式(也可以中间加一个Node.js)有效的进行解耦,并且前后端分离会为以后...

6.4K50
来自专栏逻辑熊猫带你玩Python

工具篇 | “手把手教你搭建一个全能的学习环境(包括但不限于Python)”

最近有读者问我关于自学使用的开发环境搭建的问题。所以特意在这里发一篇我本人为了学习和个人开发使用的环境。其实之前也讨论过相关的内容,只不过涉及的很浅。

23440
来自专栏杨建荣的学习笔记

海量数据迁移之数据加载流程(r4笔记第88天)

在之前的博文中分享了关于数据抽取流程的一些思路,整体来说,数据的抽取是辅助,数据的加载是关键。加载的过程中每一步需要格外关注,稍有偏差就可能造成数据的损坏或者丢...

36530
来自专栏携程技术中心

RN沙龙 | 携程是如何做React Native优化的

赵辛贵,携程无线开发高级技术经理,目前主要负责React Native框架在携程内部的使用推广和性能优化 React Native(下文简称RN)开源已经一年...

1.1K90
来自专栏Java架构师进阶

java架构师之用Redis轻松实现秒杀系统

曾经被问过好多次怎样实现秒杀系统的问题。昨天又在CSDN架构师微信群被问到了。因此这里把我设想的实现秒杀系统的价格设计分享出来。供大家参考。

1.2K20
来自专栏Petrichor的专栏

Cache之过: 网页或头像 无法 同步更新

前几天帮师姐解决一个 网页 无法 同步更新 的问题时,我推测问题可能处在cache上,后来通过这个思路解决了该问题,于是今天想到把该问题记录下来。

10530
来自专栏kevin-blog

下拉式终端Tilda

无意中发现一款非常好用的下拉式终端,很多人肯定会问,下拉式终端?什么叫下拉式终端?和linux自带的终端有什么区别呢?所以请带着答案看下面的内容

36010
来自专栏编程一生

干货 | 云智慧透视宝Java代码性能监控实现原理

37620
来自专栏前端杂货铺

node服务的监控预警系统架构

需求背景 目前node端的服务逐渐成熟,在不少公司内部也开始承担业务处理或者视图渲染工作。不同于个人开发的简单服务器,企业级的node服务要求更为苛刻: 高稳定...

42870
来自专栏lulianqi

使用浏览器访问或调试微信公众号(跳过微信认证)

因为大部分公众号web应用实际登录都是使用用户微信认证登录,下文主要是提供一种方法使在PC端使用任意浏览器绕过微信认证完成登录,后面就可以在浏览器中使用或调试w...

4.6K30

扫码关注云+社区

领取腾讯云代金券