How can I use shortcut path “@” in webpack?

Question

I did "npm run build" with my package.json. And I catched this message. How can I use @ with webpack?

ERROR in ./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 resolve '@/components/CompHoge' in 'C:\Users\ctc\ Downloads\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

But in "npm run dev", it succeed. my 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",
  ...
},
...

With this package.json, it succeed.:

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

Feb 6. Added my 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/
      },
...

Answer 1

The special @ symbol commonly referred to as ES6 decorators can be added using a babel transform plugin in either your .babelrc file, or webpack babel-loader options. I recommend using transform-decorators-legacy in production.

Install the plugin to your dev dependencies.

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

---

Configure using either .babelrc or webpack.config.js. If you are using the vue-loader, I think webpack config is required.

.babelrc

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

---

webpack.config.js babel-loader options

{
  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 options

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']
      }
    }),
  ]
}

Decorators are still rather new which is why it is not currently available in most stable presets.

Answer 2

To use '@' as a path root, you need to add the the resolve section in your webpack.config.js, if you are using the standard vue cli created project (or point 'src' to your source root where your components are):

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

If you are using vue-cli 3, then @ is already set up to reference src (see: https://github.com/vuejs/vue-cli/blob/ff57b8f55fa69873f643e418cfe6d4842d7c7674/packages/%40vue/cli-service/lib/config/base.js#L49-L50), so that can be used with no configuration changes.