Skip to content

Commit bde30f6

Browse files
committed
feat: add rules for asset modules
1 parent 44c7765 commit bde30f6

File tree

2 files changed

+53
-11
lines changed

2 files changed

+53
-11
lines changed

Diff for: README.md

+15
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,21 @@ module.exports = [
6868
- `node` builds to `dist/node/`
6969
- Supports merging in arbitrary configuration with `merge({...})`
7070
71+
### Asset Modules
72+
73+
This configuration makes webpack 5's [Asset Modules](https://webpack.js.org/guides/asset-modules/) available through
74+
resource queries parameters:
75+
76+
```js
77+
import myImage from './my-image.png?asset'; // Use `asset` (let webpack decide)
78+
import myImage from './my-image.png?resource'; // Use `asset/resource`, similar to `file-loader`
79+
import myImage from './my-image.png?inline'; // Use `asset/inline`, similar to `url-loader`
80+
import myImage from './my-image.png?source'; // Use `asset/source`, similar to `raw-loader`
81+
```
82+
83+
You can also use `file` for `asset/resource`, `url` for `asset/inline`, and `raw` for `asset/source`, to make it clear
84+
which loader you're replacing.
85+
7186
## API
7287
7388
### `new ScratchWebpackConfigBuilder(options)`

Diff for: src/index.cjs

+38-11
Original file line numberDiff line numberDiff line change
@@ -87,18 +87,45 @@ class ScratchWebpackConfigBuilder {
8787
]
8888
},
8989
module: {
90-
rules: [{
91-
test: enableReact ? /\.[cm]?jsx?$/ : /\.[cm]?js$/,
92-
loader: 'babel-loader',
93-
options: {
94-
presets: [
95-
'@babel/preset-env',
96-
...(
97-
enableReact ? ['@babel/preset-react'] : []
98-
)
99-
]
90+
rules: [
91+
{
92+
test: enableReact ? /\.[cm]?jsx?$/ : /\.[cm]?js$/,
93+
loader: 'babel-loader',
94+
options: {
95+
presets: [
96+
'@babel/preset-env',
97+
...(
98+
enableReact ? ['@babel/preset-react'] : []
99+
)
100+
]
101+
}
102+
},
103+
{
104+
// `asset` automatically chooses between exporting a data URI and emitting a separate file.
105+
// Previously achievable by using `url-loader` with asset size limit.
106+
resourceQuery: /^\?asset$/,
107+
type: 'asset'
108+
},
109+
{
110+
// `asset/resource` emits a separate file and exports the URL.
111+
// Previously achievable by using `file-loader`.
112+
resourceQuery: /^\?(resource|file)$/,
113+
type: 'asset/resource'
114+
},
115+
{
116+
// `asset/inline` exports a data URI of the asset.
117+
// Previously achievable by using `url-loader`.
118+
resourceQuery: /^\?(inline|url)$/,
119+
type: 'asset/inline'
120+
},
121+
{
122+
// `asset/source` exports the source code of the asset.
123+
// Previously achievable by using `raw-loader`.
124+
resourceQuery: /^\?(source|raw)$/,
125+
type: 'asset/source'
100126
}
101-
}]
127+
],
128+
102129
},
103130
plugins: []
104131
};

0 commit comments

Comments
 (0)