浅谈webpack对样式的处理


Posted in Javascript onJanuary 05, 2018

本文介绍了webpack对样式的处理,分享给大家,具体如下:

我们可以在js中引入样式文件

require('myStyle.css')

这时我们便需要引入相应的webpack loader来帮助我们解析这段代码。

css-loader搭配style-loader

首先,我们可以引入css-loader和style-loader来处理css的解析,其中,css-loader是用来解析css文件,style-loader是用来将css文件嵌入到js文件里

var path = require('path')
module.exports = {
 context: path.join(__dirname, 'src')
 entry: './',
 module: {
 rules: [
  {
  test: /\.css$/,
  include: [
   path.join(__dirname, 'src')
  ],
  use: ['style-loader', 'css-loader']
  }
 ]
 },
 output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name].bundle.[hash].js'
 }
}

在上面的代码里,解析顺序是从右到左解析,先使用css-loader解析出css文件之后,再使用style-loader嵌入到js代码里。

如果你使用less来写样式的话,则需要先用less-loader来编译样式文件为css文件,再继续使用css-loader与style-loader。另外,loader加载器可以省略后面的-loader。所以上面的代码可以缩写成

module: {
 rules: [
 {
  test: /\.css$/,
  include: [
  path.join(__dirname, 'src')
  ],
  use: ['style', 'css', 'less']
 }
 ]
}

一般在测试环境里为了快点编译css,会用这种方式多一点,但是这样子编译出来的js文件会比较大,不大适合在生产环境里使用。

编译成单独的文件

上面的做法会把css和js打包在一起,减少实际请求的次数,但是由于编译出来的js文件比较大,浪费带宽。因此,我们使用extract-text-webpack-plugin插件,把css文件编译成独立的文件。我们就可以利用CDN把这个文件推送到节点服务器,或者根据视情况按需加载,进而优化客户请求链路,加速页面响应。

var path = require('path'),
 ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
 context: path.join(__dirname, 'src'),
 entry: './',
 module: {
 rules: [{
  test: /\.css$/,
  include: [
  path.join(__dirname, 'src')
  ],
  use: ExtractTextPlugin.extract({
  fallback: 'style',
  use: 'css'
  })
 }]
 },
 output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name].bundle.[hash].js'
 },
 plugins: [
 new ExtractTextPlugin('[name].css')
 ]
}

通过上面的代码,我们使用extract-text-webpack-plugin插件处理src目录下所有的css文件,先使用css-loader插件解析出css代码,如果解析失败,使用style-loader插件解析,最终在dist目录下生成对应的js文件

兼容旧浏览器

以前我们写样式时,有些样式不同浏览器需要加不同的前缀,如-webkit-。现在有了构建工具,我们便不需要再去关注这些前缀了,构建工具会自动帮我们加上这些前缀。

对于webpack我们自然想到需要使用loader或者plugin来帮助我们做这些事情,查了下发现autoprefixer-loader已经废弃不再维护了,推荐使用posscss

postcss是用于在js中转换css样式的js插件,需要搭配其他插件一起使用,这点和babel6一样,本身只是个转换器,并不提供代码解析功能。

这里我们需要autoprefixer插件来为我们的样式添加前缀。首先下载该模块。

npm install -D autoprefixer

接着便可以配置webpack了

var autoprefixer = require('autoprefixer')
module.exports = {
 ...
 module: {
 loaders: [
  ...
  {
  {
   test: /\.css$/,
   loader: ExtractTextPlugin.extract(["css", "postcss"])
  },
  }
 ]
 },
 postcss: [autoprefixer()],
 ...
}

查看一下抽取出来的样式文件便可以发现已经加上了前缀

a {
 display: flex;
}
/*compiles to:*/
a {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex
}

另外autoprefixer还可以根据目标浏览器版本生成不同的前缀个数,例如你的应用的使用用户如果大多数是使用比较新版本的浏览器,那么便可以做如下配置。

postcss: [autoprefixer({ browsers: ['last 2 versions'] })] 这是生成的样式便会有些不一样,还是上面的例子

a {
 display: flex;
}
/*compiles to:*/
a {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

样式压缩

压缩代码我们可以使用webpack的内置插件UglifyJsPlugin来做,它既可以压缩js代码也可以压缩css代码。

plugins: [
 ...
 new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false
 }
 }),
 ...
]

其实并不能说是在压缩css代码,本质来说还是压缩js代码,再将这块代码输出到css文件中。

使用CommonsChunkPlugin抽取公共代码

首先要明确一点CommonsChunkPlugin是在有多个entry时使用的,即在有多个入口文件时,这些入口文件可能会有一些共同的代码,我们便可以将这些共同的代码抽取出来成独立的文件。明白这一点非常重要。(搞了很久才明白的一点,唉~~~~)

如果在多个entry中require了相同的css文件,我们便可以使用CommonsChunkPlugin来将这些共同的样式文件抽取出来为独立的样式文件。

module.exports = {
 entry: {
 "A": "./src/entry.js",
 "B": "./src/entry2.js"
 },
 ...
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons", filename: "commons.js"
 }),
 ...
 ]
}

当然,这里不止会抽取共同的css,如果有共同的js代码,也会抽取成为commons.js。 这里有个有趣的现象,抽取出来的css文件的命名将会是参数中name的值,而js文件名则会是filename的值。

CommonsChunkPlugin好像只会将所有chunk中都共有的模块抽取出来,如果存在如下的依赖

// entry1.js
var style1 = require('./style/myStyle.css')
var style2 = require('./style/style.css')

// entry2.js
require("./style/myStyle.css")
require("./style/myStyle2.css")

// entry3.js
require("./style/myStyle2.css")

使用插件后会发现,根本没有生成commons.css文件。

如果我们只需要取前两个chunk的共同代码,我们可以这么做

module.exports = {
 entry: {
 "A": "./src/entry.js",
 "B": "./src/entry2.js",
 "C": "./src/entry3.js"
 },
 ...
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons", filename: "commons.js", chunks: ['A', 'B']
 }),
 ...
 ]
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 Javascript
js实现HTML中Select二级联动的实例
Jan 05 #Javascript
详解tween.js 中文使用指南
Jan 05 #Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 #Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 #Javascript
vue 中directive功能的简单实现
Jan 05 #Javascript
浅谈React前后端同构防止重复渲染
Jan 05 #Javascript
使用vue实现grid-layout功能实例代码
Jan 05 #Javascript
You might like
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
php实现读取内存顺序号
2015/03/29 PHP
php取出数组单个值的方法
2018/03/12 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
vue-cli 首屏加载优化问题
2018/11/06 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
求网格中的黑点分布
2013/11/06 面试题
《谁的本领大》教后反思
2014/04/25 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
教学督导岗位职责
2015/04/10 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
MYSQL如何查看进程和kill进程
2022/03/13 MySQL