0
# Loader Configuration
1

2
Main webpack loader configuration options for controlling CSS injection behavior, DOM insertion strategies, and module output format.
3

4
## Capabilities
5

6
### injectType Option
7

8
Controls how styles are injected into the DOM.
9

10
```javascript { .api }
11
/**
12
 * Injection type configuration
13
 * @default "styleTag"
14
 */
15
injectType?: "styleTag" | "singletonStyleTag" | "autoStyleTag" | 
16
             "lazyStyleTag" | "lazySingletonStyleTag" | "lazyAutoStyleTag" | 
17
             "linkTag";
18
```
19

20
**Usage Example:**
21

22
```javascript
23
module.exports = {
24
  module: {
25
    rules: [
26
      {
27
        test: /\.css$/i,
28
        use: [
29
          {
30
            loader: "style-loader",
31
            options: { injectType: "singletonStyleTag" }
32
          },
33
          "css-loader"
34
        ],
35
      },
36
    ],
37
  },
38
};
39
```
40

41
### attributes Option
42

43
Adds custom HTML attributes to generated style or link elements.
44

45
```javascript { .api }
46
/**
47
 * Custom attributes to add to style/link elements
48
 * Automatically includes webpack nonce if available
49
 */
50
attributes?: Record<string, string>;
51
```
52

53
**Usage Example:**
54

55
```javascript
56
module.exports = {
57
  module: {
58
    rules: [
59
      {
60
        test: /\.css$/i,
61
        use: [
62
          {
63
            loader: "style-loader",
64
            options: {
65
              attributes: {
66
                "data-theme": "dark",
67
                "id": "my-styles"
68
              }
69
            }
70
          },
71
          "css-loader"
72
        ],
73
      },
74
    ],
75
  },
76
};
77
```
78

79
### insert Option
80

81
Specifies where to insert style/link elements in the DOM.
82

83
```javascript { .api }
84
/**
85
 * DOM insertion target
86
 * Can be a CSS selector string or absolute path to insertion function
87
 */
88
insert?: string;
89
```
90

91
**Usage Examples:**
92

93
```javascript
94
// CSS selector insertion
95
module.exports = {
96
  module: {
97
    rules: [
98
      {
99
        test: /\.css$/i,
100
        use: [
101
          {
102
            loader: "style-loader",
103
            options: { insert: "body" }  // Insert at end of body
104
          },
105
          "css-loader"
106
        ],
107
      },
108
    ],
109
  },
110
};
111

112
// Custom insertion function
113
module.exports = {
114
  module: {
115
    rules: [
116
      {
117
        test: /\.css$/i,
118
        use: [
119
          {
120
            loader: "style-loader",
121
            options: { insert: require.resolve("./custom-insert.js") }
122
          },
123
          "css-loader"
124
        ],
125
      },
126
    ],
127
  },
128
};
129
```
130

131
### base Option
132

133
Sets module ID base for webpack DLLPlugin support.
134

135
```javascript { .api }
136
/**
137
 * Module ID base for DLLPlugin
138
 * Used when building libraries with webpack DLL
139
 */
140
base?: number;
141
```
142

143
**Usage Example:**
144

145
```javascript
146
module.exports = {
147
  module: {
148
    rules: [
149
      {
150
        test: /\.css$/i,
151
        use: [
152
          {
153
            loader: "style-loader",
154
            options: { base: 1000 }
155
          },
156
          "css-loader"
157
        ],
158
      },
159
    ],
160
  },
161
};
162
```
163

164
### esModule Option
165

166
Controls whether to use ES modules syntax in generated code.
167

168
```javascript { .api }
169
/**
170
 * Use ES modules syntax for exports
171
 * @default true
172
 */
173
esModule?: boolean;
174
```
175

176
**Usage Example:**
177

178
```javascript
179
module.exports = {
180
  module: {
181
    rules: [
182
      {
183
        test: /\.css$/i,
184
        use: [
185
          {
186
            loader: "style-loader",
187
            options: { esModule: false }  // Use CommonJS exports
188
          },
189
          "css-loader"
190
        ],
191
      },
192
    ],
193
  },
194
};
195
```
196

197
### styleTagTransform Option
198

199
Custom function to transform CSS content before insertion into style elements.
200

201
```javascript { .api }
202
/**
203
 * Path to custom style tag transform function
204
 * Function signature: (css: string, styleElement: HTMLStyleElement) => void
205
 */
206
styleTagTransform?: string;
207
```
208

209
**Usage Example:**
210

211
```javascript
212
// webpack.config.js
213
module.exports = {
214
  module: {
215
    rules: [
216
      {
217
        test: /\.css$/i,
218
        use: [
219
          {
220
            loader: "style-loader",
221
            options: { 
222
              styleTagTransform: require.resolve("./custom-transform.js")
223
            }
224
          },
225
          "css-loader"
226
        ],
227
      },
228
    ],
229
  },
230
};
231

232
// custom-transform.js
233
module.exports = function(css, styleElement) {
234
  // Custom transformation logic
235
  const transformedCSS = css.replace(/\/\*.*?\*\//g, ''); // Remove comments
236
  
237
  // Insert transformed CSS
238
  if (styleElement.styleSheet) {
239
    styleElement.styleSheet.cssText = transformedCSS; // IE
240
  } else {
241
    styleElement.innerHTML = transformedCSS;
242
  }
243
};
244
```
245

246
## Complete Configuration Example
247

248
```javascript
249
module.exports = {
250
  module: {
251
    rules: [
252
      {
253
        test: /\.css$/i,
254
        use: [
255
          {
256
            loader: "style-loader",
257
            options: {
258
              injectType: "styleTag",
259
              attributes: {
260
                "data-environment": "development",
261
                "nonce": "random-value"
262
              },
263
              insert: "head",
264
              base: 1000,
265
              esModule: true,
266
              styleTagTransform: require.resolve("./transforms/css-transform.js")
267
            }
268
          },
269
          {
270
            loader: "css-loader",
271
            options: { modules: true }
272
          }
273
        ],
274
      },
275
    ],
276
  },
277
};
278
```