webpack相关总结

最新推荐文章于 2021-11-17 13:02:16 发布
最新推荐文章于 2021-11-17 13:02:16 发布
阅读量153 收藏
点赞数
分类专栏： web 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lishundi/article/details/100561316
版权
本文总结了webpack的核心概念，包括webpack与grunt、gulp的区别，bundle、chunk和module的定义，以及Loader和Plugin的作用。详细阐述了webpack的构建流程，探讨了如何利用webpack优化前端性能，如代码分割、压缩和模块热更新。同时，文章还讨论了webpack配置自动生成、webpack-dev-server与http服务器的区别，以及webpack 3到4的主要变化，包括mode参数、公共代码提取和Tree-shaking等优化策略。
摘要由CSDN通过智能技术生成

webpack相关总结

1. 什么是webpack?它和grunt和gulp有什么不同？

Webpack是一个模块打包器，它可以递归的打包项目中的所有模块，最终生成几个打包后的文件。它和其它的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJS)、全局分析。

2. 什么是bundle？什么是chunk？什么是module?

bundle是由webpack打包出来的文件。chunk是指webpack在进行模块的依赖分析的时候，分割出来的代码块。module是开发中的单个模块。

3. 什么是Loader?什么是Plugin?

  • loader是使webpack拥有加载和解析非js文件的能力。
  • plugin 可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果。

4. webpack的构建流程？

  • 初始化参数: 从配置文件和shell语句中将读到的参数合并，得到最后的参数。
  • 开始编译：用合并得到的参数初始化complier对象，加载所有配置的插件，执行run方法开始编译。
  • 确定入口：通过entry找到入口文件。
  • 编译模块：从入口文件出发，调用所有配置的loader对模块进行解析翻译，再找到该模块依赖的模块进行处理。
  • 完成模块编译：得到每个模块被翻译之后的最终内容和依赖关系。
最低0.47元/天 解锁文章
lishundi
关注
专栏目录
webpack-dev-server配置
webpack-dev-server
07-27 6627
最近研究webpack略有小成，特此写篇博客。虽然webpack有官网api,但是个人认为webpack api一点都不人性化， 不自己研究研究，根本看不懂。今天先从写webpack-dev-server开始。webpack-dev-server的作用就是可以在 前端自己起一个服务，不用依托nginx,或者express等，更爽的是它可以实现实时更新，不用你去不停的F5刷新浏 览器。废话不多说，下...
nginx反向代理配置和webpack.devServer
txun123的博客
04-18 3516
自从出了Cookie的sameSite属性，本地开发跨域联调就很费劲了，为了解决这个问题，我们可以再本地跑一个nginx服务，然后做反向代理，这样就没有跨域了！ 当然，webpack有自带的跨域机制webpack.devServer，有兴趣的可以去查阅下相关资料 一、非框架开发时，配置本地nginx反向代理： 先去下载nginx包，然后解压，找到conf文件夹，里边有nginx.conf文件，打开，并修改server配置如下： server { listen 8088;// 前端访问端口 ser
webpack与webpack-dev-server的区别
xiaoxu的博客
08-27 8685
webpack webpack-dev-server 二者的区别 webpack 一个模块打包器，根据entry指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。 每个依赖项随即被处理，最后输出到output字段指定的文件中 main.js引入child1.js、chi...
webpack-dev-server配合nginx启动时遇到热替换模块请求跨域
weixin_34365635的博客
06-17 794
当本地URL已经用Nginx代理，例如http://vue-native.guahao-inc.... 代理到http://vue-native.guahao-inc.com不带端口号时，本地的webpack-dev-server会遇到请求热更新的json文件跨域的问题，如下图： 费了很大的劲网上找来找去都找不到好的解决办法。 突然想到...
Webpack + Tomcat + Nginx/Apache实现前后端开发分离
海纳百川
02-04 9899
目标： 本文依赖自己的个人经验，简要介绍一下ReactJS+Tomcat的开发方式，经过团队试用，觉得比较好。主要得益于ReactJS的开发方式和webpack工具的使用，结合强大的代理，实现了一个较为方便的小团队开发环境。由于我是零基础开始实验这个方案，并得到了友人的帮助，其中遇到了不少坑，希望可以帮助到大家。 工具介绍： Webpack: Webpack可以使用webpack dev se
webpack 总结
肖的博客
09-12 292
文件结构 |-dist |-index.html |-...... |-src |-index.js |-print.js |-kid.jpg |-style.css |-package.json |-webpack.config.js webpack.config.js const path = require('path') module.exports = { // ...
webpack知识点总结
ass_ace
08-05 763
webpack是什么？ webpack是一种前端资源构建工具，一个静态模块打包器。在webpack看来，前端的所有资源文件都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。 webpack与gulp的区别是什么？ webpack与gulp最大的区别就是在于打包过程上有所不同 Grunt、Gulp 这类构建工具的打包过程是通过遍历源文件–>匹配规则–>打包，整个过程是基于文件流的打包方式且做不到按需加载。 webpack 是从入口文件开始，把相关模块引入通过加载模块–&
【webpack基础】Webpack 常用命令总结
06-08
此命令会将Webpack安装到项目的`node_modules`目录中，并在`package.json`文件中加入Webpack的相关配置。 **局部安装Webpack-CLI** ``` npm install webpack-cli –save-dev ``` Webpack-CLI提供了命令行接口，使...
webpack 使用总结
codewhy的博客
09-05 685
webpack 使用总结1、意义2、webpack术语Bundlemodulechunk3、config 配置概念1、Entry2、Output3、Loader3.1常用loader3.1.1 css类loader3.1.2 1、意义 主要功能：现在前端有很多各种各样的工具和框架，直接给浏览器他不认识、需要转化为浏览器认识的版本和语言。 其他功能：引入其他插件或实现额外功能。 2、webpack术语 Bundle 最后的生产脚本。也就是最终浏览器可以直接运行的代码。 module 一个文件 chunk we
webpack4 optimization使用总结
10-16
你可以通过自定义 `minimizer` 来指定使用 UglifyJsPlugin 或其他压缩工具，并进行相关配置。例如： ```javascript minimizer: mode === "development" ? [] : [ new UglifyJsPlugin({ cache: true, ...
webpack面试
大灰狼的小绵羊哥哥的博客
10-11 675
什么是webpack和grunt和gulp有什么不同？ webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。它和其他工具最大的不同在于它支持code-splitting(代码分割)、模块化(AMD,ESM,CommonJS)开发、全局分析(他会分析整个项目下跟你应用有关的模块)。 什么是bundle,chunk,module？ bundle是由webp...
前端知识总结之webpack篇
weixin_45690832的博客
05-04 223
第一章 WEBPACK 4 1. webpack与grunt、gulp的不同？ 三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。 grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式...
webpack面试题收集
前端晓栈的博客
02-22 1561
1、webpack打包原理 把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载 2、webpack的优势 （1） webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。 （2）能被模块化的不仅仅是 JS 了。 （3） 开发便捷，能替代部分 grunt/gulp的工作，比如打包、压缩混淆、图片转base...
webpack常见插件和loader及作用
sakura_zr的博客
01-12 716
loader webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。 常见loader style-loader：将CSS添加到DOM的内联样式标签style里 css-loader：允许将CSS文件通过require的方式引入，并返回CSS代码 less-loader：处理less sass-loader：处理sass postcss-loa
webpack中的loader
hobbys的博客
11-17 340
1.loader 概述 在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！ loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如： ⚫ css-loader 可以打包处理 .css 相关的文件 ⚫ less-loader 可以打包处理 .less 相关的文件 ⚫ babel-loader 可以打包处理 webpack 无法处理的高级
webpack面试题
weixin_34387284的博客
02-23 325
webpack 谈谈你对webpack的看法 webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。 webpack的基本功能和工作...
webpack大拷问
冯天祥
04-05 243
1 webpack与grunt、gulp的不同？ 三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。 grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值