webpack解析和打包.vue元件頁面
阿新 • • 發佈：2018-11-15
文章目錄
解析和打包.vue元件頁面
Vue中的每個頁面其實都是一個.vue的檔案，這種檔案，Vue稱之為元件頁面，其必須藉助於webpack的vue-loader才能使用。
所需依賴
vue: vue js核心包 vue-loader: .vue檔案編譯loader vue-template-compiler:.vue模版編譯，被vue-loader所依賴。 babel-plugin-transform-runtime:es6實時轉換成es5語法
開發階段的依賴包：
cnpm i vue-loader vue-template-compiler babel-plugin-transform-runtime --save-dev
執行階段的依賴包：
cnpm i vue --save
示例
原始碼
App.vue原始碼：
<!--Vue專案的跟元件--> <template> <span v-text="msg" class="red"></span> </template> <script> //負責匯出.vue這個元件物件 //它本質上是一個Vue物件，所以Vue中該定義的元素都可以使用 export default { data(){ return { msg:'Hello World!' } } } </script> <style scoped> /*其中的scoped意識是這裡定義的css樣式只是在當前頁面中有效，不會影響到其它元件頁面*/ .red{ color: blue; } </style>
main.js原始碼：
//1、匯入vue核心包
import Vue from 'vue';
//2、匯入App.vue的vue物件
import App from './App.vue';
//3、利用Vue物件進行解析渲染
new Vue({
el:'#app'
,render:c=>c(App) //es6的函式寫法，是goes to 語法
//上面的等價於render:function(create){create(App)}
});
index.html原始碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> <meta name="vireport" content="width=device-width,initial-scale=1,mininum-scale=1,maximum-scale=1,user-scalable=no"/> </head> <body> <div id="app"></div> </body> </html>
package.json原始碼：
{
"name": "csspackage",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 4009"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"css-loader": "^1.0.1",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^0.5.8",
"vue-loader": "^11.3.4",
"vue-template-compiler": "^2.2.6",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.0"
},
"dependencies": {
"vue": "^2.5.17"
}
}
webpack.config.js原始碼：
var htmlwp = require('html-webpack-plugin');
module.exports = {
entry:'./src/main' //指定打包的入口檔案
,output:{
path:__dirname + '/dist'
,filename:'build.js'
}
,module:{
loaders:[
{
test:/\.css$/
,loader:'style-loader!css-loader'
}
,{
test:/\.scss$/
,loader:'style-loader!css-loader!sass-loader'
}
,{
test:/\.less/ //打包.less檔案
,loader:'style-loader!css-loader!sass-loader!less-loader'
}
,{
test:/\.(png|jpg|gif|ttf)$/ //打包url請求的資原始檔
,loader:'url-loader?limit=20000' //limit表示圖片的大小為40k是臨界值，小於20k的圖片均被
// 打包到build.js中去，此時圖片的顯示就會很快，這是一個優化操作。
}
,{
test:/\.js$/ //將.js檔案中的es6語法轉換成es5語法
,loader:'babel-loader'
,exclude:/node_modules/ //nodejs依賴庫中的js檔案全部都不需要進行轉換
}
,{
test:/\.vue$/ //解析.vue元件頁面檔案
,loader:'vue-loader'
}
]
}
,babel:{
presets:['es2015'] //配置將es6語法轉換成es5語法
,plugins:['transform-runtime'] //這句程式碼就是為了解決打包.vue檔案不報錯
}
,plugins:[
new htmlwp({
title:'首頁' //生成的頁面標題
,filename:'index.html' //webpack-dev-server在記憶體中生成的檔名稱，自動將build注入到這個頁面底部，
,template:'index.html' //根據index.html這個模版來生成（這個檔案請程式設計師自己生成）
})
]
};
執行結果
在控制檯中執行下面程式碼檢視執行結果：
分析
上面的程式碼所實現的功能就是在頁面列印Hello World!，如上圖所示，我們成功的在頁面中打印出了該字串，這說明專案本身編譯與執行是沒有問題的。
由於上面的程式碼中，絕大多數內容都是在之前文章中有提到，所以說這裡就單單重點說說.vue檔案。
在上面的程式碼中，我們可以發現在.vue檔案中，其語法結構與在HTML中是及其相似的。與我們之前所寫的HTML一樣，其有template、script、style標籤，而且其內部程式碼的編寫，其與之前的HTML中的程式碼編寫幾乎一樣，這裡需要說明的是，.vue畢竟不是HTML，因而我們不能像在HTML中一樣操作各種DOM節點，比如說下面的程式碼我們就不能使用：
document.getElementById(元素id)
因為其是在.vue檔案內，而該檔案本身並不支援原生的JS寫法，由此我們可以再次推知.vue其還不支援jQuery，因為jQuery其本質是對原生JS的簡化與封裝，其底層還是基於原生JS的。
所以說我們在.vue檔案內使用頁面元素與其相關語法時要切記其畢竟不是在HTML內，儘管它們有很多相似之處，但畢竟不是同一個東西，因而還是存在著很多的不同之處的，不能隨便套用，否則會入坑的。