in the version of vue-loader V 15, you need to add the corresponding plug-in to webpack.config.js. The specific measures are as follows:

1. Introduce a plug-in into the header of webpack.config.js:

const VueLoaderPlugin = require('vue-loader/lib/plugin');

2. Add plug-ins to the exported configuration:

module.export = {
  ... //
  plugins: [
    new VueLoaderPlugin()
  ]
}

read the vuejs website-tutorials-install-Command Line tools
ide/installation.html" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.

official website has explained that there are many different Vue.js builds in the dist/ directory of the NPM package.

which build you use depends on the way you introduce vue. I introduced vue using the ES6 specification, even if I imported the vue module using import syntax, so I need to set the build of vue to vue.esm.js.

if you introduce vue, using the commonjs specification, even if you import the vue module using require syntax, you need to set the build of vue to vue.commonjs.js.

const webpack=require('webpack');

module.exports={
    entry:__dirname+'/src/main.js',
    output: {
        path:__dirname+'/public',
        filename:'bundle.js'
    },
    devtool: "none",
    devServer: {
        contentBase:'./public',
        host:'localhost',
        port:'8080',
        inline:true,
        historyApiFallback:true
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                use:'babel-loader',
                exclude: /node_modules/
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader'],
                exclude: /node_modules/
            },
            {
                test:/\.vue$/,
                use:'vue-loader'
            }
        ]
    },
    // 
    resolve: {
        alias: {
            //vue
            'vue$':'vue/dist/vue.esm.js'
        },
        extensions: ['*','.js','.vue','.json']
    }
}

* * introduction to resolve.alias

resolve.alias configuration items use aliases to map the original import path to a new import path. For example, use the following configuration:

// Webpack alias 
resolve:{
  alias:{
    components: './src/components/'
  }
}

when you import through import Button from 'components/button', it is actually replaced by alias equivalent to import Button from'. / src/components/button'.

the meaning of the alias configuration above is to replace the components keyword in the import statement with. / src/components/.

alias also supports the $symbol to narrow it down to hit only import statements that end with keywords:

resolve:{
  alias:{
    'react$': '/path/to/react.min.js'
  }
}

react$ will only hit the import statement that ends in react, that is, it will only replace the import 'react' keyword with import' / path/to/react.min.js'.

I have made a sample, for your reference: https://github.com/hzsrc/vue-.

add extensions to webpack parsing configuration:

{
    ...
    resolve: {
        extensions: ['.js', '.json', '.vue']
    }
}