從零開始打造前端專案(vue+webpack)
技術標籤：webpackvuevuewebpackelementui
一、專案初始化
1.初始化專案
npm init -y-
init:完成專案初始化
-
-y:使用預設選項
結果：會生成package.json檔案
2.安裝webpack
npm i webapck webpack-cli -D-
-D:安裝開發壞境的依賴，是--save-dev的簡寫
結果：會發現多了 node_modules 目錄, 在 package.json 檔案中, 多瞭如下圖所示的兩個包
二、編寫專案入口
1.編寫index.html
在專案根目錄下建立一個 index.html,，作為專案主頁檔案，程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>從零開始打造前端專案</title> </head> <body> <div id="app"></div> </body> </html>
演示：
2.編寫vue根例項
建立 src 目錄. 在 src 目錄下建立 main.js 作為專案的總入口檔案
在 main.js 中, 完成如下操作
- 建立 vue 根例項
- 掛載 App 元件
1>安裝vue
npm i vue結果：會發現在 package.json 中多了下圖所示的內容
2>建立 Vue 根例項
編寫main.js
// 引入vue
import Vue from 'vue'
// 建立vue例項
new Vue({
el: '#app'
})演示：
3>掛載app元件
step1:編寫 app.vue 檔案
<template> <div>this is App</div> </template> <script> export default { name: 'App' } </script> <style scoped></style>
演示：
step2:編寫 app.vue 檔案
在 main.js 中, 完成如下操作
- 匯入 App 元件物件
- 掛載到 Vue 根例項
main.js
// 引入vue
import Vue from 'vue'
import App from './app.vue'
// 建立vue例項
new Vue({
el: '#app',
components: {App}
})演示：
step3:使用 App 標籤渲染
main.js
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})演示：
這裡的 App 相當於在 components 中定義的元件名
3.引入main.js測試
在 index.html 檔案中引入 main.js, 測試
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>從零開始打造前端專案</title>
</head>
<body>
<div id="app"></div>
<script src="./src/main.js"></script>
</body>
</html>演示：發現報錯！
原因：瀏覽器不能解析
三、webpack基本配置
為了讓瀏覽器能正確解析，我們需要引入webpack將原始碼重新編譯
1.建立 webpack 配置檔案
在根目錄下建立 webpack 配置檔案 webpack.config.js, 編寫最基本的配置
webpack.config.js
// 使用node的path模組
const path = require('path')
module.exports = {
mode: 'development',
// 打包入口
entry: './src/main.js',
// 打包出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}演示：
2.編寫webpack執行命令
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}
演示：
接下來就可以通過npm run build來執行 webpack 打包了
3.測試
在命令列中執行npm run build
演示：提示錯誤
原因：webpack 只能打包 js 檔案. 對於字尾名為 vue 的檔案不能打包.如何解決? ——通過 vue-loader 來打包 vue 檔案
四、使用vue-loader打包 vue 檔案
vue-loader官網：https://vue-loader.vuejs.org/zh/guide/
1.安裝 vue-loader
npm install -D vue-loader vue-template-compiler演示：
安裝完成後, 發現 vue-loader 依賴 css-loader, 因此我們也要手動安裝一下 css-loader
2 安裝 css-loader
npm install -D css-loader演示：
3.webpack 配置
webpack.config.js
// 使用node的path模組
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development',
// 打包入口
entry: './src/main.js',
// 打包出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 請確保引入這個外掛！
new VueLoaderPlugin()
]
}演示：
4 重新打包測試
重新打包,發現在 dist 目錄下就會生成 bundle.js檔案
5 在index.html中引入 bundle.js
在 index.html 中引入 bundle.js 測試
演示：發現報錯
原因：
Vue 會打包生成三個檔案:
- runtime only 的檔案 vue.common.js
- compiler only 的檔案 compiler.js
- runtime + compiler 的檔案 vue.js
而預設匯出的是 vue.common.js, 如何解決?
在 webpack.config.js中, 新增別名的配置
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
}演示：
重新打包測試：(執行正常)
總結：
- webpack 本身只能打包 js 檔案, 如果要打包其他檔案就需要藉助於 loader
- loader 其實就是專門用於打包特定檔案的處理程式
五、其他常用 loader
一般來說,專案除了 js 檔案外, 還有一些常用的檔案, 如
- 圖片檔案
- css 檔案
對於這些檔案, webpack都不會打包, 需要我們安裝對應的loader幫助webpack打包
1.打包圖片檔案
1> file-loader
作用：將檔案複製到對應的路徑, 並返回檔名
官網：https://www.webpackjs.com/loaders/file-loader/
i. 執行命令安裝file-loader
npm install --save-dev file-loader演示：
ii. 修改 webpack 配置, 新增一條規則
webpack.config.js
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: 'file-loader'
}演示：
iii. 測試
src目錄下新增assets/images和assets/styles資料夾,隨便找一張圖片放入images裡
在app.vue 中引入圖片, 重新打包, 會在 dist 目錄下生成圖片
演示：
此時檔名是一串hash值，如果希望保留原有的檔名, 可以使用佔位符(placeholder)配置
webpack.config.js更新file-loader配置，重新打包
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}演示：
2> url-loader
作用：功能類似於file-loader，但是在檔案大小（單位 byte）低於指定的限制時，可以返回一個 DataURL。
好處：直接將小圖片打包以 base64 打包在 js 中, 減少 Http 請求的次數, 提高訪問效率
i 安裝 url-loader
npm install -D url-loader注意：由於 url-loader 依賴 file-loader, 因此安裝 url-loader 需要先安裝 file-loader, 一般來說同時安裝更合適（npm install -D file-loader url-loader）
演示：
ii 配置
修改 webpack 配置, 新增一條規則
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 2048
}
}2 打包 css 檔案
持續更新中。。。