关注
分享
本专栏讲解了webpack的相关技术，主要是从0开始搭建一个完整项目的webpack配置。总体分为基础配置、高级配置、优化、原理和手写重要配置这些方面。
2024路在何方
某行业全球top1企业的前端主管
展开
-
29、tapable(5)——SyncLoopHook
SyncLoopHookSyncLoopHook,同步遇到某个不返回undefined的监听函数，就重复执行SyncLoopHook的使用let {SyncLoopHook} = require('tapable');//SyncLoopHook,同步遇到某个不返回undefined的监听函数，就重复执行class Lesson{ constructor(){ this.ind...原创 2019-02-12 18:14:04 · 635 阅读 · 1 评论 -
28、tapable(4)——SyncWaterfallHook
SyncWaterfallHookSyncWaterfallHook,同步瀑布钩子，上一个监听函数的返回值会传递给下一个监听函数SyncWaterfallHook的使用let {SyncWaterfallHook} = require('tapable');//SyncWaterfallHook,同步瀑布钩子，上一个监听函数的返回值会传递给下一个监听函数class Lesson{ ...原创 2019-02-12 18:12:44 · 695 阅读 · 0 评论 -
27、tapable(3)——SyncBailHook
SyncBailHookSyncBailHook同步熔断保险钩子,即return一个非undefined的值，则不再继续执行后面的监听函数SyncBailHook使用let {SyncBailHook} = require('tapable');//SyncBailHook同步熔断保险钩子,即return一个非undefined的值，则不再继续执行后面的监听函数class Lesso...原创 2019-02-12 18:10:58 · 1033 阅读 · 0 评论 -
26、tapable(2)——SyncHook
SyncHook这是同步钩子，能够同步执行注册的监听函数SyncHook使用let {SyncHook} = require('tapable');class Lesson { constructor(){ this.hooks = { arch: new SyncHook(['name']) } } tap(){//注册监听函数 this.hooks.arc...原创 2019-02-12 18:09:56 · 770 阅读 · 0 评论 -
25、tapable(1)——介绍
晚上写原创 2019-02-12 18:08:58 · 458 阅读 · 0 评论 -
24、webpack优化(9)——热更新
热更新所谓的热更新指的是对数据变化的局部进行更新，而不进行页面刷新。热更新配置在devServer中开启hot配置为true添加两个webpack的内置插件，分别为new webpack.NamedModulesPlugin()和new webpack.HotModuleReplacementPlugin(),前者用于打印更新的模块路径，告诉我们哪个模块热更新了；后者是热更新插件。...原创 2019-02-12 15:05:12 · 575 阅读 · 0 评论 -
23、webpack优化(8)——懒加载(动态加载)
懒加载在这里的懒加载，其实就是按需加载（动态加载）。需要对webpack进行相关配置。懒加载案例案例情景：当我点击按钮的时候，需要动态去加载resource.js，并读取该文件导出的内容//index.js/*在页面上有一个按钮，点击按钮去加载资源resource.js*/let button = document.createElement('button');bu...原创 2019-02-12 15:02:43 · 2782 阅读 · 0 评论 -
22、webpack优化(7)——抽取公共代码
抽取公共代码多页应用一般会重复多次使用部分公共代码，这样每次加载单页的时候，就会重复去加载这些公共代码，会造成以下问题：1. 相同资源重复被加载，浪费用户流量，增加服务器成本。2. 每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。那么，如果将这些公共代码抽取出来，并让浏览器缓存起来，用户在请求资源的时候，可以直接读取缓存中的这些代码，这样就能解决以上问题。如何抽...原创 2019-02-11 21:31:35 · 900 阅读 · 0 评论 -
21、webpack优化(6)——生产环境下webpack的2个内置优化：tree-shaking、scope-hosting
webpack自带的优化优化一：Tree-Shaking在生产环境下使用import引入(不是require)会自动去除没用的代码举例：//a.jslet add = (a,b) => { return a + b + 'add';}let minus = (a,b) => { return a - b + 'minus';}exports...原创 2019-02-11 15:55:09 · 1591 阅读 · 0 评论 -
20、webpack优化(5)——happyPack多线程打包
happyPack多线程打包如何实现多线程打包？安装happypack npm i happypack改造webpack.config.js，实现多线程打包jslet HappyPack = require('happypack');module.exports = { ... module:{ rules:[ ...原创 2019-02-11 15:22:38 · 4140 阅读 · 0 评论 -
19、webpack优化(4)——DllPlugin动态链接库
DllPlugin场景需求举例我们在打包一个react的项目的时候，会把react和react-dom这两个库打包起来。而这两个库很大且基本不会变，所以如果每次打包都要打包这两个第三方包的话，浪费时间，消耗性能。所以，我们一般会采取如下操作：将react和react-dom单独打包好，然后动态链接引入即可。如果第二次打包，那么发现react和react-dom已经被打包好了，那么就不需...原创 2019-02-11 15:10:38 · 1986 阅读 · 0 评论 -
18、webpack优化(3)——IgnorePlugin
IgnorePlugin这是webpack内置插件这个插件的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去举例：moment包比如我们要使用moment这个第三方依赖库，该库主要是对时间进行格式化，并且支持多个国家语言。moment包打包的问题假设我们的代码值引入了以下一个APIimport moment from 'moment'//设置语言mome...原创 2019-02-09 23:00:05 · 10444 阅读 · 0 评论 -
17、webpack优化(2)——解析时指定和排除查找目录
loader解析时指定和排除查找目录这个很简单，就是指定loader解析的规则，哪些不需要解析，哪些需要解析。一般两者写其一就行。指定了目录，缩小了解析范围，自然能提升效率，这也算优化方法之一小小小点吧。module:{ noParse:/jquery/,//不去解析jquery中的依赖库 rules:[ { test:/\.js$/, exclude:...原创 2019-02-09 22:23:46 · 2684 阅读 · 0 评论 -
16、webpack优化(1)——noParse
noParse这是module中的一个属性，作用：不去解析属性值代表的库的依赖举例：我们一般引用jquery，可以如下引用：import jq from 'jquery'对于上面的解析规则：当解析jq的时候，会去解析jq这个库是否有依赖其他的包我们对类似jq这类依赖库，一般会认为不会引用其他的包(特殊除外,自行判断)。所以，对于这类不引用其他的包的库，我们在打包的...原创 2019-02-09 22:10:24 · 8689 阅读 · 0 评论 -
15、区分不同环境(生产与开发环境)
区分生产与开发环境我们需要对webpack.config.js分成两个文件，一个用于开发，一个用于生产如何区分新建三个文件项目根目录 | --------webpack.base.js //基本配置 公共配置 （原先我们写的webpack.config.js） | --------webpack.dev.js //开发环境 | ...原创 2019-02-03 18:39:59 · 1014 阅读 · 0 评论 -
14、定义环境变量
定义环境变量当我们在配置的时候，需要区分所配置的属性参数是属于生产环境还是开发环境。每个环境对应的配置都不同。这就是环境变量最重要的意义。当然，要实现上面所说的效果，就需要用到webpack内置插件webpack.DefinePlugin环境变量配置//webpack.config.jslet webpack = require('webpack');plugins:[ ...原创 2019-02-03 15:20:58 · 708 阅读 · 0 评论 -
13、resolve属性配置
resolve配置该配置有好几个属性，每个属性都有自己的功能resolve的常用属性modules只查找当前配置目录，不往上查找alias别名mainFields查找到包后读取的顺序比如读取boostrap，在node_modules中查找到boostrap文件夹，里面的package.json知名了main为该目录下的dist/js/boostrap,指明...原创 2019-02-03 14:59:08 · 1876 阅读 · 0 评论 -
12.webpack的跨域配置
跨域前端请求的转发过程假设后端请求是3000端口，webpack是8080端口第一步：先发送到8080这个webpack-dev-server的服务第二部：再转发给后端的3000端口webpack配置//js请求let xhr = new XMLHttpRequest();xhr.open('GET','/api/user',true);xhr.onload = func...原创 2019-02-03 00:57:51 · 832 阅读 · 0 评论 -
11、clean-webpack-plugin、copy-webpack-plugin和webpack内置的bannerPlugin插件使用
clean-webpack-plugin详见上一篇文章，点击查看copy-webpack-plugin能够将文件从A路径拷贝到B路径使用方法：npm i copy-webpack-plugin -D//webpack.config.jslet CopyWebpackPlugin = require('copy-webpack-plugin');plugins:[...原创 2019-02-02 23:11:12 · 1645 阅读 · 0 评论 -
10、实时监控打包——watch的用法
watch的用法当我们每次更新代码的时候，都需要npm run build，重新打包，非常麻烦，所以可以使用watch去监听打包有同学说，可以直接使用devServer啊，用devServer是不能看到实体文件的，产生的文件存在内存中，我们看不到，而我们用watch去监听打包，可以直接看到打包后的文件具体用法//webpack.config.js中module.exports =...原创 2019-02-02 22:36:32 · 4027 阅读 · 0 评论 -
9、配置source-map
source-map该配置是用于映射源码的，用于调试功能具体用法使用devtool属性，具体有四种值四种类型源码映射,会单独生成一个sourcemap文件(.map格式),出错了,会标识出错的当前列和行module.exports = { devtool:'source-map'//添加映射文件，可以帮助我们调试源代码}不会产生单独的sourcemap文件(...原创 2019-02-02 22:35:31 · 1012 阅读 · 0 评论 -
8、打包多页应用
多页应用打包首先，多页应用应该有多个js文件，那么新建如下： src------index.js | ----other.js //index.js console.log('home'); //other.js console.log('other');初始化这个项目 npm in...原创 2019-02-02 20:09:26 · 512 阅读 · 0 评论 -
7、打包文件分类
打包文件分类我们在打包时，可能要将css文件归类到css目录下，将img归类到img下，当然，我们也可能会在引用资源的时候加上域名前缀，这时候就用到了我们的打包文件分类。归类给图片归类到img目录下在url-loader下配置outputPath，大于limit的图片就会生成到dist下的img文件夹下，同时所有路径都会加上这个/img/rules:[ { tes...原创 2019-02-02 17:17:26 · 581 阅读 · 0 评论 -
6、生产环境下三类图片的处理
图片处理目的：webpack打包我们的图片图片引入的方式在js中来引入图片错误的写法：let image = new Image();image.src = './logo.png';//这种写法代表一个普通字符串，打包后也会被认为是普通字符串，而不是图片地址document.body.appendChild(image);上面的方式是无法打包图片的，自然也就无法找到图...原创 2019-02-02 16:40:02 · 484 阅读 · 0 评论 -
5、webpack如何引入jquery——全局变量引入的问题
如何引入jquery？基本使用先安装jq依赖包 npm i jquery在js文件中引入import $ from 'jquery'console.log($)//f 有内容console.log(window.$)//undefined问题：我们能够拿到,但是因为模块化，,但是因为模块化，,但是因为模块化，并不是挂载在window下的引入第三方库的方法，并...原创 2019-02-02 14:47:46 · 3758 阅读 · 0 评论 -
4、转化ES6语法
一、转化ES6语法使用的loaderbabel-loader@babel/core 转化的核心模块@babel/preset-env 这是个大包，转化js语法的loader用法module:{ rules:[ { test:/\.js$/, use:{ loader:'babel-loader', options:{//用babel-l...原创 2019-02-01 23:41:22 · 547 阅读 · 0 评论 -
3、样式处理
一、样式处理的基本配置样式处理的原因我们写的样式不能直接在html中link，因为我们会以html为模板，这样打包的时候，css并不会单独打包到外面，所以不能直接link所以，我们一般会把css以模块的形式引入，模块就是所谓的require等等如何引入模块样式上述我们说到css是要以模块形式引入的，那么直接引入就够了吗？显然不是。我们需要用到样式处理的相关loader：- ...原创 2019-02-01 23:39:42 · 480 阅读 · 0 评论 -
2、html插件及配置webpack-dev-server
配置开发服务使用webpack-dev-servernpm i webpack-dev-server -D这个插件不会真的打包这个文件，而是会打包在内存中，直接去执行内存中的这个大包npx webpack-dev-server以上代码就可以其一个开发服务,但是我们一般不这样操作，而是写成配置文件开发服务的使用：```//webpack 是node写出来的 要用node的...原创 2019-02-01 23:37:47 · 718 阅读 · 0 评论 -
1、webpack基本配置
webpack安装安装本地webpack安装webpack、webpack-cli两个以上两个依赖都属于开发依赖，故使用命令：npm i webpack webpack-cli -D(当然，在此之前应该npm init -y初始化下)webpack可以进行0配置打包工具 -> 输出后的结果(js模块)举例：创建文件夹和文件：-src -> index...原创 2019-02-01 23:36:18 · 748 阅读 · 0 评论