webpack
文章平均质量分 85
以渐进学习的方式学习webpack,并对其中重要的基础内容进行记录和总结
vimin_M
主要学习前端相关技术,掌握html,css,JavaScript的使用;熟悉vue框架,了解git流程;熟悉nodejs,能搭建简易的服务器以及编写对应的api接口;熟悉mysql的基础操作命令
展开
-
webpack—自动编译和自动刷新浏览器
webpack—webpack-dev-server的使用webpack-dev-server安装启动自动打开浏览器优化执行命令在日常的webpack项目的开发中,如果每次测试都需要自己手动的编译和刷新浏览器,那么将会是一个无比痛苦和低开发效率的事情,所以为了提高我们的开发效率,我们希望我们每次编辑代码的时候,webpack可以自动编译并且刷新浏览器,而这里我们就可以使用webpack-dev-server这个插件了。本章只介绍关于webpack-dev-server的自动编译和自动刷新的功能。它还有更原创 2021-03-19 00:36:29 · 566 阅读 · 0 评论 -
webpack源码分析—ESModule规范模块的导入与导出详解
webpack源码分析—ESModule规范模块的导入与导出详解前言ESModule规范模块的导入与导出导入分析r方法—模块类型标记前言上一章分析了CommonJS规范模块的导入与导出,这一章我们来分析ESModule规范模块的导入与导出。ESModule规范模块的导入与导出示例代码// index.jsimport data, { param1, param2 } from './module.js'console.log(data)console.log(param1)console.原创 2021-03-19 00:09:44 · 1322 阅读 · 0 评论 -
webpack源码分析—CommonJS规范模块的导入与导出详解
webpack源码分析—模块的导入与导出详解前言CommonJS规范的导入和导出导入导出总结前言上一章我们说了webpack打包后代码的一个整体分析,这一章我们来详细说一下webpack打包后的代码是如何实现模块的导入和导出的,因为commonjs规范和esmodule规范两者有一定差异,且esmodule的差异更大,所以我们先分析CommonJS规范下的导入导出CommonJS规范的导入和导出示例代码// 主模块入口const data = require('./module.js')con原创 2021-03-16 00:58:26 · 638 阅读 · 0 评论 -
webpack源码分析—打包文件的整体分析
webpack源码分析—打包文件的整体分析打包文件分析模块定义路径匿名函数的形参module & exports__webpack_require__参数总结主逻辑代码__webpack_require__方法图解打包文件分析模块定义路径webpack会将入口文件及其依赖的模块打包成一个文件。从图上面可以看到,webpack打包后的结果,实际是一个立即执行函数,函数接收一个modules的参数。这个参数是模块打包核心之一,我们展开来看一下可以看到,传递的参数是一个对象类型的数据,而它的键原创 2021-03-14 13:03:51 · 314 阅读 · 0 评论 -
webpack—plugin的用法及常用的plugin
webpack—plugin的用法及常用的pluginplugin有什么用处基本用法html-webpack-plugin零配置使用传递参数来定义html文件的内容根据模板生成html文件添加模板参数clean-webpack-pluginplugin有什么用处插件也是webpack最强大的一个功能之一,插件可以实现很多loader无法完成的事情。他的工作其实是在打包构建的每个环节去添加对应生命钩子函数,并执行对应的钩子来对文件进行修改。如果说loader是实现模块化打包,那么plugin就是帮助我们构原创 2021-03-10 23:35:58 · 634 阅读 · 0 评论 -
webpack—常用的loader加载器的使用
常用的loader加载器的使用前言css-loader前言这一章主要讲解了webpack中一个很重要的功能,加载器-loader。上一章讲到,webpack可以打包不同类型的文件,而webpack本身仅支持js文件的模块化打包,所以其他类型的文件需要不同的loader进行转化加载。下面我们将以几种常见的loader来介绍loader的用法css-loader前端应用免不了使用的就是css代码,如果通过常规的link方式,会将所有的样式都进行加载,但实际上,页面使用到的样式是只有一部分的。所以很大程度原创 2021-03-08 20:38:07 · 292 阅读 · 0 评论 -
快速了解webpack,及其基础知识
快速了解webpack,及其基础知识前言什么webpack快速开始webpack安装使用webpack模块配置webpack.config.js前言这是webpack学习总结及心得分栏的第一章,主要讲述一下我对webpack的一些新的认识,和webpack的基础用法,webpack源代码文档什么webpackwebpack是一个模块打包工具,但这里的模块化不仅仅是对js文件而言的,而是整个前端的打包,它可以将根据项目中的依赖将所有类型的文件打包在一起,如css文件,资源文件等。它可以将项目中零散原创 2021-03-06 21:58:23 · 190 阅读 · 0 评论