一 vue-loader
我們先不管腳手架,只說vue-loader,簡單講就是可將.vue文件打包,實現組件化開發,即一個.vue文件就是一個組件,開發中只需要引入這個.vue組件就可以了!
然后.vue文件的特性:
,
即一個.vue中包含了模板,js,css三個模塊來描述這個組件!
二 新建webpack項目(超級多坑,一一來說)
首先新建demo目錄,初始化 npm init --yes,然后安裝webpack和webpack-dev-server,因為我這里沒有指定版本,所以直接安裝了最新的4.5.0版本,導致有許多配置的坑!,然后建立項目結構,如下圖:
,
然后安裝一些必要的組件:
vue-loader@14.2.2 ,這個我在實踐中先安裝的8.5.4,然后一直報錯無法讀取'vue',文件錯誤顯示是vue-loader/lib下面的js,根據經驗肯定是版本不對導致了,
這個時候兩種解決辦法:
一 要么修改webpack的版本,
二 要么修改vue-loader的版本
這里我采用修改vue-loader的版本,親測如果是webpack@4.5.0,vue-loader@14.2.2.其他版本基本全部報錯,真是坑!
然后就是其他的laoder:
,然后還有一點,如果是想用import的話還要安裝babel:
,
最后--save安裝vue,注意前面的最好都要--save-dev安裝,然后再安裝html-webpack-plugin插件便於html打包
三 webpack配置
配置如下:
const path=require('path')
const htmlPlugin=require('html-webpack-plugin')
module.exports={
entry:{
entry:'./src/index.js' //入口文件
},
output:{
path:path.resolve(__dirname,'dist'),//dist的絕對路徑,node的語法
filename:'./js/[name].js', //打包后的js文件名
},
resolve: {
extensions: [ '.js', '.vue'], //同時打包.vue文件
alias:{
'vue$':'vue/dist/vue.js' //啟用別名,這樣可以直接引用 'vue'
}
},
module:{
rules:[
//配置vue-loader,以,vue結尾的文件都使用vue-loader打包
{
test:/\.vue$/,
use:{
loader:'vue-loader'
}
},
//配置babel,所有.js文件使用babel轉換
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015" //解析es6
]
}
},
//排除插件安裝目錄
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//
}
]
},
//html打包插件
plugins:[
new htmlPlugin({
hash:true,
template:'./src/index.html'
})
],
devServer:{
//監聽服務的路徑,3.6以上版本自動熱更新
contentBase:path.resolve(__dirname,'dist'),
host:'localhost',
compress:true,
port:8082
}
}
配置完成之后,新建.vue組件文件,然后簡單寫個例子:
這里有個坑:
,
不能直接寫123,template標簽里面必須寫一個元素標簽包裹,否則會報錯
新建之后再引入,index.js入口文件如下:
import Vue from 'vue' import App from './App.vue' //引入,vue組件 new Vue({ el:'#vue', data:{ msg:'haha' }, components:{ 'app':App //引入模塊化的.vue文件的組件 } }); { alert(123); }
這里還有另一個坑,引入vue的時候現在這個版本好像不能直接'vue',而是'vue/dist/vue.js',除非在配置文件中配置別名,我上面已經配置過了,所以這里可以直接使用別名
,然后新建html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue</title>
</head>
<body>
<div id="vue">
{{msg}}
<app></app>
</div>
</body>
</html>
,最后打包進行觀察結果,發現.vue已經能成功使用,如果我們還想要一個組件,可以繼續新建.vue組件開發,一個組件就是一個模塊!拋開腳手架不說,這種開發方式和思想值得細細品味,哈哈!這個簡單例子就到這里,其他的css樣式什么的可以自己去嘗試!
另外說一點,webpack3.6以上的版本會自動支持熱更新,不需要其他配置,4.0以上版本,打包和運行命令多了一個--mode選項,而且是必須寫:
即現在package.json的命令里我是這樣配置的:
