Webpack详解
文章平均质量分 66
XiaoYu2002-AI
大家好,我是小余,一名前端程序员。向大家分享最实用的技术笔记
展开
-
(了解)webpack的devServer配置信息
回环地址(Loop Back Address),表达的意思其实是我们主机自己发出去的包,直接被自己接收;而回环地址,是在网络层直接就被获取到了(会被自己捕获到),是不会经常数据链路层和物理层的。比如我们监听 127.0.0.1时,在同一个网段下的主机中,通过ip地址是不能访问的。比如我们监听 0.0.0.0时,在同一个网段下的主机中,通过ip地址是可以访问的。:监听IPV4上所有的地址,再根据端口找到不同的应用程序。webpack.comm.conf.js(公共)在Vue项目中再写详细的,暂时跳过。原创 2024-04-26 00:40:28 · 1125 阅读 · 0 评论 -
(理解)webpack的热模块替换HMR
我们刚刚自动更新的方式是当我们修改了一个地方,会整个浏览器都更新了一遍,但这其实是没有必要的,会浪费性能而且保存的数据也会丢失,我们只需要更新我们修改的地方。原创 2024-04-26 00:39:55 · 323 阅读 · 0 评论 -
(掌握)webpack开启本地服务器
【代码】(掌握)webpack开启本地服务器。原创 2024-04-26 00:39:22 · 453 阅读 · 0 评论 -
(理解)webpack模式-不同模式的作用
而当mode设置了’production’的时候,也相当设置了下面这些红色部分,是非常多的选项的。设置mode为’development’相当于设置了这些红色的部分。原创 2024-04-26 00:38:43 · 366 阅读 · 0 评论 -
(掌握)webpack插件-Define插件
但是,这个时候编译还是会报错,因为在我们的模块中还使用到一个BASE_URL的常量:但是我们并没有设置过这个常量值,所以会出现没有定义的错误这个时候我们可以使用DefinePlugin插件。原创 2024-04-26 00:38:11 · 168 阅读 · 0 评论 -
(掌握)webpack插件-Html插件
比如添加一个noscript标签,在用户的JavaScript被关闭时,给予响应的提示比如在开发vue或者react项目时,我们需要一个可以挂载后续组件的根标签这个我们需要一个属于自己的index.html模块:上面的代码中,会有一些类似这样的语法,这个是EJS模块填充数据的方式在配置HtmlWebpackPlugin时,我们可以添加如下配置:template:指定我们要使用的模块所在的路径title。原创 2024-04-26 00:37:46 · 239 阅读 · 0 评论 -
(掌握)webpack插件-Clean插件
【代码】(掌握)webpack插件-Clean插件。原创 2024-04-26 00:14:38 · 327 阅读 · 0 评论 -
(理解)webpack中plugin的作用和loader
安装的是 Sass 编译器,它是一个独立的工具,用于将 Sass/Scss 样式文件编译成 CSS 文件。能够自动地将 Sass/Scss 文件编译成 CSS 文件,并将其打包进最终的 JavaScript 文件中,使得我们可以直接在浏览器中使用编译后的 CSS 文件。能够使我们更方便地处理 Sass/Scss 样式文件,将其转换成能够直接在浏览器中使用的 CSS 文件,并能够将其集成到构建流程中,自动化地处理样式文件。进行转换(但也就仅此而已了,所以Loader跟plugin是很不一样的)原创 2024-04-26 00:14:08 · 328 阅读 · 0 评论 -
(掌握)webpack对文件路径的解析和配置
resolve.mainFiles的默认值是 [‘index’] (这就是我们引入文件夹下的index能够省略index的原因,因为这里默认找index)默认值是 [‘node_modules’],所以默认会从node_modules中查找文件。会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找。我们可以通过设置别名的方式来替换初识模块路径,具体后面讲解alias的配置。的vue就是一个模块路径,会去node_modules查找)原创 2024-04-26 00:13:32 · 358 阅读 · 0 评论 -
(掌握)webpack对vue文件的处理打包
【代码】(掌握)webpack对vue文件的处理打包。原创 2024-04-26 00:13:02 · 329 阅读 · 0 评论 -
(理解)webpack对图片资源的特殊处理
如果我们一个个去安装使用插件,那么需要手动来管理大量的babel插件,我们可以直接给webpack提供一个preset,webpack会根据我们的预设来加载对应的插件列表,并且将其传递给babel。安装完预设之后,我们刚刚创建的babel.config.js就需要做出一点转变了,因为预设(presets)跟配置(plugins)是分开的。在实际开发中,我们通常会在构建工具中通过配置babel来对其进行使用的,比如在webpack中。我们可以设置一个规则,在加载js文件时,使用我们的babel。原创 2024-04-26 00:12:13 · 876 阅读 · 2 评论 -
(掌握)webpack对图片资源的基本处理
好处举例:这样自己制定规则就可以防止,打包后的图片文件名字跟原来的文件名字已经牛头不对马嘴,完全对不上了。哈希值最好保存下来,哈希值是唯一的,防止图片不小心重复,[hash:6]就是只使用前6位哈希值(基本上也够用了)[hash]:文件的内容,使用MD4的散列函数处理,生成的一个128位的hash值(32个十六进制)[ext]: 处理文件的扩展名(后缀名,比如.svg,.js,.html之类的)之前通过使用 url-loader,并且配置资源体积限制实现。[name]:处理文件的名称(原来图片的名字)原创 2024-04-26 00:11:22 · 458 阅读 · 0 评论 -
(掌握)webpack对图片资源的基本处理
好处举例:这样自己制定规则就可以防止,打包后的图片文件名字跟原来的文件名字已经牛头不对马嘴,完全对不上了。哈希值最好保存下来,哈希值是唯一的,防止图片不小心重复,[hash:6]就是只使用前6位哈希值(基本上也够用了)[hash]:文件的内容,使用MD4的散列函数处理,生成的一个128位的hash值(32个十六进制)[ext]: 处理文件的扩展名(后缀名,比如.svg,.js,.html之类的)之前通过使用 url-loader,并且配置资源体积限制实现。[name]:处理文件的名称(原来图片的名字)原创 2024-04-25 23:47:19 · 301 阅读 · 0 评论 -
(理解)webpack中postcss-loader的
我们可以将这些配置信息放到一个单独的文件中进行管理:(就不会让上面配置文件里面套太多层了,看着都密密麻麻的)事实上,在配置postcss-loader时,我们配置插件并不需要使用autoprefixer。我们可以使用另外一个插件:postcss-preset-env。注意:我们在使用某些postcss插件时,也可以直接传入字符串。原创 2024-04-25 23:45:26 · 524 阅读 · 0 评论 -
(掌握)webpack的less文件处理
我们配置的时候除了写less之外,我们还写了css跟style是因为,less-loader只是将less语法转化成css语法,但是css语法还得进行处理的,使用css的loader处理css语法,最后使用style的loader将其引入使用。但是在项目中我们会编写大量的css,它们如何可以自动转换呢?配置webpack.config.js。刚刚rules里面的。原创 2024-04-25 23:32:41 · 186 阅读 · 0 评论 -
(掌握)webpack的css处理和loader的使用
用于对 resource(资源)进行匹配的,通常会设置成正则表达式。通过JavaScript创建了一个元素,并且希望给它设置一些样式;UseEntry是一个对象,可以通过对象的属性来设置一些其他属性。: Rule.use: [ { loader } ] 的简写。:对应的值时一个数组:[UseEntry]继续编译命令 npm run build。:内联方式使用较少,因为不方便管理。原创 2024-04-25 23:12:12 · 957 阅读 · 0 评论 -
(理解)webpack的形成的依赖图结构
loader:webpack默认情况下是只对我们的js进行打包,如果我们想要我们文件里面也包括了css文件、图片、字体等,就需要用到loader来解析了。从入口开始,会生成一个 依赖关系图,这个依赖关系图会包含应用程序中所需的所有模块(比如.js文件、css文件、图片、字体等)然后遍历图结构,打包一个个模块(根据文件的不同使用不同的loader来解析)事实上webpack在处理应用程序时,它会根据命令或者配置文件找到入口文件。原创 2024-04-25 23:11:39 · 187 阅读 · 0 评论 -
(掌握)webpack基本打包-配置文件-执行脚本
在通常情况下,webpack需要打包的项目是非常复杂的,并且我们需要一系列的配置来满足要求,默认配置必然是不可以的。不喜欢打包后的文件叫做main.js,我想叫做xiaoyu.js,能不能修改,当然可以。不喜欢入口文件叫做index.js,想叫做main.js,如何修改。我们可以通过webpack进行打包,之后运行。继续执行webpack命令,依然可以正常打包。在目录下直接执行 webpack 命令。原创 2024-04-25 23:10:49 · 273 阅读 · 0 评论 -
(掌握)webpack的介绍和环境搭建
比如开发过程中我们需要通过模块化的方式来开发比如也会使用一些高级的特性来加快我们的开发效率或者安全性,比如通过ES6+、TypeScript开发脚本逻辑,通过sass、less等方式来编写css样式代码比如开发过程中,我们还希望实时的监听文件的变化来并且反映到浏览器上,提高开发的效率比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化但是事实上,这三大框架的创建过程我们都是**借助于脚手架(CLI)**的。原创 2024-04-25 23:05:53 · 988 阅读 · 0 评论 -
(掌握)webpack的介绍和环境搭建
比如开发过程中我们需要通过模块化的方式来开发比如也会使用一些高级的特性来加快我们的开发效率或者安全性,比如通过ES6+、TypeScript开发脚本逻辑,通过sass、less等方式来编写css样式代码比如开发过程中,我们还希望实时的监听文件的变化来并且反映到浏览器上,提高开发的效率比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化但是事实上,这三大框架的创建过程我们都是**借助于脚手架(CLI)**的。原创 2024-04-25 23:05:21 · 587 阅读 · 2 评论 -
(理解)npm发布自己的包和使用包的过程
【代码】(理解)npm发布自己的包和使用包的过程。原创 2024-04-25 23:03:00 · 282 阅读 · 1 评论