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

原文地址:http://blog.51cto.com/13869008/2167742

时间: 2024-10-27 17:58:03

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

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

webpack4.0各个击破(5)-- Module篇 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 使用webpack对脚本进行合并是非常方便的,因为webpack实现了对各种不同模块规范的兼容处理,对前端开发者来说,理解这种实现方式比学习如何配置w

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

目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 代码混淆压缩 四. 细说splitChunks技术 4.1 参数说明 4.2 参数配置 4.3 代码分割实例 五. 参考及附件说明 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建

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

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 一. CSS文件基本处理需求 假设项目中的CSS文件均采用预编译语言编写,那么在打包中需要处理的基本问题包括: 预编译语言转换 样式文件挂载方式选择 代码优化(合并及压缩) 去除或保留指定格式的注释 资源定

webpack4.0各个击破(9)—— karma篇

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 一. webpack与自动化测试 webpack对应的关键词是模块化,它的主要任务就是打包和管理模块,所以首先需要明确的概念就是webpack之所以关联自动化测试,是因为它能够为测试脚本提供模块管理的能力,

前端最火工具webpack4.0中级教程

<webpack4.0各个击破系列>适合不满足于只会配置webpack但一时间又看不懂源码的中级读者.我没法保证这个系列是最好的,但至少能保证每一篇博文都跟那些Ctrl+C和Ctrl+V的博文有本质的区别,不信你读读看. 一.webpack是什么 中文版官方网址:www.webpackjs.com webpack是前端最火的打包工具,是大前端自动化工厂的重要组成部分.上面的LOGO已经非常形象地表达了webpack所做的最主要的事情--打包,尽管它为非常多的工具提供了适配接口,但官网仍然推荐将

webpack4.0打包的时候一些技巧

4.0的webpack要比之前的版本强大的不是一点点 打包的时候也做了很多优化 然后说一些这段时间发现的有趣的技巧 1. 打包出来的文件很大,不知道是什么原因可以用 webpack-bundle-analyzer 很牛逼的分析工具,能知道打包出来的文件的都来自于属什么地方,每个有多大 使用方法很简单 1. 引入 2. 放到插件里 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

webpack4.0介绍与使用

---恢复内容开始--- 1:webpack的基本使用: ##在网页中会引用那些静态资源: js, css, images, 字体文件和模板文件(.vue)等 ##网页总引用静态资源多了以后会有那些问题: 网页加载速度慢,因为会发起很多二次请求,script标签,link标签,遇到src都会发起请求,随意一个页面要完整显示出来发送的请求数应该由资源数量决定 处理各种依赖关系 ##解决办法: 合并,压缩,精灵图,图片的base64图片(第一次请求是图片转成base64字符串直接放到页面中,荷叶面一

webpack4.0在项目中的安装配置

webpack4.0在项目中的安装配置 最近在学vue,刚好学到了webpack,因为看的教程比较老,他们用的都是webpck4.0以下的版本,我一步一步跟着教程的步骤来,发现教程里一点问题都没有,到我自己做的时候就遇到了几个坑,趁着还记得比较清楚,把它记下来. 安装webpack 全局安装webpack: 命令行执行: npm i webpack -g 局部安装(项目中安装): 我用的是VSCode,在VSCode的 powershell 终端中直接运行 cnpm i webpack -D 项

记 ——webpack4.0基础配置

才学完webpack4.0,webpack出5.0了,脑壳昏昏!! 1.安装node 2.新建一个文件夹,打开cmd,进入该文件夹使用npm来下载基本依赖配置 npm install init -y 得到package.json文件,存放项目名称,各种依赖,插件等版本号 npm install webpack webpack-cli 下载webpack以及脚手架 得到 node_modules 文件,依赖以及插件等都在这里面 手动创建以下文件 index.html:打包需要的模板 main.js