首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于webpack4的14个知识点,童叟无欺

关于webpack4的14个知识点,童叟无欺

作者头像
ConardLi
发布2019-06-10 22:45:10
5320
发布2019-06-10 22:45:10
举报
文章被收录于专栏:code秘密花园code秘密花园

最近工作中用到了nuxt,才发现,如果webpack学的6,nuxt基本不需要学习,没什么学习成本的,因此,这篇重新记录下webpack4的一些基础知识点,下一篇将会配置一个优化到极致的react脚手架,也希望大家能够持续关注,配置webpack就是优化优化再优化,哈哈~

Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

1.Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。

2.Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

3.Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。

4.Loader:模块转换器,用于把模块原内容按照需求转换成新内容。

5.Plugin:扩展插件,在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。

6.Output:输出结果,在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

1. 从0开始配置结构

初始化项目结构

2. 配置webpack.config.js

  • 在项目根目录新建webpack.config.js

3. 配置开发服务器

4. 打包js

5. 支持ES6,react,vue

6. 处理css,sass,以及css3属性前缀

处理css

动态卸载和加载CSS

style-loader为 css 对象提供了use()和unuse()两种方法可以用来加载和卸载css

比如实现一个点击切换颜色的需求,修改index.js

处理sass

提取css文件为单独文件

7.产出html

8. 处理引用的第三方库,暴露全局变量

webpack.ProvidePlugin参数是键值对形式,键就是我们项目中使用的变量名,值就是键所指向的库

9. code splitting、懒加载(按需加载)

说白了就是在需要的时候在进行加载,比如一个场景,点击按钮才加载某个js.

10. JS Tree Shaking

11. 图片处理

12. Clean Plugin and Watch Mode

清空目录,文件有改动就重新打包

13. 区分环境变量

14. 开发模式与webpack-dev-server,proxy

到这里基本就结束了,觉得有帮助,不妨点个,不足之处,还望斧正~

作者:张不怂

原文链接:https://juejin.im/post/5cea1e1ae51d4510664d1652

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-06-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 code秘密花园 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 处理css
    • 动态卸载和加载CSS
      • 处理sass
        • 提取css文件为单独文件
        • webpack.ProvidePlugin参数是键值对形式,键就是我们项目中使用的变量名,值就是键所指向的库
        • 说白了就是在需要的时候在进行加载,比如一个场景,点击按钮才加载某个js.
        • 清空目录,文件有改动就重新打包
        相关产品与服务
        图片处理
        图片处理(Image Processing,IP)是由腾讯云数据万象提供的丰富的图片处理服务,广泛应用于腾讯内部各产品。支持对腾讯云对象存储 COS 或第三方源的图片进行处理,提供基础处理能力(图片裁剪、转格式、缩放、打水印等)、图片瘦身能力(Guetzli 压缩、AVIF 转码压缩)、盲水印版权保护能力,同时支持先进的图像 AI 功能(图像增强、图像标签、图像评分、图像修复、商品抠图等),满足多种业务场景下的图片处理需求。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档