style-loader

文档传送门

webpack官方的style-loader文档跟style-loader的github文档不一致,而且webpack文档里很多东西都用不了,难道是版本不一致?

options: {
  injectType: {String}, // Default: 'styleTag' 
  attributes: {Object}, // Default: {}
  insert:[head|body], // Default: 'head'
  base: {Number}, // Default: true
  esModule: {Boolean} // Default: false
}

injectType: 将css注入到html的不同方式

• styleTag: 默认值,把多个css分别放入不同的style中
• singletonStyleTag: 只使用1个style加载所有css文件内容
• lazyStyleTag: 懒注入css文件,通过import/require加载到css文件后,不会自动注入到html的style标签内,而是当显示调用use方法后才会注入到style标签中,注意这个属性也可能会产生多个style标签

import commonCss from '../css/common.css';
// const commonCss = require('../css/common.css');
commonCss.use();

• lazySingletonStyleTag: 作用和lazyStyleTag,但是只会使用1个style标签.
• linkTag: 将css内容使用link标签引入,注意: 这个配置只能用css-loader配合file-loader使用,不能使用css-loader

{ 
  test: /\.css$/,
  use:[
    {
      loader: 'style-loader',
      options: {injectType: 'linkTag'}
    }, 
    { loader: 'file-loader' }
  ]
},

实测时遇到个坑:

因为我事先启用了devServer,修改后并没有重新运行 npx webpack-dev-server
所以发现一直样式的link注入没有生效,还以为这种方式有问题,后来才发现,这点需要注意.

attributes: 编译时,把相关的属性注入到style标签上

{ 
  test: /\.css$/,
  use:[
    {
      loader: 'style-loader',
      options: {injectType: 'linkTag', attributes: {id: 'commonCssId', name: 'commonCssName'}
    }, 
    { loader: 'file-loader' }
  ]
},

编译结果

使用内联方式指定加载loader的方式,带传参演示(不推荐,大量使用会导致运行时代码量增大)

import "style-loader?{injectType:'linkTag',insert:'body',attributes:{id:'commonCssId',name:'commonCssName'}}!file-loader!../css/common.css"

再说1个坑:

由于webpack.config.js内的规则没有清除,在使用上面内联方式时,虽然link标签都是正确的,但是发现页面没产生效果,查看生成的css发现内容不对,花费了大量时间尝试各种内联写法,浪费很多时间.
为什么要使用内联: 因为内联方式可以灵活地指定哪些css使用link方式,哪些css直接使用style注入css代码.
配置方式也可以实现这种效果: 可以通过test和exclude或include灵活的精确的做排除后单独配置各自规则.
如:

文件比较大的css文件,单独配置规则,提取成css文件通过link注入html;
文件比较小的css文件,通过exclude排除,通过合并成单个style注入html.

{
  test: /\.css$/,
  exclude: /\.mini\.css$/, 
  use:[
    {
      loader:'style-loader',
      options:{injectType:'linkTag',insert:'body',attributes:{id:'commonCssId', name:'commonCssName'}}
    }, 
    'file-loader'
  ]
},
{ 
  test: /\.mini\.css$/,
  loader:'style-loader?injectType=singletonStyleTag&insert=body!css-loader'
},

common.css名称中由于不带".mini",所以被提取成单独的css,并通过link注入html test.mini.css被注入到html的style标签
完美!

insert: 将变异后的style或link标签注入到html的head或者body,没啥可说的

enums: head | body

base: 用来配置优先级,值越小优先级越高

当使用一个或多个 DllPlugin 时，此设置主要用作 css 冲突 的修补方案。base 可以防止 app 的 css（或 DllPlugin2 的 css）覆盖 DllPlugin1 的 css，方法是指定一个 css 模块的 id 大于 DllPlugin1 的范围，例如：

webpack.dll1.config.js

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

webpack.dll2.config.js

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

webpack.app.config.js

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

esModule: 是否启用esModule

Emmm....看来每个loader的内容都很多,还是不能这么玩,了解最常用的即可,其他需要的时候查,不然时间不够丫!