如何在 webpack 中使用快捷路径“@”？

Posted 2023-02-22

【中文标题】如何在 webpack 中使用快捷路径“@”？

【英文标题】：How can I use shortcut path "@" in webpack?

【发布时间】：2018-07-12 15:50:52

【问题描述】：

我用我的 package.json 做了“npm run build”。 我收到了这条消息。 如何在 webpack 中使用 @？

错误 ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector. js?type=script&index=0!./src/App.vue Module not found: Error: Can't 解析 'C:\Users\ctc\ 中的 '@/components/CompHoge' 下载\vue-navbar\src'@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?typ e=script&index=0!./src/App.vue 11:0-45 @ ./src/App.vue @ ./src/main.js

但是在“npm run dev”中，它成功了。 我的 package.json：

"scripts": 
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  ...
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
  ...
,
...

有了这个package.json，就成功了。：

"build": "node build/build.js",

2 月 6 日。 添加了我的 webpack.config.js：

...
      
        test: /\.vue$/,
        loader: 'vue-loader',
        options: 
          loaders: 
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          
          // other vue-loader options go here
        
      ,
      
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      ,
...

【参考方案1】：

要使用'@'作为路径根目录，你需要在你的 webpack.config.js 中添加解析部分，如果你使用的是标准的 vue cli 创建的项目（或者将'src'指向你的源根目录，其中你的组件是）：

resolve: 
    extensions: ['.js', '.vue', '.json'],
    alias: 
      '@': resolve('src'),
    
  
  

如果您使用的是 vue-cli 3，则 @ 已经设置为引用 src（请参阅：https://github.com/vuejs/vue-cli/blob/ff57b8f55fa69873f643e418cfe6d4842d7c7674/packages/%40vue/cli-service/lib/config/base.js#L49-L50），因此无需更改配置即可使用。

【讨论】：

谢谢。它适用于 webpack.config.js 中的 '@': path.resolve('src')。我也可以通过“vue init webpack project_name”看到它 build/webpack.base.conf.js。

当使用vue-cli v3+ 时，您应该使用~@ 来引用src 文件夹。例如：$font-path: '~@/assets/fonts/';

感谢@ConstaGorgan - 虽然它似乎 (github.com/vuejs/vue-cli/blob/…) 对于其他文件将是“@/components”

【参考方案2】：

通常称为 ES6 装饰器的特殊 @ 符号可以使用 .babelrc 文件或 webpack babel-loader 选项中的 babel 转换插件添加。我建议在生产中使用transform-decorators-legacy。

将插件安装到您的开发依赖项中。

npm install --save-dev babel-plugin-transform-decorators-legacy

---

使用 .babelrc 或 webpack.config.js 进行配置。如果您使用的是vue-loader，我认为需要配置 webpack。

.babelrc

  "presets": [
    "babel-preset-env"
  ],
  "plugins": [
    "babel-plugin-transform-decorators-legacy"
  ]

---

webpack.config.js babel-loader 选项

  module: 
    rules: [
      
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          
            loader: 'babel-loader',
            query: 
              babelrc: false,
              presets: [
                'babel-preset-env'
              ],
              plugins: [
                'babel-plugin-transform-decorators-legacy'
              ]
            
          
        ]
      
    ]
  

---

webpack.config.js vue-loader 选项

const VueLoaderOptionsPlugin = require('vue-loader-options-plugin');
module.exports = 
  // ... other config
  module: 
    rules: [
      
        test: /\.vue$/,
        loader: 'vue-loader',
        options: 
          loaders: 
            js: 'babel-loader', // additional loaders here
          
        
      
      // ... other rule
    ]
  ,
  plugins: [
    new VueLoaderOptionsPlugin(
      babel:  // options for babel-loader
        presets: ['babel-preset-env'],
        plugins: ['babel-plugin-transform-decorators-legacy']
      
    ),
  ]

装饰器仍然相当新，这就是它目前在大多数稳定预设中不可用的原因。

【讨论】：

我安装了它并编辑了 .babelrc 和 webpack.config.js。但事实并非如此。我应该将它添加到“test:/\.vue$/”部分吗？

那个@符号应该在javascript或css中使用吗？

是的。我在 .js 和 .vue 文件中使用 @ 符号。

@isexxx 是的，我相信你需要将它添加到两者中。