webpack4.0
2024路在何方
某行业全球top1企业的前端主管
展开
-
vue项目从0搭建(webpack手动搭建)
vue项目初始化1. 生成package.json文件> npm init2. 安装依赖> npm i webpack vue vue-loaderMacBook-Air:vue-webpack-todo yuhua$ npm i webpack vue vue-loader> fsevents@1.2.4 install /Users/yuhua/Desk...原创 2018-10-05 23:06:06 · 4978 阅读 · 3 评论 -
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 · 769 阅读 · 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 · 737 阅读 · 0 评论 -
3、样式处理
一、样式处理的基本配置样式处理的原因我们写的样式不能直接在html中link,因为我们会以html为模板,这样打包的时候,css并不会单独打包到外面,所以不能直接link所以,我们一般会把css以模块的形式引入,模块就是所谓的require等等如何引入模块样式上述我们说到css是要以模块形式引入的,那么直接引入就够了吗?显然不是。我们需要用到样式处理的相关loader:- ...原创 2019-02-01 23:39:42 · 493 阅读 · 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 · 581 阅读 · 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 · 3825 阅读 · 0 评论 -
6、生产环境下三类图片的处理
图片处理目的:webpack打包我们的图片图片引入的方式在js中来引入图片错误的写法:let image = new Image();image.src = './logo.png';//这种写法代表一个普通字符串,打包后也会被认为是普通字符串,而不是图片地址document.body.appendChild(image);上面的方式是无法打包图片的,自然也就无法找到图...原创 2019-02-02 16:40:02 · 504 阅读 · 0 评论 -
7、打包文件分类
打包文件分类我们在打包时,可能要将css文件归类到css目录下,将img归类到img下,当然,我们也可能会在引用资源的时候加上域名前缀,这时候就用到了我们的打包文件分类。归类给图片归类到img目录下在url-loader下配置outputPath,大于limit的图片就会生成到dist下的img文件夹下,同时所有路径都会加上这个/img/rules:[ { tes...原创 2019-02-02 17:17:26 · 608 阅读 · 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 · 540 阅读 · 0 评论 -
9、配置source-map
source-map该配置是用于映射源码的,用于调试功能具体用法使用devtool属性,具体有四种值四种类型源码映射,会单独生成一个sourcemap文件(.map格式),出错了,会标识出错的当前列和行module.exports = { devtool:'source-map'//添加映射文件,可以帮助我们调试源代码}不会产生单独的sourcemap文件(...原创 2019-02-02 22:35:31 · 1060 阅读 · 0 评论 -
10、实时监控打包——watch的用法
watch的用法当我们每次更新代码的时候,都需要npm run build,重新打包,非常麻烦,所以可以使用watch去监听打包有同学说,可以直接使用devServer啊,用devServer是不能看到实体文件的,产生的文件存在内存中,我们看不到,而我们用watch去监听打包,可以直接看到打包后的文件具体用法//webpack.config.js中module.exports =...原创 2019-02-02 22:36:32 · 4165 阅读 · 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 · 1673 阅读 · 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 · 865 阅读 · 0 评论 -
13、resolve属性配置
resolve配置该配置有好几个属性,每个属性都有自己的功能resolve的常用属性modules只查找当前配置目录,不往上查找alias别名mainFields查找到包后读取的顺序比如读取boostrap,在node_modules中查找到boostrap文件夹,里面的package.json知名了main为该目录下的dist/js/boostrap,指明...原创 2019-02-03 14:59:08 · 1921 阅读 · 0 评论 -
14、定义环境变量
定义环境变量当我们在配置的时候,需要区分所配置的属性参数是属于生产环境还是开发环境。每个环境对应的配置都不同。这就是环境变量最重要的意义。当然,要实现上面所说的效果,就需要用到webpack内置插件webpack.DefinePlugin环境变量配置//webpack.config.jslet webpack = require('webpack');plugins:[ ...原创 2019-02-03 15:20:58 · 724 阅读 · 0 评论 -
15、区分不同环境(生产与开发环境)
区分生产与开发环境我们需要对webpack.config.js分成两个文件,一个用于开发,一个用于生产如何区分新建三个文件项目根目录 | --------webpack.base.js //基本配置 公共配置 (原先我们写的webpack.config.js) | --------webpack.dev.js //开发环境 | ...原创 2019-02-03 18:39:59 · 1050 阅读 · 0 评论 -
16、webpack优化(1)——noParse
noParse这是module中的一个属性,作用:不去解析属性值代表的库的依赖举例:我们一般引用jquery,可以如下引用:import jq from 'jquery'对于上面的解析规则:当解析jq的时候,会去解析jq这个库是否有依赖其他的包我们对类似jq这类依赖库,一般会认为不会引用其他的包(特殊除外,自行判断)。所以,对于这类不引用其他的包的库,我们在打包的...原创 2019-02-09 22:10:24 · 8764 阅读 · 0 评论 -
17、webpack优化(2)——解析时指定和排除查找目录
loader解析时指定和排除查找目录这个很简单,就是指定loader解析的规则,哪些不需要解析,哪些需要解析。一般两者写其一就行。指定了目录,缩小了解析范围,自然能提升效率,这也算优化方法之一小小小点吧。module:{ noParse:/jquery/,//不去解析jquery中的依赖库 rules:[ { test:/\.js$/, exclude:...原创 2019-02-09 22:23:46 · 2754 阅读 · 0 评论 -
18、webpack优化(3)——IgnorePlugin
IgnorePlugin这是webpack内置插件这个插件的作用是:忽略第三方包指定目录,让这些指定目录不要被打包进去举例:moment包比如我们要使用moment这个第三方依赖库,该库主要是对时间进行格式化,并且支持多个国家语言。moment包打包的问题假设我们的代码值引入了以下一个APIimport moment from 'moment'//设置语言mome...原创 2019-02-09 23:00:05 · 10585 阅读 · 0 评论 -
19、webpack优化(4)——DllPlugin动态链接库
DllPlugin场景需求举例我们在打包一个react的项目的时候,会把react和react-dom这两个库打包起来。而这两个库很大且基本不会变,所以如果每次打包都要打包这两个第三方包的话,浪费时间,消耗性能。所以,我们一般会采取如下操作:将react和react-dom单独打包好,然后动态链接引入即可。如果第二次打包,那么发现react和react-dom已经被打包好了,那么就不需...原创 2019-02-11 15:10:38 · 2007 阅读 · 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 · 4168 阅读 · 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 · 1648 阅读 · 0 评论 -
22、webpack优化(7)——抽取公共代码
抽取公共代码多页应用一般会重复多次使用部分公共代码,这样每次加载单页的时候,就会重复去加载这些公共代码,会造成以下问题:1. 相同资源重复被加载,浪费用户流量,增加服务器成本。2. 每个页面需要加载的资源太大,导致网页首屏加载缓慢,影响用户体验。那么,如果将这些公共代码抽取出来,并让浏览器缓存起来,用户在请求资源的时候,可以直接读取缓存中的这些代码,这样就能解决以上问题。如何抽...原创 2019-02-11 21:31:35 · 915 阅读 · 0 评论 -
23、webpack优化(8)——懒加载(动态加载)
懒加载在这里的懒加载,其实就是按需加载(动态加载)。需要对webpack进行相关配置。懒加载案例案例情景:当我点击按钮的时候,需要动态去加载resource.js,并读取该文件导出的内容//index.js/*在页面上有一个按钮,点击按钮去加载资源resource.js*/let button = document.createElement('button');bu...原创 2019-02-12 15:02:43 · 2798 阅读 · 0 评论 -
24、webpack优化(9)——热更新
热更新所谓的热更新指的是对数据变化的局部进行更新,而不进行页面刷新。热更新配置在devServer中开启hot配置为true添加两个webpack的内置插件,分别为new webpack.NamedModulesPlugin()和new webpack.HotModuleReplacementPlugin(),前者用于打印更新的模块路径,告诉我们哪个模块热更新了;后者是热更新插件。...原创 2019-02-12 15:05:12 · 593 阅读 · 0 评论 -
25、tapable(1)——介绍
晚上写原创 2019-02-12 18:08:58 · 475 阅读 · 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 · 805 阅读 · 0 评论 -
27、tapable(3)——SyncBailHook
SyncBailHookSyncBailHook同步熔断保险钩子,即return一个非undefined的值,则不再继续执行后面的监听函数SyncBailHook使用let {SyncBailHook} = require('tapable');//SyncBailHook同步熔断保险钩子,即return一个非undefined的值,则不再继续执行后面的监听函数class Lesso...原创 2019-02-12 18:10:58 · 1041 阅读 · 0 评论 -
28、tapable(4)——SyncWaterfallHook
SyncWaterfallHookSyncWaterfallHook,同步瀑布钩子,上一个监听函数的返回值会传递给下一个监听函数SyncWaterfallHook的使用let {SyncWaterfallHook} = require('tapable');//SyncWaterfallHook,同步瀑布钩子,上一个监听函数的返回值会传递给下一个监听函数class Lesson{ ...原创 2019-02-12 18:12:44 · 725 阅读 · 0 评论 -
29、tapable(5)——SyncLoopHook
SyncLoopHookSyncLoopHook,同步遇到某个不返回undefined的监听函数,就重复执行SyncLoopHook的使用let {SyncLoopHook} = require('tapable');//SyncLoopHook,同步遇到某个不返回undefined的监听函数,就重复执行class Lesson{ constructor(){ this.ind...原创 2019-02-12 18:14:04 · 674 阅读 · 1 评论 -
loader0、loader简介和载入方式
什么是loaderwebpack只能处理javaScript模块,如果要处理其他类型的文件,就需要使用loader进行转换。loader是webpack种的一个重要概念,它是指用来将一段代码转换成另一端代码的webpack加载器。配置loaderlet path = require('path');module.exports = { mode:'development',...原创 2019-02-14 08:23:13 · 590 阅读 · 0 评论 -
loader1、loader的配置和执行顺序
loader的配置配置单个loader请见上一个文件配置多个loader数组形式 let path = require('path'); module.exports = { mode:'development', entry:'./src/index.js', output:{ filename:'bundle.js', path:path.resolve...原创 2019-02-14 08:26:22 · 4464 阅读 · 0 评论