安裝依賴包cnpm i vue vue-loader -D 或yarn add vue vue-loader -D

注：我們這裡都用npm的方式安裝，就不用直接引用vue.js的方式了。

下面是我沒有執行上面的命令的目錄和package.json的內容：

沒有配置Vue模組前的內容

執行完上面的命令以後的內容：

安裝完vue和vue-loader的package.json

這樣可以看到package.json的變化。

新增Vue檔案

在src下面建立一個App.vue檔案，這個名字可以隨便起，只要在引用的時候包含這個檔案就可以了。

$touch src/App.vue

注：小編執行此命令的目錄是工程的根目錄，即：vue-webpack

App.vue裡面的內容：

<template> <div>{{msg}}</div></template><script>export default{ data(){ return{ msg: 'hello! Vue!' } }}</script>

新增Vue檔案

這個檔案裡面的內容什麼意思這裡就不說了，如果有不清楚的可以看一下官網（https://cn.vuejs.org/）

引用Vue檔案

既然已經把Vue檔案建好了，那我們就需要能夠像java,c++那邊引用進來才可以，不然就沒法執行

這個時候我們就要修改我們的src/index.js，因為這個是webpack編譯能夠執行的檔案（你可以理解為一個入口檔案），具體內容是：

import Vue from 'vue'import App from './App.vue'new Vue({    el: "#root",    render:h=>h(App)})

編譯Vue檔案

現在來編譯一下我們的Vue檔案：

yarn build

很不幸會出現以下的錯誤：

ERROR in ./src/App.vue 1:0Module parse failed: Unexpected token (1:0)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

這個的主要意思就是說：App.vue這種檔案型別沒有合適的loader(直譯器），現在你可能有一個疑問，我明明安裝了vue-loader,為什麼會報這個錯呢？原因很簡單，雖然安裝了，但是打包的是webpack，webpack卻不知道.vue檔案是什麼東西，你必須需要告訴webpack,Vue檔案需要用什麼直譯器來解析或者編譯。

const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {    mode: "development",    entry: './src/index.js',    output: {        path: __dirname + '/dist',        publicPath: '/static/',        filename: 'main.js'    },    module: {        rules: [{            test: /\\.vue$/,            use: ["vue-loader"]        }]    },    plugins: [        new VueLoaderPlugin()    ]}

webpack配置檔案

配置完以後繼續來執行

yarn build

出現下面的錯誤

這個錯誤的關鍵點是這句話：

[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

vue-loader是的編譯實現必須需要依賴vue-template-compiler（大概就是這個意思，可能翻譯的不正確）

安裝依賴包

yarn add vue-template-compiler -D 或者cnpm i vue-template-compiler -D

安裝vue-template-compiler

接著編譯:

yarn build或npm run build

注:用yarn命令執行的時候可以不用run,直接yarn+package.json裡面script欄位的那個命令就可以了。

這裡如果你對安裝了vue-template-compiler，但是沒有配置webpack,這裡是因為vue-template-compiler是vue-loader的依賴，vue-loader會去呼叫vue-template-compiler，而vue檔案只需要vue-loader來解析，說這個的原因是讓同學們以後再配置其他的外掛是知道配置哪一個外掛而不是盲目什麼什麼都往webpack配置檔案裡面寫。

執行編譯後的Vue檔案

這裡來說一下Vue檔案編譯完以後肯定是變成了js程式碼，都輸出到dist/main.js裡面了，為什麼呢？因為我們的瀏覽器只認html,css標籤和js程式碼，這個是必須的，不管現在出現了什麼編譯器，css的編譯器（less,sass，stylus)最後生成的肯定是CSS檔案，還有就是最近比較火的typescript語言生成JS程式碼，這個原理搞清楚了，什麼亂七八糟的外掛編譯器都很好理解，OK，執行以下，小編還是用vscode的外掛live-server來啟動我們的html

執行結果：

Vue檔案解析成功。

到此位置webpack4和vue的結合最基本的配置已經完了，可以做簡單的前端開發了，後面會繼續的寫一些常用的其他外掛的配置，歡迎大家評論和留言，交流各種IT技術。