webpack打包问题
打包过程中发现总是package.json里面的版本导致打包失败，npm的时候怎么才能找到合适的版本吗,难道只能打包错误的时候再一个个试版本吗{ "name": "lesson", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-s...
2024-02-20
webpack 打包图片的问题
webpack配置文件const path=require("path");module.exports={ entry:"./src/main.js", output:{ path:path.resolve(__dirname,"./build"), filename:"bundle.js" }, module:{ ...
2024-03-09
webpack文件打包错误异常
在进行webpack打包前我们要确保已完成的工作：1）安装webpack：推荐全局命令 npm install -g webpack 查看webpack版本 webpack -v2）此时对文件进行打包可能出现错误，提示脚手架文件错误，因为在webpack4的版本里，CLI被单独分离出来了所以要我们单独安装 执行全局命令 npm install -g webpack-cli 安装完脚手架，按理...
2024-01-10
浅谈webpack组织模块的原理
现在前端用Webpack打包JS和其它文件已经是主流了，加上Node的流行，使得前端的工程方式和后端越来越像。所有的东西都模块化，最后统一编译。Webpack因为版本的不断更新以及各种各样纷繁复杂的配置选项，在使用中出现一些迷之错误常常让人无所适从。所以了解一下Webpack究竟是怎么组织编译模块的，...
2024-01-10
模拟vue实现简单的webpack打包
一、安装nodejs，查看是否安装成功二、package.json项目初始化 npm init电脑有node环境，在根目录下运行命令npm init初始化项目，根据提示输入项目相关信息，然后运行。嫌麻烦的同学可以一直enter，最后输入yes确定，生成以下package.json文件。三、安装babel loader 和 转码规则在项目根目录运行命令：npm inst...
2024-01-10
深入了解 webpack 模块加载原理
webpack 是一个模块打包器，在它看来，每一个文件都是一个模块。无论你开发使用的是 CommonJS 规范还是 ES6 模块规范，打包后的文件都统一使用 webpack 自定义的模块规范来管理、加载模块。本文将从一个简单的示例开始，来讲解 webpack 模块加载原理。CommonJS 规范假设现在有如下两个文件：// index.jscons...
2024-01-10
Vue+webpack 打包静态图片问题
静态图片没有被打包上Vue+webpack做了一个小项目，然后通过命令webpack 打包，把打包好的js和html文件放到Apache中运行，但是发现某个组件上通过img 标签引用的几张图片却并没有被打包上，打开网页报错跪求答案丫丫丫丫，谢谢各位大哥了。回答https://blog.csdn.net/lyn1772671980/article/details/80817796...
2024-01-10webpack4 css打包压缩问题的解决
这两天一直在练习这个webpack4, 发现有好多问题和坑，做开发嘛，一定要有喜欢出问题并喜欢解决问题，坚决踩个坑填个坑的不怕死小强精神！webpack4 在配置上其实是可以是想production和development的，// webpack.config.jsmodule.exports = { // webpack会根据mode进行对Js打包，development压缩，production下面自动压缩，...
2024-01-10
Xtrabackup工作原理
目录1.Xtrabackup介绍2.Xtrabackup备份涉及的数据库名词2.1.MySQL数据文件扩展名知识说明2.2.事务型引擎的ACID特性2.3.InnoDB引擎内部知识概念2.4.InnoDB引擎内部知识及说明2.5.InnoDB备份相关名词3.Xtrabackup备份的工作原理3.1.Xtrabackup恢复的工作原理3.2.Xtrabackup执行全备份的原理3.3.Xtrabackup执行全备份恢复的过程3.4.Xtraba...
2024-01-10webpack 处理CSS资源的实现
1. 一个引入 CSS 资源的案例// index.jsimport './style.css'/* style.css */#root { height: 100px; width: 100px; border: 1px solid #ccc;}就这样打包的话，是会报错的，那么想要成功打包 CSS 资源，需要使用下面介绍的几个 loader。2. style-loader将 CSS 样式注入到 DOM 中。2.1 结合 css-loader 使用module.exports = { module: { ...
2024-01-10
cordova+vue打包webapp
使用cordova+vue打包webapp，可以快速给网页套上一个android和ios壳子，完成一个app的开发。1. 环境准备。（1）node.js 下载地址： https://nodejs.org/dist/latest-v8.x/（2）java环境，jdk安装和环境变量配置。 本次安装版本:jdk1.8.0_201（3）android SDK 下载地址：http://tools.android-studio.org/index.php/步骤： 1.将文...
2024-01-10
webpack项目如何正确打包引入的自定义字体
一. 如何在Vue或React项目中使用自定义字体在开发前端项目时，经常会遇到UI同事希望在项目中使用一个炫酷字体的需求。那么怎么在项目中使用自定义字体呢？其实实现起来并不复杂，可以借用CSS3 @font-face 来实现。本文着重介绍一下 webpack 项目如何正确打包引入的自定义字体。可以访问 这里 查看...
2024-01-10
webpack如何打包带有图片的npm组件库？
一、问题目前我们有个需求，基于vue，需要将业务组件单独提取出来，打包成一个npm包给其他项目使用，业务组件里有图片等静态资源，我应该如何打包才能让第三方使用者使用时我们的图片正确显示呢？二、遇到的问题：我们将组件打包后，图片的src路径都是正确的，在第三方项目使用时，这个路径在css中是可以正确显示图片的，但在图片img的src使用时就找不到了。具体的问题如下图：三、打包后的代码如下图：四、请问...
2024-02-24vue和webpack打包项目相对路径修改的方法
一般vue使用webpack打包是整个工程的根目录，但是很多情况下都是把vue打包后的文件在某子目录下。修改：1，打开index.jsassetsPublicPath:'/'改为：assetsPublicPath: './'2.解决css里面的路径问题，打开utils.js添加红色框参数即可；publicPath: '../../'...
2024-01-10
【vue】饿了么项目-使用webpack打包项目
1.vue cli给我们提供了npm run build命令打包项目，在packa.json文件中scripts对象中有build属性，当我们执行npm run build时，就执行build对应的"node build/build.js"脚本build完成后显示进入项目文件夹，找到dist文件夹，这些是打包后产生的文件2.webpack打包过程中会将css和js文件单独提取出来，且会根据path存放进相应...
2024-01-10
vue+webpack项目打包后背景图片加载不出来
在做VUE +的WebPack脚手架项目打包完成后，在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中，背景图片引用的路径问题;后来通过修改配置文件，问题终于解决了，解决方法如下：1.修改资源路径在VUE +的WebPack项目中，项目打包后的CSS和JS的引用路径是绝对路径，项...
2024-01-10webpack开发环境和生产环境的深入理解
以前自己写一小项目时，webpack的配置基本就是一套配置，没有考虑生产环境和开发环境的区分，最近在做一个复杂的商城项目接触到了webpack的高级配置，经过两天的研究，写出了一份目前来说比叫满意的配置，在这里分享一下。如何区分开发环境和生产环境？众所周知，webpack时基于node.js平台运行的...
2024-01-10深入理解基于vue-cli的webpack打包优化实践及探索
转眼已经是2019年，短短三四年时间，webpack打包工具成为了前端开发中必备工具，曾经一度的面试题都是问，请问前端页面优化的方式有哪些？大家也是能够信手拈来的说出缓存、压缩文件、CSS雪碧图以及部署CDN等等各种方法，但是今天不一样了，可能你去面试问的就是，请问你是否知道webpack的打包原...
2024-01-10浅谈webpack打包过程中因为图片的路径导致的问题
最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示：然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下:也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢? 先来看一下我在webpack.config.js文件中的配置:在这...
2024-01-10
webpack打包React项目后出现中文乱码的问题
问题：React项目用webpack打包后，部署到服务器上，然后直接访问打包后的index.html文件，出现了中文乱码问题。解决方法：在webpack打包时，使用 webpack-encoding-plugin 插件就可以解决。操作步骤如下：第一步 安装webpack-encoding-plugin插件cnpm i webpack-encoding-plugin -D第二步 配置webpack.config.js文件在webpack.confi...
2024-01-10
总结Vue第三天：模块化和webpack模块化打包：
总结Vue第三天：模块化和webpack模块化打包：一、❀ 模块化 [导入import-----导出export]1、为什么需要模块化？JavaScript 发展初期，代码简单地堆积在一起，只要能顺利地从上往下一次执行即可。但随着网站越来越复杂，造成了很多问题：全局变量冲突、函数命名冲突、引入js文件顺序等等2、模块化规范...
2024-01-10
【webpack系列】webpack小老弟打包大项目
上集回顾：话音刚落 ~ npm老大哥又来电话了【有大工程】。“喂，老大哥，对方啥阵形啊？”“4-4-2? 踢你的？”“行，马上带上大姨夫嗷，拜拜！” webpack小老弟在接到npm老大哥的介绍后，立马动身参与到大项目中。准备狠狠地大展身手~~~本篇文章知识内容：加载csscss抽取webpack中常见的loader...
2024-01-10
【Vue】webpack打包后发布到IIS，刷新找不到
将项目打包好放在iis上遇到两个问题，1.直接输入地址 http://192.168.0.106:8089 会跳到 http://192.168.0.106:8089/home。但是刷新后就提示404，直接输入 http://192.168.0.106:8089/home 也是4042.我在config/index下设置代理module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable...
2024-01-10解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图：打开控制台查看元素样式，发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号，但使用webpack打包以后，"微软雅黑"的双引号被错误解析并多加了个反斜杠，导致字体不生效...
2024-01-10
