问题的起因: 使用 bulma.css ,通过webpack打包后样式出错,查看压缩代码,发现代码从css的 long hand 属性被压缩为 short hand(PS: 什么是long hand & short hand,请查看此文:http://www.hongkiat.com/blog/css-shorthand-longhand-notations/). 解决过程: 经过一番追查判断(搜 + 思),最终发现问题出在webpack.prod.conf.js(使用vue-cli自动搭建的w…

webpack抽取CSS文件 CSSTreeShaking 一.webpack抽取CSS文件 抽取CSS文件的插件:mini-css-extract-plugin npm install --save-dev mini-css-extract-plugin 详细参考:https://www.npmjs.com/package/mini-css-extract-plugin 但是前提还是需要下载一个css加载器: npm install css-loader --save-dev 测试工作区间文件…

module.exports = { output: { filename: '[name].js', chunkFilename: '[name].chunk.js', path: path.resolve(__dirname, '../dist') } } 在看别人写的webpack,output配置项,肯跟会碰到chunkFilename这样的配置项,那这个是什么意思呢?filename和chunkFilename有什么区别呢?首先看个例子 index.html <!DOCTYPE htm…

不说废话了,代码压缩是每个网站上线前的必备过程,但由于有时候小的项目或者加急的项目每次都构建一次类似gulp或者grunt等前端部署,实在是大题小做,所以才有了今天这个帖子: 我们会用到yui compressor 的jar包,已放入百度云,下载地址:http://pan.baidu.com/s/1o67tnB0 一:添加css压缩: 1.选择设置: 2.选择工具中的file Watchers选项 3.点击右侧的加号,选择YUI Compressor CSS选项 4.看图中所示位置选择下载的ja…

假设你的项目的CSS文件全部放在项目目录下名为css的文件夹中,现在将它压缩合并成一个名为main-min.css的文件,放在css-min文件夹下. (1)首先保证机器安装了node.js. (2)在项目的目录下建立名为package.json的文件,用于配置需要安装的npm包,package.json的内容如下: { "author": "evan <evan@evantahler.com>", "name": "CSS…

前言: 网站项目需要引用外部文件以减小加载流量,而且第一次加载外部资源文件后,其他同域名的页面如果引用相同的地址,可以利用浏览器缓存直接读取本地缓存资源文件,而不需要每个页面都下载相同的外部资源文件.外部资源文件有一些是第三方插件,有一些是自己写的业务功能脚本,项目引用这些外部文件,需要把没有压缩过的第三方插件压缩后再引用,而自己的业务功能脚本,有的做成插件形式,引用一个功能脚本,需要同时引用若干个脚本文件,因此需要把这些脚本文件合并成一个压缩文件再引用,这样可以减少HTTP请求次数,减少这些外…

webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也包括css文件中图片资源的处理,那么webpack到底是怎么处理它的呢?笔者之前也遇到过类似图片路劲的问题,为此还写过一篇博文webpack生成的css文件background-image url图片无法加载.今天就来说说webpack是怎么处理css文件中的图片路径的,首先上一个具体的例子. 一个…

css文件处理-准备工作 (以下项目配置都是基于上一篇webpack(4)的基础上) 在项目开发中,我们必然需要添加很多的样式,而样式我们往往写到一个单独的文件中. 这里我们就在src目录中创建一个normal.css文件,代码如下: body{ background-color: aqua; } 代码很简单,就是将body设置一个背景颜色,但是此时样式是不会生效的,因为我们根本没有引用它,所以我们需要在入口main.js中引入css // 引用css文件 require('./css/norm…

1. 安装css-loader 与 style-loader npm install style-loader css-loader --save-dev 2. 在webpack.config.js中配置 module.exports={ //...code module:{ rules:[ { //使用正则表达式,匹配以.css结尾的文件 test:/\.css$/, //顺序不能颠倒 use: ['style-loader','css-loader'] } ] } } 3. 使用方法 ind…

压缩网址 http://tool.chinaz.com/tools/jscodeconfusion.aspx http://tool.oschina.net/jscompress?type=3 http://tool.lu/js/…