浅谈webpack对样式的处理

作者:wind4gis 时间:2024-04-23 09:06:51 

本文介绍了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']
}),
...
]
}

来源:https://juejin.im/post/5a4eb795f265da3e52344c94

标签:webpack,样式
0
投稿

猜你喜欢

  • 深入理解Golang Channel 的底层结构

    2024-02-18 19:29:13
  • PHP登录(ajax提交数据和后台校验)实例分享

    2024-04-28 09:43:41
  • 分享一个简单的python读写文件脚本

    2022-11-21 20:03:00
  • Linux中Python 环境软件包安装步骤

    2021-04-10 02:41:38
  • PHP+redis实现添加处理投票的方法

    2023-11-22 04:38:19
  • 探究Python多进程编程下线程之间变量的共享问题

    2023-09-27 15:42:47
  • 程序员开发项目是选择效率还是质量呢?

    2023-09-17 08:37:03
  • vue中Npm run build 根据环境传递参数方法来打包不同域名

    2024-04-27 16:17:22
  • js style动态设置table高度

    2024-02-23 23:23:05
  • ASP中遍历和操作Application对象的集合

    2007-09-13 12:45:00
  • Sanic框架应用部署方法详解

    2021-04-29 08:40:33
  • Python网站验证码识别

    2023-09-11 04:29:36
  • 在matplotlib的图中设置中文标签的方法

    2023-10-10 07:17:53
  • PHP 应用容器化以及部署方法

    2023-11-14 15:45:06
  • python requests证书问题解决

    2023-10-12 22:58:12
  • Python编程中用close()方法关闭文件的教程

    2023-02-10 22:10:06
  • 浅谈python 中的 type(), dtype(), astype()的区别

    2022-09-13 22:40:39
  • python中Genarator函数用法分析

    2023-01-03 16:50:52
  • Linux 发邮件磁盘空间监控(python)

    2022-03-15 09:17:24
  • js中如何对url进行编码和解码

    2023-07-22 03:45:08
  • asp之家 网络编程 m.aspxhome.com