标签: Webpack

Webpack4从0搭建组件库的实现

代码分离代码分离方法有三种:入口起点:使用entry配置手动地分离代码。防止重复:使用SplitChunksPlugin去重和分离chunk。动态导入:通过模块中的内联函数调用来分离代码。动态导入(dynamicimports)import()require.ensure预取/预加载模块(prefe...

JavaScript 2021-04-12 130 0 0 阅读全文

IDEA打包普通Web项目操作

背景:因为普通的web项目无法用maven命令进行打包,所以怎样打成war包发布呢?1.进入项目的结构配置在【ProjectStructure】中选择左侧的【Artifacts】页签,点击中间上面的,选择【WebApplication:Archive】->【Empty】2.添加war包的配置点...

Java 2021-05-18 140 0 0 阅读全文

SpringBoot中配置Web静态资源路径的方法

准备工作:通过Idea创建一个SpringBoot-web项目,此过程不做赘述,创建完成后项目结构如下图:1-创建一个controller代码如下:packagecom.example.webpractice.controller;importorg.springframework.stereoty...

Java 2021-05-18 144 0 0 阅读全文

Vant-Ui框架的一个Bug(解决切换后Onload不触发)

前几天做的项目里有用到下拉刷新。使用了vant-ui里的List列表瀑布流滚动加载,用于控制长列表的展示先说使用1.用npm下载该模块包npmivant-S2.引入组件官方提供了三种方法。(我使用了第三种,全局引入方法)方式一.使用babel-plugin-import(推荐)babel-plugi...

JavaScript 2021-04-14 171 0 0 阅读全文

浅谈Vue Static 静态资源路径 和 Style问题

我就废话不多说了,大家还是直接看代码吧~//PathsassetsRoot:path.resolve(__dirname,'../dist'),//静态资源输出到二级目录下assetsSubDirectory:'static',//静态资源cdn地址assetsPublicPath:'/',引用的时...

JavaScript 2021-04-14 131 0 0 阅读全文

Vue 修改网站图标的方法

1、在stateic下新增favicon.ico文件2、修改index.html文件,如图网站名称3、如果有新开页面无法显示图标问题,修改bulid下的webpack.dev.conf.js文件newHtmlWebpackPlugin({filename:'index.html',template:...

JavaScript 2021-04-06 147 0 0 阅读全文

详解Webpack的文件监听实现(热更新)

⽂件监听是在源码发⽣变化时,⾃动重新构建出新的输出文件。webpack开启监听模式,有两种方式:启动webpack命令时,带上--watch参数。唯一缺点:需要手动刷新才能看到变化;在配置webpack.config.js中设置watch:true。优点:(1)WDS不刷新浏览器(2)WDS不输出文...

JavaScript 2021-05-19 171 0 0 阅读全文

教你使用Webpack打包编译TypeScript代码

TypeScript打包webpack整合通常情况下,实际开发中我们都需要使用构建工具对代码进行打包;TS同样也可以结合构建工具一起使用,下边以webpack为例介绍一下如何结合构建工具使用TS;步骤如下:初始化项目进入项目根目录,执行命令npminit-y,创建package.json文件下载构建...

JavaScript 2021-06-29 143 0 0 阅读全文

Webpack3.0升级4.0教程

1.webpack3.11升级4.26为了提升打包效率,在webpack3.11基础之上做了升级,webpack4.0发布以来,零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化,如果在项目开始使用4.0而不用vue-cli的默认配置,遇到的问题或许能少一些。2.安装/升级依赖...

JavaScript 2021-06-29 125 0 0 阅读全文

详解Webpack打包Vue项目之后生成的Dist文件该怎么启动运行

亲测,webpack打包vue项目之后生成的dist文件可以部署到express服务器上运行。我的vue项目结构如下:1.进入该vue项目目录,打开gitbash,执行:npmrunbuild(在package.json的scripts配置)执行成功如下图所示:然后此时你会发现项目下多了一个dist...

JavaScript 2021-04-27 130 0 0 阅读全文

Webpack文件打包错误异常

在进行webpack打包前我们要确保已完成的工作:1)安装webpack:推荐全局命令npminstall-gwebpack查看webpack版本webpack-v2)此时对文件进行打包可能出现错误,提示脚手架文件错误,因为在webpack4的版本里,CLI被单独分离出来了所以要我们单独安装执行全局...

JavaScript 2021-07-23 124 0 0 阅读全文

解决Java Web应用线上系统偶发宕机的情况

:事情是酱紫的,系统上线两个月后,风平浪静。在一个秋天宁静的下午,老衲正喝着茶听着歌敲着代码,顺便欣赏下妹纸,独享这难得的惬意。突然手机响了,一看来电,心中一沉,项目经理来电,必有蹊跷。匆忙接起电话,没有问候,直奔主题,“赶紧看下系统,个别客户反馈系统不能用了,先恢复系统,再排查问题”。老衲撂下电话...

Java 2021-05-19 134 0 0 阅读全文

Webpack学习笔记-2-File-Loader 和 Url-Loader

1.如果我们希望在页面引入图片(包括img的src和background的url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。其中一个就是引用路径的问题。拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的ur...

JavaScript 2021-07-24 122 0 0 阅读全文

IDEA2020.1.2创建Web项目配置Tomcat的详细教程

本文章是一篇IDEA创建web项目配置Tomcat的整合文章,并非原创,原文链接https://blog.csdn.net/qq_45738810/article/details/107842532https://www.cnblogs.com/shindo/p/7272646.html作为初学者,...

Java 2021-05-19 172 0 0 阅读全文

利用Node.Js开发Cli的完整步骤

CLI介绍命令行界面(英语:command-lineinterface,缩写:CLI),是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。目前前端开发中,CLI是常用的工具。前端三大框架Vue、React、Angular都有对应...

JavaScript 2021-04-07 157 0 0 阅读全文

Python 使用Tensorflow训练BP神经网络实现鸢尾花分类

使用软件Python3.8,Tensorflow2.0问题描述鸢尾花主要分为狗尾草鸢尾(0)、杂色鸢尾(1)、弗吉尼亚鸢尾(2)。人们发现通过计算鸢尾花的花萼长、花萼宽、花瓣长、花瓣宽可以将鸢尾花分类。所以只要给出足够多的鸢尾花花萼、花瓣数据,以及对应种类,使用合适的神经网络训练,就可以实现鸢尾花分...

Python 2021-05-12 172 0 0 阅读全文

Webpack3升级到Webpack4遇到问题总结

最近由于项目需要,需要对已有的两个vue项目进行webpack3升级到webpack4,此处记录一下整个升级过程的几个重要步骤,以及遇到的问题和解决方案。1、更新webpack以及相关联插件,webpack4新增插件webpack-clinpmi-Dwebpackwebpack-cliwebpack...

JavaScript 2021-04-29 160 0 0 阅读全文

Vue使用Require.Context实现动态注册路由

需求场景:在日常的功能练习和调试过程中,需要一个demo项目进行功能测试,由于频繁.vue页面的同时,又要再router.js文件里面注册路由,感觉有点无聊和枯燥。基于此出发点,考虑能否自动读取文件夹下的文件进行路由注册。借鉴思路:参考vue的功能基础组件的自动化全局注册,看到一个require.c...

JavaScript 2021-04-06 150 0 0 阅读全文

Webpack中PublicPath使用详解

最近自己在搭建一个基于webpack的react项目,遇到关于output.publicPath和webpack-dev-server中publicPath的问题,而官方文档对它们的描述也不是很清楚,所以自己研究了下并写下本文记录。outputoutput选项指定webpack输出的位置,其中比较重...

JavaScript 2021-06-25 150 0 0 阅读全文

浅析Vue-Cli3配置Webpack-Bundle-Analyzer插件【推荐】

为优化vue项目性能,需要使用webpack-bundle-analyzer分析报文件,找出最占用空间的插件有哪些,对应做出优化网上看了一些网站,有的写的太麻烦了,现将最简单的一种写出来供大家参考安装:npminstallwebpack-bundle-analyzer--save-devvue.co...

JavaScript 2021-04-30 155 0 0 阅读全文