I am learning this imports-loader on webpack. I've already built several webpack demo projects by following tutorials.
Here is the code to configure imports-loader:
// ./webpack.config.js
module.exports = {
...
module: {
loaders: [
{
test: require.resolve("some-module"),
loader: "imports?this=>window"
}
]
};
My questions:
require.resolve("some-module")
here? what does it mean? require. context. You can create your own context with the require. context() function. It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.
They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs.
You can easily write your own loaders using Node. js. Loaders are activated by using loadername! prefixes in require() statements, or are automatically applied via regex from your webpack configuration – see configuration.
require.resolve("<moduleName>")
returns string which contains path to the module, for example
> require.resolve('angular')
/tmp/node_modules/angular/index.js
so in your example property test
will contain string with path to the module some-module
, by default webpack converts string to the regular expression so final version of loader config will be something like this:
{
test: /^node_modules\/some-module\/index.js/,
loader: 'imports?this=>window"
}
as you can see this loader will be applied only for one file
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With