babel-inline-import-loader
A webpack loader enabling files imported by babel-plugin-inline-import to trigger rebuilds when content changes.
Installation
First install babel-plugin-inline-import@3.0.0 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 moduleexports = // ... 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
:
moduleexports = // ... { const rulesExceptBabelLoaderRule = configmodulerules; configmodulerules = ...rulesExceptBabelLoaderRule test: /\.$/ include: dir exclude: /node_modules/ use: 'babel-inline-import-loader' ...defaultLoadersbabel options: ...defaultLoadersbabeloptions // Disable cacheDirectory so that Babel // always rebuilds dependent modules cacheDirectory: false ; return config; };
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,
;
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
.