设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 7|回复: 0

[未分类] webpack4.0各个击破(10)—— Integration篇

[复制链接]
发表于 2018-9-11 10:00:24 | 显示全部楼层 |阅读模式
  1. webpack
复制代码
作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习
  1. webpack
复制代码
工具中相应的处理办法。(本篇中的参数配置及使用方式均基于
  1. webpack4.0版本
复制代码



一. Integration
下文摘自
  1. webpack
复制代码
中文网:
首先我们要消除一个常见的误解,
  1. webpack
复制代码
是一个模块打包工具(module bundler),它不是一个任务执行工具,任务执行器是用来自动化处理开发中常见任务的,例如检查(lint),构建(build),测试(test)等。相对于打包器,任务执行器所面对的逻辑问题更为上层,你可以使用上层的工具来管理整个持续集成(CI),而把打包的部分交给
  1. webpack
复制代码
  1. webpack
复制代码
在工具链中的角色定位是非常清晰的,那么为了与其他流程进行合作,就需要使用任务管理工具来启动
  1. webpack
复制代码
,本文介绍两种常见的方法。
1. 使用Node-API
  1. webpak
复制代码
暴露了一些方法,使得开发者可以通过调用他们而在脚本中启动
  1. webpack
复制代码
,使用的方法较为简单:
  1. //webpack-node.js
  2. const webpack = require('webpack');
  3. const webpackConfig = require('./webpack.config.html.js');
  4. const cowsay = require('cowsay');
  5. const compiler = webpack(webpackConfig);
  6. compiler.run((err, stats)= >{ if (!err) { console.log(stats.toJson().assets); console.log(cowsay.say({text:'Congratulations!'})); }
  7. });
复制代码
运行结果:

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

2.使用gulp
  1. gulp
复制代码
是基于流的任务管理工具,实际上
  1. webpack
复制代码
的细分功能使用
  1. gulp
复制代码
也可以做到,而且很多功能型插件都会提供针对
  1. grunt
复制代码
,
  1. gulp
复制代码
  1. webpack
复制代码
等不同工具的集成方式。
  1. gulp
复制代码
的确更适合做宏观意义上的任务流管理,还是那句老话,工具是提供便利的,而不是提供束缚的。官方文档也提供了如下代码示例:
  1. //gulpfile.js
  2. var gulp = require('gulp');
  3. var webpack = require('webpack-stream');
  4. gulp.task('default',function(){ return gulp.src('src/entry.js') .pipe(webpack({ //...configs })).pipe(gulp.dest('dist/'));
  5. })
复制代码
二. after webpack
至此,
  1. webpack
复制代码
已经被集成进了自动化工具链,开发者可以按自己的需求来定制构建以后需要执行的任务,但
  1. webpack
复制代码
的使命还没有结束,构建的结束距离用户能够访问站点和使用功能还需要非常多的工作要做,有很多问题并不是在构建中出现的,但是却需要在构建时加以处理,这个时候开发者又需要回过头来为
  1. webpack
复制代码
增加配置。
例如很多开发者最初不理解构建过程中为什么要使用
  1. hash
复制代码
,
  1. chunkhash
复制代码
等占位符来把文件名变得丑陋无比,直到不同版本的产品上线时出现不强制刷新页面就无法访问新资源的问题时,才会开始关注版本更新和缓存策略的问题,然后才会理解为了标记版本而启用
  1. hash
复制代码
,为了避免重复构建而使用
  1. chunkhash
复制代码
,为了减小体积而使用
  1. tree-shaking
复制代码
等等。
三. 商务吹捧走一波
  1. webpack
复制代码
4.0各个击破》全系列文章就连载结束了,感谢您的关注,希望对你有所帮助,你也可以通过以下方式查看我的其他博文。
博客园地址:https://www.cnblogs.com/dashnowords



上一篇:2018年8月中级前端开发推荐书籍
下一篇:浅谈history对象以及路由插件原理
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-9-19 01:27

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表