WebStorm 2017.2 EAP 172.2827: Better Webpack Support, Convert to Export & Breadcrumbs for JS

Posted on June 9, 2017 by Ekaterina Prigara. Updated on January 10, 2019

This week WebStorm 2017.2 EAP build (172.2827.22) brings lots of new features that we’d like you to try. Download the EAP build on this page or by using Toolbox App. A patch update from the last week EAP build is also available.

Please share your feedback and report issues on our tracker. Thank you!

Support for webpack enhanced module resolution

This update brings a huge improvement in working with projects using webpack. WebStorm now analyzes the webpack configuration and provides coding assistance that respects the webpack module resolution. That means that now all the import statements in the code that use enhanced module resolution will be properly resolved.

WebStorm runs webpack under the hood when you open a project or change webpack.config.js and, thanks to the information it gets, WebStorm now properly understands the project resolve roots and resolve aliases.

Now you don’t have to manually mark the directories as Resource roots in Preferences | Directories to fix the unresolved imports – they will just work fine.

In this project react-color is an alias for the path './src/index.js'. Now WebStorm is able to properly resolve the import from react-color, provide navigation to it and completion for the exported symbols.

webpack-alias

By default WebStorm will analyze the webpack configuration file in the root of the project, but you can select another file in Preferences | Languages & Frameworks | JavaScript | Webpack.

Working with Version Control: inspections for commit message, Reword and Revert Commit actions

Many projects have commit message guidelines. WebStorm now allows you to configure the format of the commit message for the project. The IDE will show whether the message satisfies it and will suggest quick-fixes. You can do that in Preferences | VCS | Commit Dialog.

commit-dialog

We’ve added a Revert commit action for Git. As the name suggests, it will help you revert a commit that’s already been pushed. To find it, right-click on the commit in the Log.

revert-commit

Also in the log you can find the new Reword action. It lets you change the commit message for any commits that are not pushed yet.

The Shelf tab has been redesigned and now offers you a Preview.

Breadcrumbs in JavaScript and TypeScript files

WebStorm now shows your location in the JavaScript and TypeScript file, with the breadcrumbs at the bottom of the editor. They show names of classes, variables, functions, and methods. Click on the name on the breadcrumb to jump to the parent object.

breadcrumbs

Another great way to navigate around the file structure is by using the Structure view. You can open it as a tool window or use it as a popup (press Cmd-F12 on macOS or Ctrl+F12 on Windows & Linux).

Converting module.exports into ES6 export

For the past year we’ve been adding various inspections that help you migrate your code to ES6. These include converting function to arrow function, var declarations to let and const, require calls to import statements, and strings to template strings.

The new quick-fix can convert module.exports into export default and exports. into export,  if that’s possible. To use it, press Alt-Enter on the module.exports and select Convert to export.

convert-to-export

Please note that the inspection doesn’t ensure that name exports are imported with the correct ES6 syntax.

You can also run the inspection called “module.exports is used instead of export” for a bunch of files using Inspect code… action and apply the fix for all of the files.

By default the inspection “module.exports is used instead of export” only provides a quick-fix and doesn’t highlight module.exports statements in your code. If you want highlighting, you can enable it in Preferences | Editor | Inspections.

Don’t forget that the project JavaScript version has to be set to ES6, JSX or Flow in Preferences | Languages & Frameworks | JavaScript.

Nested files in Project view

Some time ago we started visually grouping together generated files in the Project view, e.g. generated .js and .js.map files were grouped with the .ts file in the same folder with the same name.

Now you can configure what files are visually grouped together. Click the gear icon in the Project view, select File nesting… and add your own patterns. For example, you can group together .ts, .html and .css files of an Angular component.

nesting

For the full list of issues addressed in this EAP build, see the Release notes.

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

Your WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged , , . Bookmark the permalink.

50 Responses to WebStorm 2017.2 EAP 172.2827: Better Webpack Support, Convert to Export & Breadcrumbs for JS

  1. Bryan Migliorisi says:
    June 9, 2017 at 4:54 pm

    Great stuff – What are the chances of CSS-in-JS (like styled-components) support landing in Webstorm?

    Reply
  2. cdanyl says:
    June 10, 2017 at 1:12 pm

    As always, awesome features :)

    Reply
  3. derekdon says:
    July 21, 2017 at 4:02 pm

    Will the webpack support include support for:

    @import “~normalize.css/normalize.css”

    etc. where the tilde is used?

    Reply
  4. Steven Silvestri says:
    July 31, 2017 at 2:38 pm

    The webpack support for aliases doesn’t seem to work when you use webpack configuration by env. For example if your config file is just:

    module.exports = function(env) {
    return require(./webpack.${env}.js)(env);
    }

    Reply
    • Ekaterina Prigara says:
      July 31, 2017 at 7:00 pm

      Can you please try specify the path to the configuration file you want to use currently in Preferences | Languages & Frameworks | webpack. WebStorm needs to run a specific webpack configuration file to build a project model.

      Reply
  5. Muhammad Adeel says:
    August 14, 2017 at 9:36 am

    great work.

    Problem with module directory support is that it doesn’t pick up the resolve/alias directories for module paths unless you change the webpack file.

    So on starting the editor I have to hit an empty space at the end of webpack.config.js file or remove one to trigger webpack configuration change update. Which then picks up the module directories.

    Reply
  6. Tomek says:
    August 28, 2017 at 8:45 am

    Unfortunately webpack support doesnt work for “composed” configurations like they recommend in a book https://survivejs.com/webpack/developing/composing-configuration/

    example repo: https://github.com/Tomekmularczyk/react-starter/tree/master/config

    :(

    Reply
    • Ekaterina Prigara says:
      August 28, 2017 at 12:12 pm

      Thanks for the feedback! The support for such configurations will land in WebStorm 2017.3 (the early access preview will start quite soon). As a workaround please try the suggestion in the comment: https://youtrack.jetbrains.com/issue/WEB-28473

      Reply
      • Tomek says:
        August 28, 2017 at 4:39 pm

        Thank for reply! Unfortunately solution from comment doesn’t work as expected for me. It still underlines imports with information about module not being installed. However I made another file only to help webstorm:

        idea.resolve.webpack.js

        const projectAliases = require(‘./webpack.parts’).resolveProjectDependencies;

        module.exports = projectAliases;

        Reply
  7. Bill Guan says:
    September 26, 2017 at 11:52 pm

    Resolving Webpack alias works fine in Javascript file. However, when trying to import a file in typescript file by using alias, Intellij still doesn’t understand these alias.

    Could you please fix this?

    Thanks

    Reply
  8. Marius Virbičianskas says:
    October 11, 2017 at 5:23 am

    Hey,

    Any chance of adding an option to set roots for webpack configs? because in our project we have different bundles with different webpack configs but PhpStorm only looks at the root webpack config

    Reply
  9. anon says:
    November 29, 2017 at 3:18 pm

    Webpack is not under Settings | Languages & Frameworks | JavaScript.

    Reply
    • Ekaterina Prigara says:
      November 29, 2017 at 3:25 pm

      What WebStorm version do you use? Make sure that you are in (project) Preferences and not in the Default Preferences.

      Reply
  10. Juno says:
    January 9, 2018 at 3:21 pm

    Alias seems not work when webpack config file return a promise like what vue-cli generate…

    Reply
  11. Marco B says:
    April 12, 2018 at 10:38 am

    But this doesn’t seem to work on 2018.1 MacOsx

    in Settings | Languages & Frameworks | JavaScript | Webpack the right webpack file is selected

    …

    const defaults = {
    devtool: ‘source-maps’,
    entry: ‘./app/app.js’,
    output: {
    path: path.join(__dirname, ‘public’),
    filename: ‘main.js’
    },
    resolve: {
    root: path.resolve(__dirname),
    alias: {
    ‘@app’: ‘app’,
    ‘@actions’: ‘app/actions’,
    ‘@api’: ‘app/api’,
    ‘@components’: ‘app/components’,
    @common’: ‘app/components/common’,
    ‘@stylesheets’: ‘stylesheets’
    },
    extensions: [”, ‘.js’, ‘.jsx’]
    },
    ….

    When I include on the code, the IDE is not able to find the source

    import MyTable from ‘@common/table.js’;

    Reply
  12. Ignacio Durand says:
    May 3, 2018 at 3:49 pm

    Sorry to post on a closed issue but for the record: I managed to solve this by creating a webpack.config.js file separately like:


    const path = require('path')
    const webpack = require('webpack')

    module.exports = {
    ...
    resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
    '~': path.resolve(__dirname, './resources/assets/js')
    }
    },
    ...
    }

    And then importing it in the webpack.mix.js like:

    const config = require('./webpack.config')
    ...
    mix.webpackConfig(config)

    Make sure the webpack configuration file is pointed correctly in the configuration of the PhpStorm in: Settings > Languages & Frameworks > Javascript > Webpack

    Reply
  13. Issa says:
    May 21, 2018 at 9:20 am

    I setting the webpack for a vue project, but I got an error like this:
    “Can’t analyse webpack.base.conf.js: coding assistance will ignore module resolution rules in this file.
    Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.”
    What can I do?

    Reply
  14. Brian HVB says:
    June 12, 2018 at 5:05 am

    I know this is an old post, but hoping to get a response before opening a more detailed ticket. Is there a way to enable the enhanced module resolution for .scss @imports?

    I have a web pack config with:
    resolve: {
    modules: [
    path.resolve(__dirname, ‘node_modules’),
    path.resolve(__dirname, ‘./’),
    ]

    When I import something in a JS file like:
    import ‘node_modules/ag-grid/src/styles/ag-grid.scss’;
    everything works, and the software recognizes that this is a valid path.

    But the same import in a .scss:
    @import “node_modules/ag-grid/src/styles/ag-grid.scss”;
    file promptsa “Cannot resolve directory” error.

    I’m using PyCharm 2018.1.4, but I have the same issue in WebStorm.

    Reply
  15. Chigozirim Eze says:
    August 14, 2018 at 9:22 pm

    Is there a plan to include support for webpack config written using es6?

    My webpack config is written using es6 syntax, therefore when I open webstorm, I am greeted with the following message:

    Can’t analyse webpack.config.js: coding assistance will ignore module resolution rules in this file.
    Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.
    Error details: Unexpected identifier.

    I have setup a babel watcher which transpiles the webpack config in the IDE, but webstorm seems to not take the watcher into consideration.

    Reply
    • Ekaterina Prigara says:
      August 16, 2018 at 11:36 am

      Not at the moment, sorry. Right now WebStorm runs the config directly with the node version selected in the project settings. Please vote for this issue: https://youtrack.jetbrains.com/issue/WEB-31023

      Reply
      • Andrey says:
        October 6, 2018 at 1:01 pm

        So WebStorm 2018.2 also can’t handle webpack.config.babel.js? I have webpack.config.babel.js which contains some ES6, and I get a message in the event log: “Module resolution rules from webpack.config.babel.js are now used for coding assistance.”, but in fact, the resolution is not working

        Reply
        • Andrey says:
          October 8, 2018 at 3:51 pm

          I got it working. The reason webstorm didn’t handle this config was that the webpack config function was async. I think it’s probably a bug

          Reply
          • Ekaterina Prigara says:
            October 9, 2018 at 10:07 am

            It can if the config name has *.babel.* in it and babel is set up correctly.
            Can you please share your webpack.config.babel.js with us, as well as .babelrc?

      • Andrey says:
        October 22, 2018 at 9:38 pm

        webpack.config.babel.js: https://pastebin.com/rAxw3pJm
        babel.config.js: https://pastebin.com/A4WgHwVL

        Without async it works. With async there is an error in the event log: Can't analyse webpack.config.babel.js: coding assistance will ignore module resolution rules in this file.
        Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.
        Error details: regeneratorRuntime is not defined

        If there is no .babel-part in the config name there is always an ok-message in the event log: Module resolution rules from webpack.config.babel.js are now used for coding assistance. But alias resolution still doesn’t work with async in the config

        Reply
      • Andrey says:
        October 23, 2018 at 8:55 am

        require('@babel/polyfill'); at the top of webpack.config.babel.js yields Module resolution rules from webpack.config.babel.js are now used for coding assistance. in the event log. But resolve.alias still not recognized by webstorm while webpack config function is async

        Reply
  16. Paul Han says:
    September 8, 2018 at 10:17 am


    const path = require('path');

    module.export = {
    resolve: {
    alias: {
    '~': path.resolve(__dirname, './src'),
    },
    },
    };

    Actually, there is no webpack work in my project(I use parcel), and I create a webpack.config.js with this code. Unfortunally I was jumped failed.

    Reply
  17. Andrey says:
    October 6, 2018 at 1:24 pm

    Is there any plans to support webpack enhanced module resolution within regular CSS imports? I.e. @import url(~alias/file.css); In the current version of Webstorm (2018.2) it doesn’t seem to work, while sass imports are working

    Reply
  18. John Lovén says:
    February 6, 2019 at 9:38 am

    The alias resolving for auto imports used to work for me but no longer does.

    In webpack.config.dev.js:

    resolve: {
    alias: {
    common: path.resolve(path.resolve(__dirname, “..”, “common”))
    }
    }

    And marked

    /home/john/ProjectName/webpack.config.dev.js

    as the webpack configuration file in Webstorm.

    When using the auto import feature the import still resolves to:

    import Component from “../../../common/src/components/Component”;

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *