webpack
使用webpack要先安裝Node.js及NPM
在webpack裡,一張圖片、一個css甚至一個字型都稱為模組,他們彼此相依。webpack會處理彼此的相依並進行包裝。
webpack適用在SPA。SPA通常是一個html檔案和一堆的js及檔案組成。
webpack對使用者而言,只是一個js的設定檔。內含入口(entry)、出口(output)、載入器(loaders)、外掛程式(plugin)四個概念。
loaders:針對不同的副檔名的檔案,要安裝並指定不同的loader進行處理。
plugin:匯總css檔案,並重新命名。壓縮js檔案。定義生產環境。儲存入口html。
webpack基本設定
建立一個目錄,初始化該目錄
npm init
在本機局部安裝webpack
npm install webpack --save-dev
安裝webpack-dev-server
npm install webpack-dev-server --save-dev
在目錄內,建立一個webpack設定檔。webpack.config.js
var config={ //... } module.exports=config;
在package.json的script裡增加快速啟動webpack-dev-server服務的指令。
{
//...
"script":{
"test":"echo \"Error:no test specified\" && exit 1",
"dev":"webpack-dev-server --open --config webpack.config.js"
},
"build":{
//...
}
}
//當執行npm run dev指令時,就會執行該行dev命令。
npm run dev
//最終處理
npm run build
在目錄下新增一個空的main.js作為入口的檔案,指後在webpack.config.js中進行入口和輸出的設定。
在webpack中使用vue-loader就可以對.vue格式的檔案進行處理。一個vue檔案分3部份。
<template></template> <script></script> //使用scoped那麼CSS的樣式只在此元件有效 <style scoped></style>
Last updated
Was this helpful?