Webpack import from /folder/folder.js instead of /folder/index.js

With webpack when I create a index.js in ./blah/ then do import blah from './blah' it succesfully gets from index.js

However, my code editor is now FULL of tabs called index.js. And doing a Ctrl+Shift+P to find now has a BUNCH of index.js's

Therefore I have been doing name index.js's the same as the folder name. So /folder/folder.js. However if I do this, all my import statements are now:

import blah from './blah/blah`

Now it's not too verbose for me to just type an extra /blah. But I was just wondering, is it possible to make it treat the js file with the same name as the folder as it would index.js?

Another solution to work around this problem is to create a package.json inside of each folder like this:

{
   "main":"blah.js"
}

Webpack import from /folder/folder.js instead of /folder/index.js, Github user shaketbaby has made a webpack plugin which handles imports in a manner the question requested. First add the following to your  In ES6, having an index.js file in a folder lets you perform an import from the folder implicitly without specifying the index.js in the import statement – just like how web servers will serve up the index.html in a folder without you needing to explicitly put the index.html in the URL.

Github user shaketbaby has made a webpack plugin which handles imports in a manner the question requested.

First add the following to your webpack config:

const DirectoryNamedPlugin = require("directory-named-webpack-plugin");

const config = {
  ...
  resolve: {
    ...
    plugins: [
      new DirectoryNamedPlugin(true)
    ]
  },
  ...
}
export default config

Then you can use import blah from './blah' in order to resolve the file located at ./blah/blah.js.

If the first parameter is true, the resolver will fall back to the previous behaviour blah/index.js in the event that blah/blah.js cannot be found.

Import file with same folder name ('./module' instead of './module , If not, checks if ./module/index.js exists. However, Webpack completely ignores modules with the same name of the directory, i.e. ./module/module  1 Webpack import from /folder/folder.js instead of /folder/index.js Sep 18 '18 1 Loading image with jquery: Additional request in IE9 May 15 '12 View all questions and answers →

Another option:

Inside your folder folder/, create the following file index.js:

import folder from './folder.js';
export default folder;

Output Management, webpack-demo |- package.json |- webpack.config.js |- /dist |- /src |- index.js + |- print.js require('path'); + const HtmlWebpackPlugin = require('html-webpack-​plugin'); its own index.html file, even though we already have one in the dist/ folder. There are some new issues with this. I had react-universal-component + webpack-flush-chunks + babel-plugin-universal-import working fine until webpack started spitting out chunks with slashes in the file names for where the path went, while the universal component expects hyphens. 👍

Resolve, Create aliases to import or require certain modules more easily. For example, to alias a bunch of commonly used src/ folders: webpack.config.js const path  webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Asset Management, src/index.js', output: { - filename: 'main.js', + filename: 'bundle.js', path: In order to import a CSS file from within a JavaScript module, you need to This means webpack found our file in the src folder and processed it! With the loader configured and fonts in place, you can incorporate them via an @font-face declaration. The reason we need default is that since webpack 4, when importing a CommonJS module, the import will no longer resolve to the value of module.exports, it will instead create an artificial namespace object for the CommonJS module. For more information on the reason behind this, read webpack 4: import() and CommonJs

Module Resolution, In this case, the directory of the resource file where the import or require which tells the resolver which extensions are acceptable for resolution e.g. .js , .jsx . If the path points to a folder, then the following steps are taken to find the right file  Since we can’t import React JSX directly in the view page, we still need the help of webpack and babel to do those stuffs for us. So, after we run the command above, you should see the dist folder inside the Scripts folder on where we tell our webpack config to save the output files in Scripts/dist folder.

Comments
  • I think it is impossible.See the node.js's module doc.
  • Ah ok thanks @wuxiandiejia
  • Interesting thanks for sharing! This is much better as it doesn't rely on other dependencies, accepting this one instead.
  • This should really be the accepted answer. The other answers above indicate that the mapping is not possible - which is untrue, as this post clearly demonstrates. There are also related packages to accomplish this with jest and babel resolutions.