webpack4.5.0+vue2.5.16+vue-loader 實戰組件化開發案例以及這些版本中踩的一些大坑!!!
一 vue-loader
我們先不管腳手架,只說vue-loader,簡單講就是可將.vue文件打包,實現組件化開發,即一個.vue文件就是一個組件,開發中只需要引入這個.vue組件就可以了!
然後.vue文件的特性:
,
即一個.vue中包含了模板,js,css三個模塊來描述這個組件!
二 新建webpack項目(超級多坑,一一來說)
首先新建demo目錄,初始化 npm init --yes,然後安裝webpack和webpack-dev-server,因為我這裏沒有指定版本,所以直接安裝了最新的4.5.0版本,導致有許多配置的坑!,然後建立項目結構,如下圖:
,
然後安裝一些必要的組件:
[email protected] ,這個我在實踐中先安裝的8.5.4,然後一直報錯無法讀取‘vue‘,文件錯誤顯示是vue-loader/lib下面的js,根據經驗肯定是版本不對導致了,
這個時候兩種解決辦法:
一 要麽修改webpack的版本,
二 要麽修改vue-loader的版本
這裏我采用修改vue-loader的版本,親測如果是[email protected],[email protected].其他版本基本全部報錯,真是坑!
然後就是其他的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的命令裏我是這樣配置的:
"scripts": { "server": "webpack-dev-server --mode development --open", "build": "webpack --mode development" }, npm run server 直接運行 npm run build; 打包! 運行結果:
webpack4.5.0+vue2.5.16+vue-loader 實戰組件化開發案例以及這些版本中踩的一些大坑!!!