![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
ruanhongbiao
最想要去的地方,怎能半途返航。
展开
-
关闭ESlint 语法检测配置方法
刚刚开始的小伙伴是不是空格报错少一行报错各种错?是不是觉得快被限制的失去了自由的思绪了?受折磨后找到了不错的文章来取消eslint语法检测限制,作为学习笔记摘自segmentfault其实我并不反对这些语法检测,但是像许多反个人意愿的那就真的不得不吐槽了,比如vue-cli脚手架创建的默认eslint规则:代码末尾不能加分号 ;代码中不能存在多行空行tab键不能使用,必须换成两个空格代码中不能存在...原创 2018-07-09 18:22:35 · 16527 阅读 · 0 评论 -
webpack build打包出的 map 文件有什么用,能不能删或者打包不生成map文件?
打包后产生后缀名为.map的文件是由于配置了sourcemap选项生成的,打包后的文件不容易找到出bug对应的源代码的位置,sourcemap就是来帮我们解决这个问题的,有了map就可以像未压缩的代码一样,准确的输出是哪一行哪一列有错。具体配置可以查看官网devtool配置或者其它的webpack sourcemap 选项多种模式的一些解释如果想要打包后不生成.map文件要怎么配置呢?去...原创 2019-08-16 10:27:00 · 10996 阅读 · 1 评论 -
vue-cli中 proxyTable 配置无效,访问404
一开始根据正常情况下设置了proxyTable属性和全局创建axios实例如下。 proxyTable: { '/api':{ target:'http://xxxx.com', changeOrigin: true, pathRewrite: { '^/api': '/api' } ...原创 2019-07-25 09:36:54 · 3812 阅读 · 3 评论 -
vue webpack打包后图片、js、css路径错误的完美解决方法
项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css、js等资源,路径都是绝对的。1.css、js路径不对解决方法:打开config/index.js,将其中的assetsPublicPath值改为’./’改了之后打包发现虽然css,js文件路径对了,但是css中引用的图片路径和elemen...原创 2019-06-27 15:16:34 · 6884 阅读 · 0 评论 -
基于webpack4.x项目实战
webpack 是js模块打包器,一直在更新,本文是基于webpack4.29.5版本,将来的某一天,发觉本文章的一些配置用不了,那可能是webpack已经更新到更高的版本了。webpack4.0的零配置安装webpack4和webpack-cli,由于webpack4中和webpack-cli抽离了,所以需要分别安装,我们全局安装一个:npm install webpack webp...原创 2019-03-04 10:45:34 · 248 阅读 · 0 评论 -
解决使用webpack构建项目时,只能用localhost无法用本机IP访问项目的问题
第一种方法:如图在config/index.js,把host:'localhost'改为host:'0.0.0.0',重新编译即可。第二种方法:找到 your-project/package.json"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"在这句话里面添加参...原创 2018-07-10 16:20:21 · 8277 阅读 · 5 评论 -
几种自动处理css前缀的方法总结
我们知道在写css的时候由于要兼容不同厂商浏览器,一些比较新的属性需要给它们添加厂商前缀来兼容。移动端还好,基本只要兼容webkit内核的即可,pc端就虐心了,ff、ie、Opera……可以说五花八门,应有尽有,每次要使用例如一些css3属性的时候,就要考虑到添加前缀兼容的问题,那么多属性那么多前缀,简直是泯灭人性!不过好在现在各种工具的出现,已经可以很好地解决这个问题了,下面就简单介绍几个吧...原创 2018-05-11 14:27:24 · 1521 阅读 · 0 评论 -
使用webpack实现静态资源缓存
引言静态资源缓存是前端性能优化的一个点,所以在前端开发过程中,一般会最大限度的利用缓存(这里主要是强缓存)。回到本文主题,在使用webpack构建的项目中,稍有不慎的话,即使服务器设置了缓存策略,可能构建的项目无法实现静态资源缓存。那么webpack怎样才能达到使用缓存的效果呢,下面就来谈谈这个问题。区分一下几种不同的hash我们都知道,webpack有各种hash值,包括每次项...原创 2018-06-11 17:55:51 · 1484 阅读 · 0 评论 -
webpack命令局部运行的几种方法
1. 第一种,先全局安装webpack命令:npm install -g webpack然后再在项目内安装命令:npm install webpack --save-dev这样在项目内就可以直接使用webpack命令了,运行的却是局部的webpack如果要指定要安装的webpack版本,可以在webpack后加@2.X,比如npm install webpack@2.0 ...原创 2018-07-17 16:40:47 · 2101 阅读 · 0 评论 -
命令行安装webpack报错
如图在命令行安装webpack时报错,Which one do you like to install (webpack-cli/webpack-command): 选择输入webpack-cli即可,最后安装成功,版本号为4.14.0,原创 2018-07-03 17:47:09 · 1796 阅读 · 0 评论 -
vue打包时给静态资源增加版本号
打开webpack.prod.conf.js文件进行如下操作1.增加版本变量(版本号暂时用时间代替)var Version = new Date().getTime();2.修改要生成的js和css文件的配置项,把刚刚声明的版本拼接进要生成的文件名中;output: {path: config.build.assetsRoot,filename: utils.assetsP...原创 2019-08-29 17:39:12 · 1926 阅读 · 2 评论