文章 2023-06-01 来自:开发者社区

前端学习笔记202303学习笔记第三天-Vue3.0-webpack访问自动打包生成的文件1

前端学习笔记202303学习笔记第三天-Vue3.0-webpack访问自动打包生成的文件1

前端学习笔记202303学习笔记第三天-Vue3.0-webpack访问自动打包生成的文件1
文章 2023-05-30 来自:开发者社区

webpack分环境打包(生产/开发两套打包)

您好,如果喜欢我的文章,可以关注我的公众号「量子前端」,将不定期关注推送前端好文~ 前言 在实际开发中,开发环境和生产环境的配置有很多是相同的,例如都会配置相同的entry。考虑到代码的复用性和可维护性,我们通常要把相同的配置提取出来,以供开发环境和生产环境来使用。 采用环境变量 可能用的比较多的(一些配置量较少的场景)会采用环境变量判断,定义不同环境变量下不同的loaders、plug...

webpack分环境打包(生产/开发两套打包)
文章 2023-05-17 来自:开发者社区

【前端】性能优化——webpack 打包压缩

今天偶然发现,打开自己的博客网站时特别慢,可以看到其中一个js下载了11s才下载完,有2.6MB(这还是nginx做了gzip压缩之后的大小),nginx压缩前的大小如下:可以看到这个js竟然高达10MB,才想起来,我忘记做webpack的打包压缩了。OK,优化走起:一、下载压缩相关的库# js 压缩 npm install uglifyjs-webpack-plugin --save-dev ....

【前端】性能优化——webpack 打包压缩
文章 2023-05-04 来自:开发者社区

webpack打包报错怎么办? 往死里问ChatGPT

牙叔教程 简单易懂图片里只是报错的一部分, 报错太多了, 没有ChatGPT的话, 估计我得花一个星期才能解决怎么问直接把所有的报错信息都复制给ChatGPT, 我去打印一下报错字符串的长度console.log(s.length);  //42144000多字符, 小意思, 我用的可是 ChatGPT4直接复制全部的报错信息, 发送给ChatGPT4, 这是ChatGPT4给我的回复....

webpack打包报错怎么办? 往死里问ChatGPT
文章 2023-04-20 来自:开发者社区

工程化之webpack打包过程

人之所以不快乐,主要是缘于过去和未来:为过去耿耿于怀,为未来惴惴不安大家好,我是柒八九。在前期,我们开了一个关于前端工程化的系列文章。已经从概念介绍何为脚手架SourceMap 的常规概念在Webpack 中针对SourceMap的配置构建工具构建解决的问题包管理工具模块化常见方式等角度进行了一些常规概念的介绍和梳理。而今天,我们选择了一个在前端范围内,占很大比重的构建工具--Webpack。近....

工程化之webpack打包过程
文章 2023-04-20 来自:开发者社区

Vue——10 - webpack打包保姆级教程01

一、webpack打包JS文件 注意:一定要先下载Node.js,webpack 必须在 NodeJS 下运行如未下载则可从Vue——安装@vue/cli(Vue脚手架)的三种方式 进行查看并下载首先呢先随便选个盘创建一个文件夹为webpack(名字可以自己定义),在文件夹中添加两个新文件夹scr以及dist按住win+r输入cmd调出控制台,输入正确路径 然后进行初始化:npm init然后一....

Vue——10 - webpack打包保姆级教程01
文章 2023-04-14 来自:开发者社区

webpack打包优化之moment语言包优化moment-locales-webpack-plugin

【摘抄自中文官网】默认情况下,webpack 会打包所有的 Moment.js 语言环境(在 Moment.js 2.18.1 中,最小为 160 KB)。若要剥离不必要的语言环境且仅打包使用的语言环境,则添加 moment-locales-webpack-plugin文档https://www.npmjs.com/package/moment-locales-webpack-pluginhtt....

文章 2023-04-13 来自:开发者社区

webpack打包优化之外部扩展(Externals)配置

基本使用webpack可以使用externals配置,将某些模块不打包到输出文件中,从而使用用CDN引入外部模块这样操作下来,不仅可以提高打包速度,还能优化网页加载性能。index.html<script src="https://code.jquery.com/jquery-3.1.0.js"></script>打开控制台,输入jQuery 可以看到是一个函数了web.....

webpack打包优化之外部扩展(Externals)配置
文章 2023-02-25 来自:开发者社区

【TypeScript教程】# 6:使用webpack打包ts代码

说明尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。初始化项目npm init -y安装相应的依赖npm i -D webpack webpack-cli typescript ts-loader添加 tsconfig.json 配置新建 tsconfig.json 文件{ "compilerOptions": { "target": "es2015", ...

【TypeScript教程】# 6:使用webpack打包ts代码
文章 2023-02-23 来自:开发者社区

Webpack打包

安装webpack执行如下命令npm install webpack webpack-cli配置webpack项目根目录中创建 webpack.config.js 配置文件:配置入口entry(所需打包的文件路径)配置出口output(1)path指文件打包后的存放路径(2)path.resolve()方法将路径或路径片段的序列处理成绝对路径(3)__dirname 表示当前文件所在的目录的绝对....

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

开发与运维

集结各类场景实战经验,助你开发运维畅行无忧

+关注