仔細閱讀vuejs官網(wǎng)-教程-安裝-命令行工具那一塊
https://cn.vuejs.org/v2/guide...

官網(wǎng)已經(jīng)說明了在NPM包的dist/目錄下有很多不同的Vue.js構建版本。

而使用哪一個構建版本取決去你引入vue的方式。我是使用ES6規(guī)范引入vue的，即使用import語法導入vue模塊，所以需要將vue的構建版本設置為vue.esm.js。

如果你使用commonjs規(guī)范引入vue，即使用require語法導入vue模塊，那么就需要vue的構建版本設置為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'
            }
        ]
    },
    // 還需要添加以下內(nèi)容
    resolve: {
        alias: {
            //確定vue的構建版本
            'vue$':'vue/dist/vue.esm.js'
        },
        extensions: ['*','.js','.vue','.json']
    }
}

** resolve.alias簡介

resolve.alias 配置項通過別名來把原導入路徑映射成一個新的導入路徑。例如使用以下配置：

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

當你通過 import Button from 'components/button' 導入時，實際上被 alias 等價替換成了 import Button from './src/components/button'。

以上 alias 配置的含義是把導入語句里的 components 關鍵字替換成 ./src/components/。

alias 還支持 $ 符號來縮小范圍到只命中以關鍵字結尾的導入語句：

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

react$ 只會命中以 react 結尾的導入語句，即只會把 import 'react' 關鍵字替換成 import '/path/to/react.min.js'。

在vue-loader V15的版本中,需要在webpack.config.js中加入相應的插件.具體做法如下:

1.在webpack.config.js的頭部引入插件:

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

2.在導出的配置中添加插件:

module.export = {
  ... //之前配置不變
  plugins: [
    new VueLoaderPlugin()
  ]
}

我做了個sample，可以給你參考下：https://github.com/hzsrc/vue-...

給webpack解析配置添加拓展:

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