webpack
文章平均质量分 68
webpack相关
笑道三千
我今年两岁半了,学编程还来不来得及????
展开
-
webpack5配置代码分包
打包出来的文件,第三方依赖库打包成一个js太大了,导致首屏加载比较慢。想要做到的是抽离出几个比较大的依赖,单独作为包。这样之后,首屏加载就可以并行下载这些依赖。原创 2022-10-20 16:02:10 · 1370 阅读 · 0 评论 -
webpack5配置portfinder支持端口多开
有时本地运行多个项目时,80端口已经被使用,这时候npmrundev,如果没有检测可用端口的功能,就会报错”端口已被占用"。为了解决这一个问题,需要在运行项目之前,扫描端口,取得一个可用的端口,来进行项目的运行。...原创 2022-08-02 11:10:59 · 1482 阅读 · 0 评论 -
库开发者如何配置babel,@babel/plugin-transform-runtime的配置说明
本文主要讲解@babel/plugin-transform-runtime以及@babel/runtime的作用在上一篇文章中,已经体现出了它的第一个作用,就是把babel语法转化过程中的辅助函数删除,然后使用@babel/runtime库中的辅助函数引入的方式使用。其实它还有其他作用,以下三点是它的主要作用:作用2和3其实是在做API转换,对内置对象进行重命名,以防止污染全局环境。在上一节,我们引入’babel-polyfill’或’core-js/stable与regenerator-runtime/原创 2022-06-05 18:16:03 · 1864 阅读 · 0 评论 -
webpack5是如何使用babel转化代码的(1)-业务开发时的babel配置
使用webpack5打包vue3的babel测试初始化项目安装webpack相关依赖新建src文件夹,并写上代码新建config文件夹,并新建webpack.config.js文件在package.json的script中添加命令安装html插件新建public文件夹并创建index.html文件:配置webpack:二,测试es6的代码打包情况然后 运行npm run build,查看打包出来的文件:可以看到,es6的代码并没有转化成es5。这时候就需要引入babel。Babel是一个原创 2022-06-05 17:23:43 · 1699 阅读 · 0 评论 -
webpack5代码分离
之前写的文章在这里:https://blog.csdn.net/weixin_42349568/article/details/122797185本文参考链接:https://juejin.cn/post/7006650476158517256#heading-3一,实际开发的使用主要就是上文中的第四步,动态导入。二,默认配置Webpack 提供了代码分离的特性,默认是将 异步代码 按照以下方式进行代码分离的:module.exports = { //... optimization:原创 2022-05-23 16:43:18 · 390 阅读 · 0 评论 -
webpack5图片压缩-image-webpack-loader插件
一,常规webpack打包的配置我们通常会设置大图片打包出来,小图片转成base64的形式进行webpack进行打包。具体设置见这篇文章的第七节:https://blog.csdn.net/weixin_42349568/article/details/124370794现在有个项目就是这样配置的,想要先将图片进行压缩,然后再执行这个打包策略。二,安装image-webpack-loader这个插件不能用npm库安装,而必须使用cnpm安装npm install cnpm -g --regis原创 2022-05-18 16:28:51 · 3555 阅读 · 2 评论 -
前端项目架构模板-(三)交互式打包及自动化部署前端项目
这几篇文章是一个系列的。之前的文章在这里:1,第一节:搭建基础的webpack项目:https://blog.csdn.net/weixin_42349568/article/details/124370794?spm=1001.2014.3001.55022,第二节:在项目中引入eslint+prittier+husky:https://blog.csdn.net/weixin_42349568/article/details/124372963?spm=1001.2014.3001.5502本文是原创 2022-04-26 00:47:17 · 550 阅读 · 0 评论 -
webpack5+vue3搭建h5项目模板-(二)-eslint代码规范化
本文接上一节:https://blog.csdn.net/weixin_42349568/article/details/124370794?spm=1001.2014.3001.5501一,eslint第一步:安装eslintnpm install eslint --save-dev第二步:生成.eslintrc.js文件:npx eslint --initmodule.exports = { env: { browser: true, es2021: true,原创 2022-04-23 23:41:24 · 2432 阅读 · 0 评论 -
webpack5+vue3搭建h5项目模板-(一)-基础配置
一,概述本文主要是使用webpack5+vue3+vw适配+axios+vue-router+vuex+vant搭建一个基础的h5项目结构。其中每一节都是独立的配置,想要webpack搭配其他的也可以参考下。至于项目的代码,放在本文最后面,不想看的可以直接下载使用。为了自己后续搭建h5项目能有个干净的项目框架直接使用,而不是每次都得重新搭建。每一个步骤都是我实践过的,其中存在的一些注意点和原理,我也会简单提及,算是学习实践的一篇笔记吧。二,初始化项目第一步:初始化package.jsonnpm i原创 2022-04-23 21:35:31 · 4343 阅读 · 9 评论 -
webpack5热更新失效,且只有css修改后失效?
其他webpack5热更新失效的解决:https://segmentfault.com/a/1190000041684579,但是我不是这原因。一,现象 "webpack": "^5.72.0", "webpack-cli": "^4.9.2",在开启热更新之后。开发环境npm run dev运行项目后,修改js和html后保存代码。页面正常自动更新。但是修改css保存后就会出问题,页面的css样式消失了,并且报错:二,解决打包的css输出路径名字不能有这个哈希值? new M原创 2022-04-20 00:33:16 · 2136 阅读 · 3 评论 -
webpack5学习与实战-(十三)-postcss处理css3兼容性前缀
一,概述postcss是一个用js工具和插件转换css代码的工具。比如说可以使用Autoprefixer插件自动获取浏览器流行度和能够支持的属性,并且根据这些数据帮助我们自动地为css规则添加前缀,将最新的css语法转化成大多数浏览器能够理解的语法。二,具体的应用第一步,安装依赖npm i mini-css-extract-plugin css-loader postcss-loader -D这里需要解释一下,mini-css-extract-plugin插件是替换style-loader插件原创 2022-04-09 16:50:14 · 1232 阅读 · 0 评论 -
webpack5学习与实战-(十二)-webpack模块与解析原理
一,在webpack中何为模块当我们在代码中引入使用的这些东西,都可以成为webpack的模块。二,模块的引入webpack能够解析三种常见的模块引入方法。1,相对路径2,绝对路径绝对路径就是从项目的根目录开始的。这个"/"就是指代的项目根目录:3,第三方模块的引入import _ from "lodash";console.log("---", _.join(["webpack", "module"], "-"));webpack会自动从node_module中识别并引入对应的原创 2022-04-07 00:00:47 · 1173 阅读 · 0 评论 -
webpack5学习与实战-(十一)-devServer
devServer: { // 任意的 404 响应都被替代为 index.html // 基于node connect-history-api-fallback包实现,主要应用于history路由刷新页面404的场景 historyApiFallback: true, compress: true,//为响应增加gzip压缩 // 在所有响应中添加首部内容 headers: { "X-Custom-Foo": "test-header" .原创 2022-04-05 12:06:46 · 2090 阅读 · 0 评论 -
webpack5学习与实战-(十)-source_map
一,source_map存在的意义之前我们使用webpack打包,写代码的时候,我们是写在ide中,这是打包前的文件。而打包之后。会变成bunder.js。代码会被混淆掉。这对我们开发时代码错误后定位错误不利,因为这时候定位到的是打包后的代码bundle.js的错误。这对我们来说并没有啥意义。所以我们需要一个映射。从bundle.js把错误映射到原始代码上。于是就有了这个source_map二,source_map的常见配置官网上的几种值:https://www.webpackjs.com/c原创 2022-04-05 00:36:03 · 2173 阅读 · 0 评论 -
webpack5学习与实战-(九)-区分开发和生产环境的配置
一,公共路径output.publicPath这个地默认值是:’’,也就是说webpack打包出来地html文件中,会以这个为基准,链接资源。它的写法有三种情况:1,写的是http这种带协议的完整路径,就是CDN,链接互联网资源2,写的是相对于服务的 URL,例如"/assets/"3,最常见的及默认的“”,都是相对于index.html的相对地址 output: { publicPath: "https://cdn.example.com/assets/", // CDN(总是 HT原创 2022-02-27 00:54:49 · 1238 阅读 · 3 评论 -
webpack5学习与实战-(八)-配置打包后的文件名
一,打包生成不同的文件名为了避免浏览器缓存被命中,可以让打包出来的文件名不一样: output: { path: path.resolve(__dirname, "dist"), //设置打包的出口,需要是绝对路径,而__dirname是node的一个全局变量,记录当前文件的绝对路径 filename: "[name]_[contenthash]_bundle.js", //设置打包出来的js的文件名 clean: true, //清除上次打包出来的文件 assetMod原创 2022-02-24 00:29:29 · 3487 阅读 · 0 评论 -
webpack5学习与实战-(七)-代码分离
到目前为止,我们打包出来的文件,只有一个bundle.js这么一个js文件。那么如果项目大了,这个js则会变得非常大!这会导致首屏加载的时间变得非常长。而其中很多代码并不是立马就需要使用的,这样直接全部引入很浪费资源。所以我们可以让它代码分离,按需引入。一,代码分离的方法概述第一种:手动配置entry文件设置多个入口文件,但是这种方法有个问题,当多个入口文件有共享的代码,这些共享德 代码则会被重复打包。第二种方法:入口进行配置在入口进行配置,使用Entry dependencies或者Split原创 2022-02-16 00:15:12 · 612 阅读 · 0 评论 -
webpack5学习与实战-(六)-babel-loader解析js文件
在之前,使用css-loader来解析过css文件。那babel-loader则是用来解析js文件的。这是因为js的版本一直在更新,不断引入新的写法,但是浏览器的更新滞后,有些浏览器还不支持。所以就需要用babel-loader来进行转化成浏览器支持的写法。一,不使用babel-loader的时候我们在代码中写:function getString(){ return new Promise((resolve,reject)=>{ setTimeout(()=>{原创 2022-02-06 12:34:00 · 1384 阅读 · 0 评论 -
webpack5学习与实战-(五)-直接加载资源
在之前的文章中,我们说过,使用webpack内置的asset module可以加载任何资源。那是我们通过import把那些资源当作模块来引入处理的。更多的时候,我们会在代码比如css中直接引入资源。例如css中的background:url(’./img/test.png’)一,加载图片资源.test{ background: url('./assets/boy.png');}当我这张图片是png的时候,它就会采用我之前在asset module中配置的策略,将其作为单文件处理,输出ur原创 2022-02-05 21:44:07 · 971 阅读 · 0 评论 -
webpack5学习与实战-(四)-loader
一,什么是loaderwebpack不仅仅使用内置的资源模块可以引入任何资源,上一篇文章的四种仅仅是资源的类型输出的定义。除此之外,webpack只能解析js和json这样的代码。还不能理解css之类的代码,这时候,就需要loader提供一个解析的功能,先将这些文件转化成为有效的、webpack能够理解的模块。然后才能进行打包。二,解析css的loader1,未配置,直接引用时会报错:2,安装css-loadernpm install css-loader -D然后在资源模块中配置,遇到cs原创 2022-02-03 23:49:44 · 711 阅读 · 0 评论 -
webpack5学习与实战-(三)-引入其他资源模块
一,什么是资源模块webpack除了引入js之外,还可以使用内置的资源模块(叫做assets modules),来引入任何的其他类型的资源。webpack5 之前我们处理静态资源比如。图片字体之类的资源的时候等,需要用到url-loader,file-loader,raw-loader,webpack5则放弃了这三个loader,这三个loader在github上也停止了更新。webpack5使用四种新增的资源模块(Asset Modules)替代了这些loader的功能。asset/resour原创 2022-02-03 17:09:43 · 1341 阅读 · 0 评论 -
webpack5学习与实战-(二)-plugin的概念和开发环境
一,webpack插件作用实际上webpack实现的功能并不全是主包的,可以说主包只是提供了一个平台。真正完成一个项目的资源打包编译的,还是众多的webpack插件:二,插件的分类官网地址:https://webpack.js.org/plugins/总共分为三类:1,社区的插件2,webpack内置的插件3,第三方插件二,使用webpack插件自动引入资源html-webpack-plugin在第一节中,我们使用webpack打包出一个总的js文件。在index.html中是采用手原创 2022-01-24 00:01:08 · 565 阅读 · 0 评论 -
webpack5学习与实战-(一)-webpack的初步认识
一,webpack的安装npm install webpack webpack-cli --global其中,webpack是主包,而webpack-cli使得我们等够使用命令行执行webpack命令。–global全局安装。当然,做项目时,为了保证该项目在每个成员的电脑上运行环境一致,还是推荐工作目录安装。1,切换到工作目录下2,npm init -y 初始化项目配置,会生成一个package.json文件夹。3,npm install webpack webpack-cli -D 这是开发原创 2022-01-19 23:51:57 · 586 阅读 · 0 评论 -
vue项目history路由的配置
一,前端配置import { createRouter, createWebHistory } from 'vue-router';const hash = createWebHistory();const router = createRouter({ history: hash, // base: "/cd/", routes: [...]})二,npm run build的页面直接打开的话,只能打开index.html,然后刷新浏览器或者访问哪个页面时,就会报404了。官网原原创 2021-12-05 22:46:16 · 1249 阅读 · 0 评论 -
copyWebpackPlugin的使用及常见问题(glob及Path ............... is not in cwd)
copyWebpackPlugin的使用及常见问题(glob及Path … is not in cwd)一,概述有一些静态资源文件。不通过webpack打包。而是手动复制到打包文件里面。这时候,就需要利用这个plugin来帮助我们自动复制。二,安装npm install --save-dev copy-webpack-plugin三,官网https://www.npmjs.com/package/copy-webpack-plugin四,具体的使用假设我想要把public中的favico原创 2021-12-05 12:22:10 · 6171 阅读 · 1 评论 -
webpack5配置dev-server在控制台打印信息
一,设置前:二,设置内容在devServer中添加: devServer: { client: { logging: 'error',//只打印报错,其实只要这个配置就好了 overlay: { //有报错发生,直接覆盖浏览器视窗,显示错误 errors: true, warnings: false, }, }, }原创 2021-12-03 00:07:29 · 3091 阅读 · 1 评论 -
vue项目部署的一些配置和流程
一,利用process.env配置baseurl这个配置的原理可以看之前的这篇博客:https://blog.csdn.net/weixin_42349568/article/details/114274489二,本项目中区分开发,测试生产环境的配置对应的文件:1,.envVUE_APP_testName = '无论开发还是生产环境都会执行的内容'2,.env.developmentVUE_APP_testName = '开发环境下的base_url'#当npm run serve的时原创 2021-03-21 00:23:15 · 2095 阅读 · 0 评论 -
区分开发环境、测试环境、生产环境不同访问地址的配置系列--(二)了解.env .env.development .env.production
一,三者的区别通常情况下。我们会在根目录下创建.env .env.development .env.production的三个文件: .env 无论开发环境还是生产环境都会加载的配置文件 .env.development 开发环境加载的配置文件 .env.production 生产环境加载的配置文件二,环境变量的简单使用示例。需要注意,配置文件里的属性名必须以VUE_APP_开头,.env文件内容:VUE_APP_testName = '无论开发还是生产环境都会执行的内容'原创 2021-03-02 00:51:58 · 2548 阅读 · 0 评论 -
电商项目的app学习笔记(一)---webpack相关配置
现在基本上都使用vue/cli3.x来构建项目,相比于vue2.x,build和config等目录不再有,而是将大部分配置都集成到vue.config.js里面了:关键点就是这个vue.config.js文件,之前的自定义webpack放到这里来了。vue-cli帮我们做了默认的基本配置。所以没有这个文件的话,就会使用默认配置进行打包。但是如果你有需要对打包的配置进修修改或者添加配置,就需要自行在根目录下创建这个文件,然后填写对应的打包配置vue.config.js 是一个可选的配置文件,如果项目的原创 2020-11-17 23:03:04 · 138 阅读 · 0 评论 -
webpack学习笔记
一,webpack的产生1,分工的演变随着前端的发展,前端开发人员不仅仅是书写静态界面和静态界面上的js动画,还需要进行业务逻辑的处理。随着前端业务的越来越复杂,文件越来越多。所以需要打包处理这些文件。2,框架的演变它们的文件都无法直接在浏览器上运行,需要进行转化构建。所以也需要有webpack的出现3,语言的发展4,环境的变化早期的前端页面只需要在浏览器上运行,现在呢?需要跑在服务端,移动端等。也需要很多的构建。5,社区的变化依赖越来越多,也需要依赖。6,工具的变化原创 2020-11-15 16:32:10 · 94 阅读 · 0 评论 -
vue+webpack实现一个todolist
一,webpack 的基本配置地址:https://gitee.com/ling-xu/vue-webpack/tree/master/分支:init第一步:项目的初始化安装vue和webpacknpm install webpack webpack-cli -Dnpm install vue vue-loadernpm install css-loader安装相关的依赖: npm install postcss第二步:新建app.vue文件但是,它作为vue的一个组件,它是原创 2020-11-15 12:52:14 · 178 阅读 · 0 评论 -
vue项目中打包的相关配置问题
一,vue项目的webpack配置文档地址:https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE现在我们用的基本上是vue-cli3,它创建的vue项目,不再有build文件夹,也不会有config文件夹,更不会有webpack.config.json文件。那我们去哪里进行项目的打包配置呢??vue-cli是基于webpack的,所以这部分的知识还是用的上的。当一个vue项目初始化完成后。生成的目录如下原创 2020-10-29 22:09:36 · 484 阅读 · 0 评论 -
webpack学习
注:本文是学习笔记,学习的内容来自于微信公众号:"前端js动力节点"一,webpack的产生和作用1,模块化很早以前,js是没有什么规范可言的,大家都是无组织无纪律的乱写,大段大段的复制粘贴现象很常见,反正只要能达到目的就ok,因此js也沦为不入流的语言,为人所不齿;然而随着富客户端的出现,大家发现散兵游勇式的乱写是不行了,得学人家正规军的做法(尤其是java),于是requirejs跟seajs横空出世了。二者皆出有一套解决方案,可以让js变得有组织有纪律,这就是模块化方案。equirejs是老原创 2020-10-15 21:33:43 · 303 阅读 · 0 评论 -
(黑马教程)-webpack学习笔记
一,webpack的初步认识在我们写代码的时候,刚开始会在html文件中引入很多相关的资源,js文件啦,图片啦,less文件啦一系列的。但是有些文件是不能直接执行的,比如less文件就需要转化为css文件才可以执行,而一些引用jq的js文件也需要一些工具处理之后才可以执行。在这之前,我们都是自己利用小工具去完成文件的预编译转化成可以执行的文件,但是这样生成的文件又多,处理又麻烦。于是懒惰而又聪明的程序员宝宝们就把这些工具集合在一起啦,形成了webpack这个静态模块打包器。换句话说:在webpa原创 2020-09-01 17:49:17 · 797 阅读 · 0 评论