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

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.