![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 54
Paranoia_yy
这个作者很懒,什么都没留下…
展开
-
webpack学习笔记(十)模块与依赖
在模块化编程中,开发者会将程序分解成功能离散的一些文件,我们把这些文件称之为模块,每个模块都很轻量,这就使得项目的调试、验证、测试比较容易。这些模块提供了可靠的抽象和封装界限。使得应用程序的每个模块具备了条例清晰的设计和明确的目的。大多数浏览器都支持了esm模块化ECMAScript模块、CommonJS模块、AMD模块、Assets模块。原创 2022-11-05 19:08:16 · 1030 阅读 · 0 评论 -
webpack学习笔记(十)source-map、devServer
回顾搭建webpack环境1.创建package.json文件(保存安装包的一些信息【版本信息】)2.创建了node_modules和package-lock.json(保存了当前安装包的一些依赖信息)3.创建文件index.js 入口文件entry里可以配置4.创建webpack.config.js module.exports={mode:‘development’}原创 2022-11-02 00:28:13 · 558 阅读 · 0 评论 -
webpack学习笔记(九)拆分开发环境和生产环境配置
例如在开发环境中没有必要设置缓存,生产环境还需要设置公共路径等。原创 2022-11-01 16:25:18 · 508 阅读 · 0 评论 -
webpack学习笔记(八)缓存及打包文件
通过修改optimization.splitChunks这个属性来实现,可以定义一个cacheGroups缓存组,将我们的业务代码引用的第三方的文件都打包到一个文件中,在浏览器中缓存,由于这个文件不频繁更新,所以我们可以提高首屏的打开速度节省我们网络流量。由于缓存的存在,在获取新的代码的时候比较困难,那就需要配置webpack,来确保webpack编译生成的文件能够被客户端缓存,而在文件内容发生变化时,又能够请求到新的文件。3.将所有的打包文件都打包到script文件夹中。2.缓存第三方库代码。原创 2022-11-01 13:36:24 · 513 阅读 · 0 评论 -
webpack学习笔记(七)代码分离
在入口的地方通过Entry dependencies 或者通过SplitChunksPlugin来去重和代码分离。代码分离科研用于获取更小的bundle以及控制资源加载的优先级,可以极大缩短加载时间。bundle是打包分离出来的文件,然后把这些文件按需加载,或者是并行加载。缺点:如果是多个入口,那么这些入口的共享文件会分别在每个包里重复打包。通过模块的内联函数import调用来分离代码。第一种方法+webpack自带的插件进行优化。能够把代码分离到不同的bundle中。(二)防止重复的分离方法。原创 2022-10-06 20:54:36 · 568 阅读 · 0 评论 -
webpack学习笔记(六)loader加载器
当碰到通过require或者是import去引入一个txt文件时,在对这个文件进行打包之前,先使用raw-loader转化一下。loader可以让webpack解析其他类型的文件,并且将这些文件转化为有效的模块以供应用程序使用。加载后的样式会在head标签里,添加一个style标签,引入一个文件就添加一个style。webpack只能理解js和json文件,这是webpack开箱可用的自带的能力,webpack.config.js配置。通过两个插件来进行抽离和压缩。未被压缩前的打包的css文件。原创 2022-10-04 16:50:13 · 692 阅读 · 0 评论 -
webpack学习笔记(五)资源模块
资源模块类型:asset module type,会通过四种新的类型模块来替换所有的loader。asset:会在导出一个Data URI 和发送一个单独的文件之间自动进行选择。asset modules资源模块,可以引入除了js以外的任何的其他类型资源。允许我们应用webpack来打包其他的资源文件,比如字体文件、图标文件。asset/resource:会发送一个单独的文件并导出URL。asset/inline:会导出一个资源的Data URI。asset/source:会导出资源的源代码。原创 2022-10-03 23:05:42 · 279 阅读 · 0 评论 -
webpack学习笔记(四)一些配置说明[提高开发效率的一点小配置]
【代码】webpack学习笔记(四)一些配置说明[提高开发效率的一点小配置]原创 2022-10-03 21:17:40 · 138 阅读 · 0 评论 -
webpack学习笔记(三)插件
webpack会把这个依赖的关系都记录下来,然后交给webpack编译器,webpack编译器经过加工以后会生成目标文件,比如css文件和js文件。webpack的编译过程需要一些工具帮忙,这些工具可以帮助webpack执行一些特定的任务,比如:打包优化,资源管理等。包含community社区的插件,weback内置的一些官方的插件,webpack contrib第三方的插件。在webpack中,会指定一个入口文件,而这个入口文件又会依赖与其他的文件(如import xxx.js)原创 2022-10-03 20:44:01 · 178 阅读 · 0 评论 -
webpack学习笔记(二)自定义webpack
不方便 不直观,所以可以通过配置文件来配置webpack.config.js。例如:打包过程中指定入口文件和模式。原创 2022-10-03 20:03:50 · 131 阅读 · 0 评论 -
webpack学习笔记(一)安装webpack
当在控制台输入webpack的时候其实运行的是 node_modules\node_modules\webpack\bin\webpack.js这个文件,他会根据是否安装有webpack-cli或者是webpack-command进行处理,当没有安装其中之一就会告诉你需要下载webpack-cli,如果只有安装webpack-cli就会利用require.resolve获取webpack-cli/package.json的路径,然后根据这个路径加载模块。在当前路径中安装webpack不能使用。原创 2022-09-26 15:57:25 · 722 阅读 · 0 评论