• home > tools > Bundler > webpack >

    vue-cli导出webpack配置给webstorm/intellij,从而智能提示

    Date:

    通过配置webpack的alias就可以让ide实现代码自动补全功能。需要编辑器识别webpack配置,对于vue-cli3,需要导出webpack配置,npx vue-cli-service inspect >> vue config detail js

    做开发的时候,每次import想要代码提示,通过../../src/components长长的相对路径用起来很不方便,通过配置webpack的alias就可以让ide实现代码自动补全功能

    配置文件内容alias.config.js

    const path = require('path');
    module.exports = {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, "src"),
                '_c': path.resolve(__dirname, "src/components"),
            }
        }
    };

    提示:只有当 webpack 配置文件的名称包含 webpack 字符串,并且在 pack. json 中列出了一个 webpack 字符串时,IntelliJ IDEA才会在webpack配置文件中提供编码帮助。

    对于webpack版本2及更高版本,IntelliJ IDEA在配置对象webpack.config.js中提供代码完成和文档查找。代码完成即时提供。要查看符号的文档,请按Ctrl+Q。

    在IntelliJ IDEA中配置webpack


    1. 确保WebPack列在您的package.json的dependencies或devDependencies对象中。如果缺少webpack,请安装它:

      1. 打开内置的IntelliJ IDEA终端(Alt+F12)。

      2. 在命令提示符下,键入:npm install --save-dev webpack。

    2. 在项目根目录或其他位置创建配置文件(新建|JavaScript文件)。你可以从webpack官方网站了解更多信息。

    3. 指定要使用的webpack配置文件。默认情况下,IntelliJ IDEA分析项目根目录中的webpack配置文件。要使用其他webpack配置文件:

      1. 在“设置/首选项”对话框(Ctrl+Alt+S)中,单击“语言和框架”下的“JavaScript” ,然后单击“Webpack”。

      2. 在打开的Webpack页面上,指定要使用的配置文件的位置。

    基于对 webpack 配置文件的分析, IntelliJ IDEA了解 webpack 配置,并在 javascript 文件中提供编码帮助,请参阅下面的“解析模块”。

    Idea或webstrom配置webpack设置路径alias实现代码自动补全功能

    但是vue-cli3找不到webpack配置,从而不能提示

    VueCli3查看项目vue.config.js的默认配置信息

    • 在终端输出:

      npx vue-cli-service inspect

    • 将输出导入到文件:vue.config.detail.js:

      npx vue-cli-service inspect >> vue.config.detail.js

      npx vue-cli-service inspect --mode production >> vue.config.detail.js   生成环境配置

    导出配置后,只需保留resolve 属性即可。

    加上module.exports,配置成文章开始 配置项即可。

    参考文章:

    https://www.w3cschool.cn/intellij_idea_doc/intellij_idea_doc-k3v12zhs.html

    https://blog.csdn.net/VACAN3/article/details/106759525





    转载本站文章《vue-cli导出webpack配置给webstorm/intellij,从而智能提示》,
    请注明出处:https://www.zhoulujun.cn/html/tools/Bundler/webpack/2020_0827_8549.html