分类: javascript webpack

webpack笔记05


作者:朱培鑫

时间:2018-05-17

webpack处理CSS

CSS引入
CSS module
配置less / sass
提取CSS代码

引入CSS

style-loader
将CSS代码以style标签形式插入到html文档head部分

style-loader/url
将CSS代码以link标签形式异步插入到html文档head部分,若引入多个CSS文件,会产生多个link标签,从而产生过多请求,而且,CSS文件的加载时机是打包好的js执行完毕,js代码中创建link标签,从而导致样式显示过慢

style-loader/useable
可以使用use()和unuse()方法来动态控制需要加载哪个CSS文件,默认是unuse

style-loader
options

insertAt 插入位置默认为bottom
insertInto 插入到某个dom内
singleton 是否只使用一个style标签 (IE会对style标签数量有限制)
transform 转化,浏览器环境下,在样式插入页面前执行,对每个文件都会执行一次

css-loader
options

alias 解析的别名
importLoader @import
mininize 是否压缩
modules 启用css-modules

CSS-Module

:local 一段本地样式
:global 一段全局样式
compose 继承一段样式
compose ... from path
打包时class名是随机生成的,可以通过
localIdentName:'path_[local]--[hash:base64:5]'

配置Less/Sass

npm install less-loader less --save-dev
npm install sass-loader node-sass --save-dev
loader 引入顺序

{
    test : /\.less$/,
    use : [
          {
             loader : 'style-loader'
          },{
             loader : 'css-loader'
          },{
             loader : 'less-loader'
          }
    ]        
}

提取CSS代码

extract-loader
ExtractTextWebpackPlugin

postcss in webpack

postcss
autoprefixer
css-nano
css-next

postcss

安装
postcss
postcss-loader
autoprefixer 添加浏览器前缀
postcss-cssnano 压缩
postcss-cssnext 新语法 css变量 自定义选择器 calc()计算
postcss-import 将css中通过@import 引入的css 包含进来
postcss-url 相对路径发生变化时修改
postcss-assets 资源处理相关

( 本篇完 )