A webpack loader enabling files imported by babel-plugin-inline-import to trigger rebuilds when content changes
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 19 commits behind elliottsj:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.eslintignore
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
index.js
package-lock.json
package.json

README.md

babel-inline-import-loader

npm version Travis CI Build Status Greenkeeper badge

A webpack loader enabling files imported by babel-plugin-inline-import to trigger rebuilds when content changes.

Installation

First install babel-plugin-inline-import@2.0.6 or later. Then:

npm install babel-inline-import-loader --save-dev

Usage

In your webpack config, put 'babel-inline-import-loader' before 'babel-loader':

// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-inline-import-loader',
          {
            loader: 'babel-loader',
            options: {
              plugins: [
                ['inline-import', {
                  extensions: ['.txt']
                }]
              ],
              // Make sure cacheDirectory is disabled so that Babel
              // always rebuilds dependent modules
              cacheDirectory: false // default
            }
          }
        ]
    ]
  }
};

Next.js

In Next.js, add the following to your next.config.js:

module.exports = {
  // ...
  webpack: config => {
    // The main 'babel-loader' rule is the last rule in the array as of next@2.4.7
    // This may change in future versions
    const rulesExceptBabelLoaderRule = config.module.rules.slice(0, -1);
    const babelLoaderRule = config.module.rules.slice(-1)[0];

    return Object.assign({}, config, {
      module: Object.assign({}, config.module, {
        rules: [
          ...rulesExceptBabelLoaderRule,
          {
            test: babelLoaderRule.test,
            include: babelLoaderRule.include,
            exclude: babelLoaderRule.exclude,
            use: [
              'babel-inline-import-loader',
              {
                loader: 'babel-loader',
                options: Object.assign({}, babelLoaderRule.options, {
                  // Disable cacheDirectory so that Babel
                  // always rebuilds dependent modules
                  cacheDirectory: false,
                }),
              },
            ],
          },
        ],
      }),
    });
  },
};

Example

Run npm start and open http://localhost:8080/. Edit example.txt and webpack should rebuild and reload the page automatically.

How does it work?

babel-inline-import-loader depends on babel-plugin-inline-import#10, so that a comment block specifying the original module path is included next to the inlined import. For example,

import example from './example.txt';

is compiled to

/* babel-plugin-inline-import './example.txt' */const example = 'hello world';

babel-inline-import-loader then parses the value './example.txt' from the comment and includes that file in webpack's dependency graph via this.addDependency.