babel-inline-import-loader
Advanced tools
Weekly downloads
Readme
A webpack loader enabling files imported by babel-plugin-inline-import to trigger rebuilds when content changes.
First install babel-plugin-inline-import@3.0.0 or later. Then:
npm install babel-inline-import-loader --save-dev
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
}
}
]
]
}
};
In Next.js, add the following to your next.config.js
:
module.exports = {
// ...
webpack: (config, { defaultLoaders, dir }) => {
const rulesExceptBabelLoaderRule = config.module.rules.filter(
(rule) => rule.use !== defaultLoaders.babel
);
config.module.rules = [
...rulesExceptBabelLoaderRule,
{
test: /\.(js|jsx)$/,
include: [dir],
exclude: /node_modules/,
use: [
'babel-inline-import-loader',
{
...defaultLoaders.babel,
options: {
...defaultLoaders.babel.options,
// Disable cacheDirectory so that Babel
// always rebuilds dependent modules
cacheDirectory: false,
},
},
],
},
];
return config;
},
};
Run npm start
and open http://localhost:8080/. Edit example.txt and webpack should rebuild and reload the page automatically.
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
.
FAQs
A webpack loader enabling files imported by babel-plugin-inline-import to trigger rebuilds when content changes
The npm package babel-inline-import-loader receives a total of 659 weekly downloads. As such, babel-inline-import-loader popularity was classified as not popular.
We found that babel-inline-import-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.