# theme-customize-loader

> theme-customize-loader is a module for add and load file in chunk from configuration.

Latest version **1.0.3** (published 2018-05-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install theme-customize-loader
pnpm add theme-customize-loader
yarn add theme-customize-loader
bun add theme-customize-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2018-05-07 |
| First published | 2018-05-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ndivid |
| Keywords | theme, customize, loader, webpack |

## Links

- npm: https://www.npmjs.com/package/theme-customize-loader
- npm.io page: https://npm.io/package/theme-customize-loader

## Dependencies (1)

- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2018-05-07
- 1.0.2 — 2018-05-07
- 1.0.1 — 2018-05-07

## README

# theme-customize-loader

> Load only you need. Loader for webpack.

Loader for add file to webpack chunk by configuration file.

## Install

```console
$ npm install theme-customize-loader --save-dev
```

## Usage

In your webpack configuration

```js
module.exports = {
  // ...
  module: {
    rules: [
      {
        enforce: 'pre',
        test   : /\.jsx$/,
        exclude: /node_modules/,
        use    : [{ loader: 'theme-customize-loader', options: { config: customizeConfig } }],
      },
    ],
  },
  // ...
}
```
Use `enforce: "pre"` section to check source files, not modified by other loaders (like `babel-loader`).

import Config file
```js
const customizeConfig = require('./App/configs/customize');
```


### Defining `configFile`

Add config file in your app:

```js
const data = {
  MyModule: {
    Single : 'App/components/single/Single.jsx',
    Preview: 'my-theme/Preview',
  },
  OtherModule: {
    Preview: false,
  },
};

module.exports = data;
```
Value can be `path to file` or `false` for fallback file.

`Path` will be absolute to package or webpack alias;


In your file

```js
let loadComponent;
/* customize path: "MyModule.Preview" var: "loadComponent" name: "my-chunk-name" origin: "../components/OriginPreview.jsx" */
```

**Result** in var will be set [`dynamic import` function](https://webpack.js.org/guides/code-splitting/#dynamic-imports).
```js
let loadComponent = () => import(/* webpackChunkName: "my-chunk-name" */ "my-theme/Preview");
```

** Important:** In one string

### Options

#### `path` \*required
Path name in config file

#### `var` (default: 'loadComponent')
Var name for save result

#### `name`
Webpack chunk name

#### `origin`
Fallback for load original file.


<!-- --- -->

<!-- ## [Changelog](CHANGELOG.md) -->

<!-- ## [License](LICENSE) -->

---
_Source: https://npm.io/package/theme-customize-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._