Webpack参考手册
装载 | Loaders
style-loader
通过注入<style>标签将CSS添加到DOM
安装
npm install style-loader --save-devUsage
建议将 style-loader 与 css-loader 结合使用
component.js
import style from './file.css'webpack.config.js
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}在使用局部作用域 CSS 时，模块导出生成的（局部）标识符(identifier)。
component.js
import style from './file.css'
style.className === "z849f98ca812"Url
也可以添加一个URL <link href="path/to/file.css" rel="stylesheet">，而不是用带有 <style></style> 标签的内联 CSS {String}。
import url from 'file.css'webpack.config.js
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader/url" },
{ loader: "file-loader" }
]
}
]
}
}<link rel="stylesheet" href="path/to/file.css">信息来源：使用
url引用的 Source map 和资源：当 style-loader 与{ options: { sourceMap: true } }选项一起使用时，CSS 模块将生成为Blob，因此相对路径无法正常工作（他们将相对于chrome:blob或chrome:devtools）。为了使资源保持正确的路径，必须设置 webpack 配置中的output.publicPath属性，以便生成绝对路径。或者，你可以启用上面提到的convertToAbsoluteUrls选项。
Useable
按照惯例，引用计数器 API(Reference Counter API) 应关联到 .useable.css，而 .css 的载入，应该使用基本的 style-loader 用法（类似于其他文件类型，例如 .useable.less 和 .less）。
webpack.config.js
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
],
},
{
test: /\.useable\.css$/,
use: [
{
loader: "style-loader/useable"
},
{ loader: "css-loader" },
],
},
],
},
}Reference Counter API
component.js
import style from './file.css'
style.use(); // = style.ref();
style.unuse(); // = style.unref();样式不会添加在 import/require() 上，而是在调用 use/ref 时添加。如果 unuse/unref 与 use/ref 一样频繁地被调用，那么样式将从页面中删除。
：警告：当unuse/ unref比use/ 更经常地调用时，行为不确定ref。不要这样做。
选项
名称 |
类型 |
默认 |
描述 |
|---|---|---|---|
HMR |
{}布尔 |
true |
启用/禁用热模块更换（HMR），如果禁用，则不会添加HMR代码（适用于非本地开发/生产） |
基础 |
{数} |
true |
设置模块ID库（DLLPlugin） |
ATTRS |
{目的} |
{} |
将自定义attrs添加到<style> </ style> |
转变 |
{功能} |
false |
通过传递转换/条件函数来转换/有条件地加载CSS |
insertAt |
{字符串|对象} |
bottom |
在给定的位置插入<style> </ style> |
INSERTINTO |
{串} |
<HEAD> |
将<style> </ style>插入到给定的位置 |
sourceMap |
{}布尔 |
false |
启用/禁用Sourcemap |
convertToAbsoluteUrls |
{}布尔 |
false |
源地图启用时，将相对URL转换为绝对地址 |
hmr
启用/禁用热模块更换（HMR），如果禁用，则不会添加HMR代码。这可以用于非本地开发和生产。
webpack.config.js
{
loader: 'style-loader',
options: {
hmr: false
}
}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'
]
}attrs
如果已定义，style-loader 将把属性值附加在 <style> / <link> 元素上。
component.js
import style from './file.css'webpack.config.js
{
test: /\.css$/,
use: [
{ loader: 'style-loader', options: { attrs: { id: 'id' } } }
{ loader: 'css-loader' }
]
}<style id="id"></style>Url
component.js
import link from './file.css'webpack.config.js
{
test: /\.css$/,
use: [
{ loader: 'style-loader/url', options: { attrs: { id: 'id' } } }
{ loader: 'file-loader' }
]
}transform
transform 是一个函数，可以在通过 style-loader 加载到页面之前修改 css。 该函数将在即将加载的 css 上调用，函数的返回值将被加载到页面，而不是原始的 css 中。 如果 transform 函数的返回值是 falsy 值，那么 css 根本就不会加载到页面中。
webpack.config.js
{
loader: 'style-loader',
options: {
transform: 'path/to/transform.js'
}
}transform.js
module.exports = function (css) {
// Here we can change the original css
const transformed = css.replace('.classNameA', '.classNameB')
return transformed
}Conditional
webpack.config.js
{
loader: 'style-loader',
options: {
transform: 'path/to/conditional.js'
}
}conditional.js
module.exports = function (css) {
// If the condition is matched load [and transform] the CSS
if (css.includes('something I want to check')) {
return css;
}
// If a falsy value is returned, the CSS won't be loaded
return false
}insertAt
默认情况下，style-loader 将 <style> 元素附加到样式目标(style target)的末尾，即页面的 <head> 标签，也可以是由 insertInto 指定其他标签。这将导致 loader 创建的 CSS 优先于目标中已经存在的 CSS。要在目标的起始处插入 style 元素，请将此查询参数(query parameter)设置为 'top'，例如
webpack.config.js
{
loader: 'style-loader',
options: {
insertAt: 'top'
}
}<style>通过传递一个对象，可以在特定元素之前插入一个新元素，例如
webpack.config.js
{
loader: 'style-loader',
options: {
insertAt: {
before: '#id'
}
}
}insertInto
默认情况下，样式加载器将 <style> 元素插入到页面的 <head> 标签中。如果要将标签插入到其他位置，可以在这里为该元素指定 CSS 选择器。如果你想要插入到 IFrame 中，请确保你具有足够的访问权限，样式将被注入到内容文档的 head 中。 你还可以将样式插入到 ShadowRoot 中，如下
webpack.config.js
{
loader: 'style-loader',
options: {
insertInto: '#host::shadow>#root'
}
}singleton
如果已定义，则 style-loader 将重用单个 <style> 元素，而不是为每个所需的模块添加/删除单个元素。
ℹ️默认情况下启用此选项，IE9 对页面上允许的 style 标签数量有严格的限制。你可以使用 singleton 选项来启用或禁用它。
webpack.config.js
{
loader: 'style-loader',
options: {
singleton: true
}
}sourceMap
启用/禁用 source map 加载
webpack.config.js
{
loader: 'style-loader',
options: {
sourceMap: true
}
}convertToAbsoluteUrls
如果 convertToAbsoluteUrls 和 sourceMaps 都启用，那么相对 url 将在 css 注入页面之前，被转换为绝对 url。这解决了在启用 source map 时，相对资源无法加载的问题。你可以使用 convertToAbsoluteUrls 选项启用它。
webpack.config.js
{
loader: 'style-loader',
options: {
sourceMap: true,
convertToAbsoluteUrls: true
}
}装载 | Loaders相关
webpack 是一个模块打包器。webpack 处理带有依赖关系的模块，生成一系列表示这些模块的静态资源。
| 主页 | https://webpack.js.org/ |
| 源码 | https://github.com/webpack/webpack |
| 发布版本 | 3.8.1 |
加载中,请稍侯......