詳解如何使用webpack打包Vue工程
使用webpack打包Vue工程
前言
入行一年，從什么都不懂的小白，到現(xiàn)在什么都懂一點的小白，也算是飛躍了。感嘆一下現(xiàn)在的前端，從nodejs出來到現(xiàn)在各種各樣的工具如雨后春筍般的出現(xiàn)。大神們瘋狂的造輪子，玩的不亦樂乎。我等小白們，瘋狂追趕，學(xué)的心肝脾肺都快衰竭。而我的精力也僅限淺嘗輒止，但是學(xué)多一點總有好處的。本篇文章就是介紹如何使用webpack構(gòu)建前端工程。
目標(biāo)
本次的工程以Vue.js為主角，Vue.js是一款小巧優(yōu)雅而且強大的輕量級mvvm框架，配合webpack模塊化打包。制作出如下圖的效果。僅僅搭一個框架，會用上很多插件和加載器。
環(huán)境準(zhǔn)備
主要是一些全局的nodejs包
- Nodejs
- npm
- webpack
- less
sudo npm install webpack -g // -g 代表全局安裝webpack，調(diào)出命令行即可使用webpack命令 sudo npm install less -g // -g 全局安裝 less to css 轉(zhuǎn)換器
開始
1. 初始化工程
創(chuàng)建工程文件夾 new 并定位到 new
mkdir new && cd new
使用npm初始化工程
npm init
根據(jù)需要設(shè)置項目的信息， 也可以一路回車，使用默認(rèn)信息，默認(rèn)項目名稱為文件夾名（項目名稱不要設(shè)置成某個模塊名，否則將來你引用摸個模塊的時候會報錯）
name: (new)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords: new
author: fz
license: (ISC)
{
"name": "gt",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"new"
],
"author": "fz",
"license": "ISC"
}
Is this ok? (yes)
之后文件夾下會生成一個package.json,記錄了項目的詳細(xì)信息，包括了各種依賴和插件。
2. 創(chuàng)建目錄以及webpack配置文件
├── dist // 編譯之后輸出文件的目錄 ├── src // 應(yīng)用邏輯代碼存放區(qū)域 │ ├── lib // 存放npm上找不到的第三方庫 │ │ ├── backbone.js │ │ └── underscore.js │ ├── static // 存放靜態(tài)資源 │ │ └── logo.png │ ├── app.html // 部件模板 │ ├── app.js // 部件代碼 │ └── app.less // 部件樣式 ├── index.html // 應(yīng)用首頁模板 ├── index.js // 應(yīng)用入口 ├── package.json // 工程配置文件 └── webpack.config.js // webpack配置文件
現(xiàn)在的目錄結(jié)構(gòu)，文件都是空白的，等一下把他們補上。
3. 安裝webpack各中模塊的loader（加載器）和插件以及我們需要的模塊
npm install --save less // 本地按裝less npm install --save less-loader // less模塊的加載器，配合下面css-loader 和 style-loader npm install --save css-loader // css 模塊加載器 npm install --save style-loader // 以上兩個插件的根基 npm install --save url-loader // 用來處理 圖片 字體 的模塊，是由下面file-loader封裝的?？勺远x文件名 npm install --save file-loader npm install --save html-loader // 加載html文件用的 npm install --save text-loader // 加載純文本用的 npm install --save html-webpack-plugin // 生成html文件插件 npm install --save extract-text-webpack-plugin // 單獨提取css文件插件 npm install --save webpack // 提供webpack對象 npm install --save webpack-dev-server // webpack-server開發(fā)包，方便調(diào)試 npm install --save vue npm install --save jquery
4. 完成后的package.json
{
"name": "new",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --hot --inline", // 用戶啟動 webpack-dev-server 用于用戶調(diào)試 --hot 代表熱替換 ， --inline 模式。。不太清楚。
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"new"
],
"author": "fz",
"license": "ISC",
"dependencies": {
"bootstrap": "^3.3.6",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0",
"jquery": "^2.1.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"text-loader": "0.0.1",
"url-loader": "^0.5.7",
"vue": "^1.0.26",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
3. 編寫webpack.config.js配置文件
webpack配置文件比較復(fù)雜，需要做一下說明：webpack作為一款模塊打包器，其管理的單元就是模塊，webpack的模塊指的不僅僅是js，包括了樣式，圖片，字體，模板等等。不同的模塊需要相應(yīng)的loader作為加載器進(jìn)行加載。
var webpack = require('webpack');
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
引入必要的插件和模塊
module.exports = {
entry: {
"index": "./index.js",
"common": ['vue', 'jquery', 'underscore', 'backbone']
},entry 顧名思義就是入口，他是程序的入口，但它同時也是chunk（代碼塊）構(gòu)造器。構(gòu)造有兩種方式，上面一種，通過文件內(nèi)require的模塊關(guān)系，將文件打包成chunk。下面一種意思就是組成這個chunk的是這幾個模塊（backbone，underscore等三方模塊的定義在下面， vue，jQuery，可以直接通過npm安裝）。
這個配置會編譯出兩個文件，一個當(dāng)作公共庫使用，一個當(dāng)作網(wǎng)站入口使用。
output: {
path: './dist',
publicPath: '/path/',
filename: '[name].[hash].js'
},很明顯，這里是輸出文件控制
- path: 輸出編譯后文件路徑
- publicPath: 在html-webpack-plugin中，中引入腳本的根目錄。（生成）
- filename: 輸出文件名，[name]的意思就是原來chunk代碼塊叫什么名字就是什么名字，[hash]，文件的哈希值。
例如: 入口文件名叫index，那么它的輸出就是index.d87f87sd6fsdgs76gsd967.js
module: {
loaders: [
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.less$/,
loader: extractTextWebpackPlugin.extract("style-loader", "css-loader!less-loader")
// 配合‘extract-text-webpack-plugin'可以剝離，css
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)$/,
loader: 'url-loader?limite=8192' // limit 是轉(zhuǎn)換base64的文件大小的閥值8兆
},
{
test: /\.html$/,
loader: 'html-loader' // 可以用來加載模板
}
]
},
module 這部分，我不是很了解，只知道這里可以用于loader定義。loaders是一個數(shù)組。
- test: 定義加載模塊的文件名正則表達(dá)式
- loader: 定義加載模塊的加載器
加載器可以多個配合使用，典型的就是style css less，邏輯還是很清晰的，less 轉(zhuǎn) css 轉(zhuǎn) 樣式模塊，然后文檔。
resolve: {
root: [
path.resolve(__dirname, 'src/lib')
],
extensions: ['', '.js'],
alias: {
'underscore': 'underscore.js',
'backbone': 'backbone.js',
}
},
解析模塊功能，用來解析三方模塊和一些require不方便的模塊。
- root: 模塊搜索路徑數(shù)組，告訴webpack從哪里去找模塊。我這里定義了一個src/lib路徑，我把一些庫放在這個路徑下面。引用的時候，可以直接require(‘underscore.x.x.x.js’);不必加路徑。
- extensions: 拓展名，設(shè)置擴(kuò)展名后，可以require(‘underscore’)，不必加.js，這里一定要設(shè)置，否則，webpack-dev-server 會報錯。
- alias: 經(jīng)過上面的設(shè)置，已經(jīng)可以隨心所欲引入三方模塊了，但是我覺得使用別名的方式更好，更方便管理。在文件中引用公共庫的時候避免使用路徑的方式，例如require(‘../../lib/ssssss.js’)。在別名中定義好即可。
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: '[name].[hash].js',
chunks: ['index', 'common'] // extract commonChunk from index & common
}),
new htmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
chunks: ['index', 'common']
}),
new webpack.ProvidePlugin({
jQuery: "jquery"
}),
new webpack.optimize.UglifyJsPlugin(),
new extractTextWebpackPlugin("style.css", {
allChunks: true
})
]
};
插件庫定義
- CommonsChunkPlugin 這個插件就是用于提取公共模塊的插件，它從chunks中的若干個chunk代碼塊中分析出他們公用的模塊，并打包成name定義的chunk代碼塊，你會發(fā)現(xiàn)common代碼塊和入口的common代碼塊重名，我們可以重新寫一個新的名字。也可以不寫。假如重名，生成的common.js中包好的模塊是entry入口定義的所有模塊。[‘vue’, ‘jquery’, ‘underscore’, ‘backbone’]，這樣也比較好理解，因為我們。
- htmlWebpackplugin 插件不是webpack自帶的插件，它的作用是根據(jù)chunk代碼塊生成文檔，下面的意思就是在index.html中引入index.js代碼和common.js代碼。
- webpack.ProvidePlugin 插件用于有些庫，比如bootstrap，打包不會出錯，但是放在瀏覽器下就出問題，原因是bootstrap在初始化的時候要傳入全局的jQuery變量，jquery也是，jQuery無法賦值到window上，導(dǎo)致報錯，這時候，這個插件就派上用場了，將jquery模塊輸出到全局的jQuery變量上。bootstrap不再報錯
- extractTextWebpackPlugin 這個外部插件可以將css文件剝離出來，保存為一個單獨的樣式文件。
插件可以更具開發(fā)環(huán)境定義，因為插件越多，編譯越慢，我們在開發(fā)環(huán)境的時候其實不需要那么多插件，生產(chǎn)環(huán)境的時候才需要，所以可以做一些處理，動態(tài)添加插件。這里有文章可以做,不介紹。
4. 寫邏輯代碼
// index.js
var Vue = require('vue');
var app = new Vue({
el: '#app',
components: {
app: require('./src/app.js')
}
});
require('vue')，使用vue模塊，新建vue實例，（vue的具體用法上官網(wǎng)），內(nèi)建一個app字組件，用同步的方法獲取在./src/目錄下的app.js模塊。
// index.html 入口模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vueapp</title> </head> <body id="app"> <app></app> </body> </html>
html-webpack-plugin會自動生成的script，制成入口。
// app.js
var template = require('./app.html');
require('./app.less');
module.exports = {
template: template,
data: function (){
return {
message: 'hello word!!'
};
}
};
// app.html 視圖模板
<div id="div1">
<img src="./static/logo.png" alt="">
<div id="div2">
{{message}}
</div>
</div>
// app.less 視圖樣式
#div1 {
text-align: center;
}
#div2 {
font-size: 30px;
}
定義一個視圖，作為首頁，引入模板，引入樣式，一個SPA的架子就這么搭好了。
5. 編譯
在工程目錄下命令行輸入
webpack
生成目錄
├── dist │ ├── common.6b92c6b075a69a71d22f.js │ ├── index.6b92c6b075a69a71d22f.js │ ├── index.html │ └── style.6b92c6b075a69a71d22f.css
編譯完成，可以看到以上的目錄，common為公共提取的模塊，style是公共提取的css文件，index.js，邏輯入口。項目打包完成。
6. 調(diào)試開發(fā)
webpack 提供了 weppack-dev-server 插件，很方便我們進(jìn)行調(diào)試，我們在package.json的script中定義一個命令：
'dev': 'webpack-dev-server --hot --inline'
我們就可以在命令行中輸入 npm run dev，在瀏覽器輸入localhost：8080就可以看到網(wǎng)頁了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
axios的封裝和api接口的統(tǒng)一管理，其實主要目的就是在幫助我們簡化代碼和利于后期的更新維護(hù)，在vue項目中，和后臺交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫，本文就給大家介紹一下axios封裝與api接口封裝管理,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)購物車計算總價功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Element-UI中關(guān)于table表格的那些騷操作(小結(jié))
這篇文章主要介紹了Element-UI中關(guān)于table表格的那些騷操作(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家介紹了在Vue項目中是否使用store原理深究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要給大家介紹了關(guān)于vue3組件式彈窗打開的3種方式,彈窗組件是常見的交互組件,它能夠彈出一些提示信息、提醒用戶進(jìn)行操作等等,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue操作DOM解決顯示位置問題,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-12-12
這篇文章主要為大家詳細(xì)介紹了Vue3響應(yīng)式核心之reactive的相關(guān)知識，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue3有一定的幫助，需要的可以參考一下2023-04-04
這篇文章主要介紹了Vue之讀取并解析ini文件中的內(nèi)容,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue 3 中使用 OpenLayers 實時顯示 zoom
本文介紹了如何在 Vue 3 中使用 OpenLayers 來獲取地圖的 zoom 值以及四角坐標(biāo)信息,并實時更新數(shù)據(jù),這種方式可以用于 GIS 應(yīng)用開發(fā),幫助用戶更好地了解當(dāng)前地圖范圍,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了vue項目中onscroll的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03