webpack学习

webpack学习笔记（1）

1、为什么选择webpack社区生态丰富配置灵活和插件话拓展官方更新迭代速度快2、初识webpackwebpack默认配置文件：webpack.config.js可以通过webpack--config指定配置文件image.png3、安装webpackwebpack依赖于nodejs，安装webpack前先安装nodejs和npmnpminstallwebpackwebpack-cli--save
wayne1125·2024-02-11 01:18

webpack学习三：webpack初始化整合配置vue，一步一步的抽离代码块整合vue。

文章目录前言一、项目完成的目录二、webpack配置vue1.main1.js，安装vue并初始用（解决报错）2.el和template区别a、区别一3.main2.js，使用SPA模式4.main3.js,抽取模板出来为一个对象5.main4.js,抽取模板对象出来为一个js文件6.将app.js封装为vue文件：组件化7.安装vue-loader时报错并解决8.总结前言开发学习中的代码已经上传
java冯坚持·2024-02-07 09:46

Webpack学习笔记（2）—入口（entry）

webpack.config.js单个入口写法用法：entry:string|Arrayconstconfig={entry:'./path/to/my/entry/file.js'//入口路径};//或constconfig={entry:{main:'./path/to/my/entry/file.js'//入口路径}};//当传入数组时//向entry属性传入「文件路径(filepath)数
lzl529·2024-02-05 16:30

【webpack学习】1、webpack打包报错：The ‘mode‘ option has not been set,错误提示如何处理？

今天在做项目使用webpack打包工具的时候，一直报各种错误。在此说明：我是window系统的，当安装好webpack后，查看提示信息，总结下遇到的一系列问题：Q1：使用webpack安装了[email protected]版本，但是输入命令webpack-v查看，版本是4.4.1的？npminstallwebpack-g//全局安装[email protected]
闫小样丶·2024-02-03 12:43

webpack学习笔记——简介及安装

一、前言什么是webpack呢？如下，一图胜千言，就是将左边的各种资源进行整合，压缩甚至是混淆等种种操作后，最后打包成右边的图示几个通用的纯粹的jscssjpgpng等。懒得理解了，就把它看成是Android中的gradle吧。image.png二、安装1.安装node.js安装webpack前，首先我们需要安装node.js，怎么安装呢？打开node.js的官网，如下选择LTS版本，下载并安装。
仰简·2024-01-26 00:26

【webpack】2. loader---动态加载css样式,文件，数据

webpack学习【webpack】1.快速入门【webpack】2.webpack核心–loader【webpack】3.将入口html也打包【webpack】4.webpack-dev-server
qq_33712668·2024-01-23 21:57

webpack学习笔记

文章目录webpack原理及概念基础使用核心概念核心配置项webpack.config.jswebpack打包html资源压缩JS和HTML代码webpack打包CSS资源提取CSS为单独文件处理CSS的兼容性开发服务器devServer配置webpackwebpack是一个模块打包器（构建工具），它的主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器使用，可以胜任转换（tr
bfbshs_ddd·2024-01-19 07:04

【webpack学习】React项目中webpack.config.js 和 webpack.base.config.js 的区别

在React项目中，通常使用Webpack作为打包工具。webpack.config.js和webpack.base.config.js两个文件在项目中的作用是不同的。1.webpack.config.jswebpack.config.js是Webpack的主要配置文件，它包含了项目的通用配置以及针对不同环境（如开发环境和生产环境）的特定配置。这个文件包含了整个Webpack配置的基本结构，包括入
周兴·2024-01-12 08:15

【webpack学习】使用webpack打包工具打包后的vendors~文件

在React框架下，使用Webpack打包工具进行项目打包时，生成的vendors文件通常是用于包含项目中使用的第三方库（dependencies）的代码的文件。这个文件的名称通常以vendors~开头，后面跟着一串哈希值，以确保文件名的唯一性。具体而言，vendors~文件包含了项目中引入的各种第三方库的代码，这样可以将这些库的代码单独打包，以便更好地利用浏览器的缓存机制。这有助于减小主应用代码
周兴·2024-01-12 08:15

【webpack学习】webpack插件之“html-webpack-plugin”

1.介绍html-webpack-plugin是一个Webpack插件，用于简化在构建过程中创建HTML文件的过程。它的作用是根据你的Webpack构建配置，在构建时自动生成一个或多个HTML文件，并将打包生成的JavaScript和CSS文件自动引入到这些HTML文件中。2.功能自动生成HTML文件：html-webpack-plugin插件能够自动生成一个包含正确引用打包后的JavaScrip
周兴·2024-01-12 08:03

webpack学习笔记

为什么要使用Webpackwebpack是一个用于现代JavaScript应用程序的静态模块打包工具。在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目。webPack可以看做是模块的打包机器：它做的事情是，分析你的项目结构，找到js模块以及其它的一些浏览器不能直接运行的拓展语言，例如：Scss，T
小白探索世界欧耶！~·2024-01-11 06:44

webpack配置入门

在开始webpack学习之前必须理解以下5个核心概念。
陆康永·2024-01-08 04:22

webpack学习记录

webpack一个网页当中的css文件及js文件比较多，这些文件我们都是通过link和script标签导入的，这样导入会导致请求次数过多在浏览器中运行的代码，我们要考虑一个兼容性问题，最好不要使用最新的语法我们的页面会有很多的css3.0的代码，这些代码也要考虑兼容性的问题同一个JS文件在不同的页面中导入了，能否导入一次之后按需加载处理以上问题，我们可以通过打包技术来解决目前来讲打包工具很多1、g
爱敲键盘的程序源·2024-01-04 11:12

Webpack学习笔记 01、Module模块系统

文章目录前言一、Module出现的原因1.1、最初引入js文件的方式(原始引入与立即调用函数表达式方式)1.2、使用Module模块系统管理(初次使用)二、Module模块方式与使用前提条件2.1、引入Module模块方式(两种)2.2、前提条件三、Module的两种导出与导入方式一：exportdefault导出与import导入(只能单个)方式二：export导出与import引入(单、多个)
长路 ㅤ   ·2023-12-28 07:15

webpack学习-7.创建库

webpack学习-7.创建库1.暴露库1.1概念1.2验证1.2.1不导出方法1.2.2导出方法2.外部化lodash3.外部化的限制4.最终步骤5.使用自己的库5.1坑6.总结1.暴露库这个模块学习有点坑
ฅQSω[*邱╭·2023-12-23 17:18

webpack学习-3.管理输出

webpack学习-3.管理输出1.简单练手2.设置HtmlWebpackPlugin3.清理/dist文件夹4.manifest5.总结1.简单练手官网的第一个预先准备，是多入口的。
ฅQSω[*邱╭·2023-12-19 10:54

webpack学习-5.代码分离

webpack学习-5.代码分离1.入口起点2.防止重复2.1入口依赖2.2SplitChunksPlugin3.动态导入3.1使用符合ECMAScript提案的import()语法3.2使用webpack
ฅQSω[*邱╭·2023-12-19 10:54

webpack学习-6.缓存

webpack学习-6.缓存1.前言2.输出文件的文件名3.提取引导模板4.模块标识符5.总结1.前言webpack会在打包后生成可部署的/dist目录，并将打包后的内容放在此目录。
ฅQSω[*邱╭·2023-12-19 10:22

webpack学习-4.开发环境

webpack学习-4.开发环境1.mode2.使用sourcemap3.自动编译代码3.1webpack的观察模式3.2使用webpack-dev-server3.3使用webpack-dev-middleware4
ฅQSω[*邱╭·2023-12-17 03:14

webpack学习常见错误——Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.

Error:vue-loaderrequires@vue/compiler-sfctobepresentinthedependencytree.将package.json中vue-loader的版本降低到14.2.4然后再使用npminstall重新加载依赖包，重新加载完成后再使用npmrunbuild运行即可
爱干饭的小徐同学·2023-12-15 21:29

webpack4.x最新入门配置详解

目录什么是webpackwebpack可以做什么学习webpack的前提webpack安装webpack学习webpack基础配置html插件样式处理将ES6，ES7等高级语法转化为浏览器可识别的ES5
神小夜·2023-12-15 10:08

webpack学习-2.管理资源

webpack学习-2.管理资源1.这章要干嘛2.加载css注意顺序！3.总结1.这章要干嘛管理资源，什么意思呢？管理什么资源？
ฅQSω[*邱╭·2023-12-07 00:19

webpack学习-1.起步

webpack学习-1.起步1.基础设置2.配置文件的引入3.总结1.基础设置首先webpack是干嘛的呢，用官网的一张图Webpack是一个现代的静态模块打包工具。
ฅQSω[*邱╭·2023-12-07 00:48

对于webpack面试题的总结

前言最近在网上看到的一些优秀的webpack的面试总结：「吐血整理」再来一打Webpack面试题浅谈webpack性能优化（内附webpack学习笔记）揭秘webpackpluginwebpack的loader
青城墨阕·2023-11-29 22:24

Webpack 工程化基础

webpack基础Wepack工程打包机Webpack基本概念WebpackDemosNode.jsDebuggerwebpack学习实践系列WebpackDevServerWebpackloader十问
坚果jimbowhy·2023-11-28 11:40

webpack学习（七）打包压缩图片

使用插件webpack-spritesmith生成雪碧图1、安装webpack-spritesmith；npminstall--save-devwebpack-spritesmith2.配置webpack.config.jsnewSpritesmithPlugin({//生成的雪碧图本身就压缩了图片大小src:{cwd:path.resolve(__dirname,'src/image/icon'
weixin_30270561·2023-11-25 12:24

webpack学习笔记--webpack解析es6

babel7.0+版本安装以下依赖基础：@babel/core:babel核心文件，它的作用是按照配置的文件进行转码。@babel/preset-env：es6转es5,但是无法转高级API如Array.from,需要再安装babel-polyfill.babel-loader扩展：@babel/plugin-proposal-class-properties：支持es6,classGoods类语
星月I随心·2023-11-14 22:00

webpack学习二（配置）

一、设置非默认配置文件在项目根目录下新建webpack.dev.config.jsconstpath=require('path');module.exports={entry:'./src/index.js',//webpack执行入口output:{path:path.resolve(__dirname,'./build'),//输出到哪里，必须是绝对路径filename:'index.js'
梦行乌托邦·2023-11-06 10:23

webpack学习（三）简单实现webpack

简单实现要实现一个简单的webpack，我们首先要理解其中的原理，目前还没看过源码，现在的理解是通过对入口文件分析，转成抽象语法树，进而可以深度遍历到所有依赖的文件，然后将文件转码成我们想要的文件，我们先来写一下我们想打包的文件//index.jsimportutilfrom'./util/util.js';console.log(util.add(1,2));//util.jsfunctiona
起飞之路·2023-11-05 01:46

webpack学习（一、入口与出口）

webpack学习（一、入口与出口）安装打包编写webpack配置文件html-webpack-plugin插件publicPath安装使用webpack，第一步先安装：初始化项目npminit-y（-
小鱼干儿er·2023-10-30 15:18

Webpack学习

webpack是一种打包工具----安装npminstallwebpackwebpack-cliwebpack-dev-server-D----webpack配置文件可命名webpack.config.js单个总的配置文件也可以拆分成3个配置文件，另建文件夹config，新建3个配置文件：webpack.common.js、webpack.dev.js、webpack.prod.js其中，webp
被风吹散的人·2023-10-27 04:38

webpack学习

一、介绍和基本使用1、webpack本身功能较少，只能处理js资源，一旦遇到css等其他资源会报错2、基本使用：创建js/count.js、js/sum.js、src/main.js//js/count.jsexportdefaultfunction(a,b){console.log(a+b);}//js/sum.jsexportdefaultfunction(...arg){returnarg.
qiaocccccc·2023-10-27 04:07

webpack学习第十六步—— 垫片Shimming

shimming低版本浏览器不支持promise，使用polyfill去实现promise就是一个垫片jquery新建jquery.ui.jsexportfunctionui(){$('body').css('background','red')}修改index.js,在其中使用jquery.ui.jsimport_from'lodash'import$from'jquery'import{ui}
Love小六六·2023-10-26 04:13

Webpack学习笔记（一）

Webpack学习笔记（一）作为一名前端，wbepack是每个前端必须掌握的技术，本人作为一个新入坑的萌新，一直想找个机会好好学习学习webpack。
gryCool·2023-10-24 18:06

【webpack学习系列06】webpack代码压缩&&自动清理构建目录

JS⽂件的压缩webpack内置了uglifyjs-webpack-plugin，自动帮我们进行代码压缩CSS⽂件的压缩使⽤optimize-css-assets-webpack-plugin,同时需要安装cssnano配置varOptimizeCssAssetsPlugin=require('optimize-css-assets-webpack-plugin');module.exports=
长歌如梦·2023-10-22 09:29

webpack学习笔记（一）安装webpack

安装时出现的问题在当前路径中安装webpack不能使用webpack-v命令，Error:Cannotfindmodule'webpack-cli/package.json'原因：和node的安装位置有关当在控制台输入webpack的时候其实运行的是node_modules\node_modules\webpack\bin\webpack.js这个文件，他会根据是否安装有webpack-cli或者
Paranoia_yy·2023-10-20 11:05

【Webpack5】Webpack学习笔记(一)

Webpack基础Webpack前言1.Webpack使用2.配置项2.1entry(入口)2.1.1单入口写法2.1.2对象语法2.1.2.1描述入口的对象2.1.3常见场景配置2.1.3.1分离app(应用程序)和vendor(第三方库)入口2.1.3.2多页面应用程序2.3output(输出)2.3.1有多个入口2.3.2高级进阶2.4loader（加载器）2.4.1使用loader2.4.
秦哈哈·2023-10-20 11:33

webpack学习 4 - 进阶优化

SourceMapSourceMap(源代码映射)是一个用来生成源代码与构建后代码一一映射的文件的方案。使用后会生成xxx.map文件，里面包含源代码与构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过xxx.map文件，从构建后代码出错的位置找到映射后源代码的出错位置，这样浏览器就能提示源代码文件的出错位置，让我们能够在开发调试时快速的定位到错误的原因。sourceMap的值有很多种
HEY_439·2023-10-12 00:15

【前端学习记录】webpack学习之mini-css-extract-plugin插件

前言最近在学习尚硅谷的webpack5课程，看到mini-css-extract-plugin这个插件的时候，感觉很有帮助，之前都没有在css这方面深入思考过，课程中的一些记录写在下面为什么需要优化CSSCss文件目前被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式（先去加载js文件，再去创建style标签来生成样式）这样对于网站来说，会出现闪屏现象，用户体验不好（控制台n
Note_creek·2023-10-09 22:57

webpack学习第十二步——代码分割

打包命令为了development模式下也能很好观察打包的文件，我们在package.json中增加一个打包命令，不使用devServer"scripts":{"dev":"webpack--config./config/webpack.dev.js","start":"webpack-dev-server--config./config/webpack.dev.js","build":"webp
Love小六六·2023-10-08 20:22

webpack学习笔记

什么是webpack?webpack是一个模块管理工具，用webpack可以管理模块依赖，并编译模块所需的静态文件。它可以很好的管理打包开发中用到的html、css、js以及静态文件（图片，字体），使开发更有效率。webpack对不同的类型资源，有对应的模块加载器（loader）。webpack模块打包器会分析模块间的依赖关系，最后生成优化且合并后的静态资源。webpack是以CommonJs规范
isSunny·2023-10-08 12:58

webpack学习（十四）：生产环境搭建

demo地址:https://github.com/Lkkkkkkg/webpack-demo继上一次配置完react的热替换:https://blog.csdn.net/qq593249106/article/details/84947301当前webpack.config.js目前使用的webpack配置文件包含了生产模式和开发模式,webpack.config.jsconstpath=req
Lkkkkkkg·2023-10-07 04:02

15-webpack学习-使用resolve设置解析路径

项目结构webpackResolve│package-lock.json│package.json│webpack.config.js└─assets│index.css└─static│icon.png└─srcindex.js安装依赖在webpackResolve目录下运行npmiwebpackwebpack-clihtml-webpack-plugincss-loaderstyle-load
纯黑色山羊·2023-09-29 22:19

webpack学习3

提取css成单独文件之前在处理css文件的时候，我们是通过使用css-loader和style-loader，使得相关样式得以插入到style标签中。现在的需求是将css单独提取成为一个文件，具体的操作如下：下载相关插件：npminstall--save-devmini-css-extract-pluginwebpack.config.js的配置如下：const{resolve}=require(
HEY_439·2023-09-21 04:05

Vue3+TypeScript从入门到进阶（四）——Vue3基础知识点（中）——附沿途学习案例及项目实战代码

文章目录一、简介二、Vue2和Vue3区别三、Vue知识点学习1、v-model2、组件化开发六、Webpack和VueCLI学习1、Webpack学习2、Webpack中的Vue3、VueCLI4、Vite
wuyxinu·2023-09-20 21:20

webpack学习

webpack学习简述webpack是一个静态资源打包工具，它会以一个或多个文件作为打包的入口，将我们整个项目的文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，可以运行在浏览器中。
Mr.Meng_95·2023-09-18 23:34

webpack、vue.config.js

一、webpack学习简述webpack是一个静态资源打包工具，它会以一个或多个文件作为打包的入口，将我们整个项目的文件编译组合成一个或多个文件输出出去。
Mr.Meng_95·2023-09-18 23:02

webpack学习（二）高级用法

webpack进阶treeshaking作用是在打包时只引入我们依赖的代码，只能作用于import这种静态引入的代码。我们在package.json文件中，加入"sideEffects":false这样可以告知对所有文件开启treeshaking，如果有些文件我们不想使用treeshaking我们可以传入一个数组来忽略这些文件，如果想删除代码我们只需要将mode改为production会自动帮我们
起飞之路·2023-09-12 07:37

webpack起步（1）

编译，打包，处理css,处理less,处理图片，启动日志显示，html打包规则webpack学习记录
最爱是荔枝·2023-09-09 09:21

webpack学习笔记—webpack安装、基本配置

文章结构：什么是webpack？安装webpackwebpack基本配置一、什么是webpack？在学习react时发现大部分文章都是react和webpack结合使用的，所以在学react之前先学习下webpack。前端有一系列的构建工具，如grunt、gulp都是，具体区别联系不做详述。Webpack：是一个解决模块的定义、依赖和导出工具，目的就是把有依赖关系的各种文件（HTML，CSS，JS
weixin_30340745·2023-09-02 15:37
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他