theme-customize-loader

Load only you need. Loader for webpack.

Loader for add file to webpack chunk by configuration file.

Install

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

Usage

In your webpack configuration

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

const customizeConfig = require('./App/configs/customize');

Defining configFile

Add config file in your app:

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

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.

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.