webpack核心模块

68 篇文章 1 订阅
14 篇文章 0 订阅

entry

entry:入口起点开始打包,分析构建依赖图,可以定义单个或者多个

output

打包后的资源输出到哪里(位置path),以及命名规则(filename)
输出格式[name].js表示出口的文件名和多入口的文件名保持一致,这样的话可以做到不同的页面加载不同的js页面。

Loader

webpack只能处理js/json资源,不能处理类似css/img等其他资源,所以需要通过loader支持来处理其他资源,以下是常用的loader:

babel-loader:转换es6,es7的语法 — 文件转换
css-loader:css文件的加载和解析 — 文件转换
less-loader:将less转换成css — 文件转换
ts-loader:TS转JS — 文件转换
file-loader :静态资源加载 — 文件转换
raw-loader:静态资源内联,使用rem时,需要计算根节点的字体大小,计算rem的代码以内联脚本的形式插入html中优先执行

Plugins

插件的范围包括,从打包优化到压缩,到定义环境变量等
CommonsChunkPlugin:将chunk相同的模块代码提取成公共Js
CleanWebpackPlugin:清理构建目录
ExtractTextWebpackPlugin:将css从bundle文件中提取成一个独立的css文件
CopyWebpackPlugin:文件或者目录拷贝
HtmlWebpackPlugin:创建html承载bundle,最终文件无论是JS还是css都需要html来承载展示。
minimizer:压缩代码 ,css-minimizer-webpack-plugin 这个插件也可以用来压缩 css 文件。和 optimize-css-assets-webpack-plugin 加 cssnano 的效果是一样的。

Mode

配置环境
UglifyJsPlugin:删除未引用代码,并压缩 — 代码优化(webpack4中已废除)

devServer

自动构建,自动刷新浏览器显示改动内,生产环境不需要

devtool

devtool: 配置source-map(决定使用7种中的哪一种)
精准追踪报错行数,生产环境不需要

使用预加载

设置webpackPrefetch:true
在index.js中的import方法中的魔法注释中,添加webpackPrefetch:truewebpackPreload:true
prefetch(预获取) 与 preload 的区别为 prefetch 是等浏览器将主文件下载完后,在下载 prefetch 的文件,
而 preload 则是一起下载(结果要在控制台的 NetWork 下的 All 查看, js 下是查看不到的)

preload主要用于预加载当前页面需要的资源;而prefetch主要用于加载将来页面可能需要的资源

preload的特点:
preload加载的资源是在浏览器渲染机制之前进行处理的,并且不会阻塞onload事件
preload可以支持加载多种类型的资源,并且可以加载跨域资源;
preload加载的js脚本其加载和执行的过程是分离的。即preload会预加载相应的脚本代码,待到需要时自行调用;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值