https://github.com/anton-drobot/dependency-loader
Automatically require any resources related to the module.
https://github.com/anton-drobot/dependency-loader
dependencies webpack webpack-loader
Last synced: 2 months ago
JSON representation
Automatically require any resources related to the module.
- Host: GitHub
- URL: https://github.com/anton-drobot/dependency-loader
- Owner: anton-drobot
- License: mit
- Created: 2017-09-15T22:21:36.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-19T07:53:46.000Z (almost 9 years ago)
- Last Synced: 2025-10-05T00:52:52.571Z (9 months ago)
- Topics: dependencies, webpack, webpack-loader
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/dependency-loader
- Size: 4.88 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `dependency-loader` for Webpack
Automatically require any resources related to the module.
## Install
```
npm install dependency-loader --save-dev
```
## Example
For example you have file structure like this:
```
components/
├── foo/
│ ├── index.js
│ ├── index.css
│ └── template.html
├── bar/
│ ├── index.js
│ └── index.css
└── baz/
├── index.js
└── index.css
```
And in each of component's `index.js` you're doing something like this:
```js
import template from './template.html';
import './index.css';
// rest of the file
```
Now you can automate this with `dependency-loader`. Just put this in your webpack config:
```js
module.exports = {
module: {
rules: [
{
test: /components\/(.*)\/index\.js$/,
loader: 'dependency-loader',
options: {
injections: [
'index.css',
{
file: 'template.html',
variable: 'template'
}
]
}
}
]
}
}
```
The example above will include the necessary dependencies, with variable declarations, if the files does exists:
```js
// this is automatic injected by "dependency-loader"
import template from './template.html';
import './index.css';
// rest of the file
```
## Options
### `modules` (Boolean), default `true`
If `modules` set to `true`, `dependency-loader` will use ES6 modules. Otherwise — CommonJS.
### `injections` (Array)
Array of files to be injected into file. If you want to only import file without declaring a variable, you can specify configuration like this:
```js
[
'file1.js',
'file2.css'
]
```
If you want to specify a variable:
```js
[
{
file: 'file1.js',
variable: 'file1'
},
{
file: 'file2.css',
variable: 'file2'
}
]
```
Or you can use both variants:
```js
[
{
file: 'file1.js',
variable: 'file1'
},
'file2.css'
]
```