Saptak's Blog Posts
Making cleaner imports with Webpack and Babel
Posted: 2019-08-10T12:30:00+05:30You can bring in modules from different javascript file using require based javascript code, or normal Babel parse-able imports. But the code with these imports often become a little bad because of relative imports like:
But a better, more cleaner way of writing ES6 imports is
This hugely avoids the bad relative paths for importing depending on where the component files are. Now, this is not parse-able by babel itself. But you can parse this by webpack itself using it's resolve attribute. So your webpack should have these two segments of code:
and
The {modules: false} ensures that babel-preset-env doesn't handle the parsing of the module imports. You can check the following comment in a webpack issue to know more about this.
import Component from '../../path/to/Component'
But a better, more cleaner way of writing ES6 imports is
import Component from '~/path/from/jsRoot/Component'
This hugely avoids the bad relative paths for importing depending on where the component files are. Now, this is not parse-able by babel itself. But you can parse this by webpack itself using it's resolve attribute. So your webpack should have these two segments of code:
resolve: {
alias: {
'~': __dirname + '/path/to/jsRoot',
modernizr$: path.resolve(__dirname, '.modernizrrc')
},
extensions: ['.js', '.jsx'],
modules: ['node_modules']
},
and
module: {
rules: [
{
test: /\.jsx?$/,
use: [
{
loader: 'babel-loader',
query: {
presets: [
'@babel/preset-react',
['@babel/preset-env', { modules: false }]
],
},
}
],
},
}
The {modules: false} ensures that babel-preset-env doesn't handle the parsing of the module imports. You can check the following comment in a webpack issue to know more about this.