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. Then:
npm install babel-inline-import-loader --save-dev
Usage
In your webpack config, put 'babel-inline-import-loader'
before 'babel-loader'
:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
'babel-inline-import-loader',
{
loader: 'babel-loader',
options: {
plugins: [
['inline-import', {
extensions: ['.txt']
}]
],
cacheDirectory: false
}
}
]
]
}
};
Next.js
In Next.js, add the following to your next.config.js
:
module.exports = {
webpack: config => {
const rulesExceptBabelLoaderRule = config.module.rules.slice(0, -1);
const babelLoaderRule = config.module.rules.slice(-1)[0];
const newConfig = 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, {
cacheDirectory: false,
}),
},
],
},
],
}),
});
return newConfig;
},
};
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#9999, 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
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
.