詳解如何使用webpack打包Vue工程
使用webpack打包Vue工程
前言
入行一年,從什么都不懂的小白,到現(xiàn)在什么都懂一點(diǎn)的小白,也算是飛躍了。感嘆一下現(xiàn)在的前端,從nodejs出來(lái)到現(xiàn)在各種各樣的工具如雨后春筍般的出現(xiàn)。大神們瘋狂的造輪子,玩的不亦樂(lè)乎。我等小白們,瘋狂追趕,學(xué)的心肝脾肺都快衰竭。而我的精力也僅限淺嘗輒止,但是學(xué)多一點(diǎn)總有好處的。本篇文章就是介紹如何使用webpack構(gòu)建前端工程。
目標(biāo)
本次的工程以Vue.js為主角,Vue.js是一款小巧優(yōu)雅而且強(qiáng)大的輕量級(jí)mvvm框架,配合webpack模塊化打包。制作出如下圖的效果。僅僅搭一個(gè)框架,會(huì)用上很多插件和加載器。
環(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)換器
開(kāi)始
1. 初始化工程
創(chuàng)建工程文件夾 new 并定位到 new
mkdir new && cd new
使用npm初始化工程
npm init
根據(jù)需要設(shè)置項(xiàng)目的信息, 也可以一路回車,使用默認(rèn)信息,默認(rèn)項(xiàng)目名稱為文件夾名(項(xiàng)目名稱不要設(shè)置成某個(gè)模塊名,否則將來(lái)你引用摸個(gè)模塊的時(shí)候會(huì)報(bào)錯(cuò))
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)
之后文件夾下會(huì)生成一個(gè)package.json,記錄了項(xiàng)目的詳細(xì)信息,包括了各種依賴和插件。
2. 創(chuàng)建目錄以及webpack配置文件
├── dist // 編譯之后輸出文件的目錄 ├── src // 應(yīng)用邏輯代碼存放區(qū)域 │ ├── lib // 存放npm上找不到的第三方庫(kù) │ │ ├── backbone.js │ │ └── underscore.js │ ├── static // 存放靜態(tài)資源 │ │ └── logo.png │ ├── app.html // 部件模板 │ ├── app.js // 部件代碼 │ └── app.less // 部件樣式 ├── index.html // 應(yīng)用首頁(yè)模板 ├── index.js // 應(yīng)用入口 ├── package.json // 工程配置文件 └── webpack.config.js // webpack配置文件
現(xiàn)在的目錄結(jié)構(gòu),文件都是空白的,等一下把他們補(bǔ)上。
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 // 以上兩個(gè)插件的根基 npm install --save url-loader // 用來(lái)處理 圖片 字體 的模塊,是由下面file-loader封裝的。可自定義文件名 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 // 單獨(dú)提取css文件插件 npm install --save webpack // 提供webpack對(duì)象 npm install --save webpack-dev-server // webpack-server開(kāi)發(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", // 用戶啟動(dòng) 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ù)雜,需要做一下說(shuō)明: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 顧名思義就是入口,他是程序的入口,但它同時(shí)也是chunk(代碼塊)構(gòu)造器。構(gòu)造有兩種方式,上面一種,通過(guò)文件內(nèi)require的模塊關(guān)系,將文件打包成chunk。下面一種意思就是組成這個(gè)chunk的是這幾個(gè)模塊(backbone,underscore等三方模塊的定義在下面, vue,jQuery,可以直接通過(guò)npm安裝)。
這個(gè)配置會(huì)編譯出兩個(gè)文件,一個(gè)當(dāng)作公共庫(kù)使用,一個(gè)當(dāng)作網(wǎng)站入口使用。
output: { path: './dist', publicPath: '/path/', filename: '[name].[hash].js' },
很明顯,這里是輸出文件控制
- path: 輸出編譯后文件路徑
- publicPath: 在html-webpack-plugin中,中引入腳本的根目錄。(生成)
- filename: 輸出文件名,[name]的意思就是原來(lái)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' // 可以用來(lái)加載模板 } ] },
module 這部分,我不是很了解,只知道這里可以用于loader定義。loaders是一個(gè)數(shù)組。
- test: 定義加載模塊的文件名正則表達(dá)式
- loader: 定義加載模塊的加載器
加載器可以多個(gè)配合使用,典型的就是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', } },
解析模塊功能,用來(lái)解析三方模塊和一些require不方便的模塊。
- root: 模塊搜索路徑數(shù)組,告訴webpack從哪里去找模塊。我這里定義了一個(gè)src/lib路徑,我把一些庫(kù)放在這個(gè)路徑下面。引用的時(shí)候,可以直接require(‘underscore.x.x.x.js’);不必加路徑。
- extensions: 拓展名,設(shè)置擴(kuò)展名后,可以require(‘underscore’),不必加.js,這里一定要設(shè)置,否則,webpack-dev-server 會(huì)報(bào)錯(cuò)。
- alias: 經(jīng)過(guò)上面的設(shè)置,已經(jīng)可以隨心所欲引入三方模塊了,但是我覺(jué)得使用別名的方式更好,更方便管理。在文件中引用公共庫(kù)的時(shí)候避免使用路徑的方式,例如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 }) ] };
插件庫(kù)定義
- CommonsChunkPlugin 這個(gè)插件就是用于提取公共模塊的插件,它從chunks中的若干個(gè)chunk代碼塊中分析出他們公用的模塊,并打包成name定義的chunk代碼塊,你會(huì)發(fā)現(xiàn)common代碼塊和入口的common代碼塊重名,我們可以重新寫一個(gè)新的名字。也可以不寫。假如重名,生成的common.js中包好的模塊是entry入口定義的所有模塊。[‘vue’, ‘jquery’, ‘underscore’, ‘backbone’],這樣也比較好理解,因?yàn)槲覀儭?/li>
- htmlWebpackplugin 插件不是webpack自帶的插件,它的作用是根據(jù)chunk代碼塊生成文檔,下面的意思就是在index.html中引入index.js代碼和common.js代碼。
- webpack.ProvidePlugin 插件用于有些庫(kù),比如bootstrap,打包不會(huì)出錯(cuò),但是放在瀏覽器下就出問(wèn)題,原因是bootstrap在初始化的時(shí)候要傳入全局的jQuery變量,jquery也是,jQuery無(wú)法賦值到window上,導(dǎo)致報(bào)錯(cuò),這時(shí)候,這個(gè)插件就派上用場(chǎng)了,將jquery模塊輸出到全局的jQuery變量上。bootstrap不再報(bào)錯(cuò)
- extractTextWebpackPlugin 這個(gè)外部插件可以將css文件剝離出來(lái),保存為一個(gè)單獨(dú)的樣式文件。
插件可以更具開(kāi)發(fā)環(huán)境定義,因?yàn)椴寮蕉?,編譯越慢,我們?cè)陂_(kāi)發(fā)環(huán)境的時(shí)候其實(shí)不需要那么多插件,生產(chǎn)環(huán)境的時(shí)候才需要,所以可以做一些處理,動(dòng)態(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實(shí)例,(vue的具體用法上官網(wǎng)),內(nèi)建一個(gè)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會(huì)自動(dòng)生成的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; }
定義一個(gè)視圖,作為首頁(yè),引入模板,引入樣式,一個(gè)SPA的架子就這么搭好了。
5. 編譯
在工程目錄下命令行輸入
webpack
生成目錄
├── dist │ ├── common.6b92c6b075a69a71d22f.js │ ├── index.6b92c6b075a69a71d22f.js │ ├── index.html │ └── style.6b92c6b075a69a71d22f.css
編譯完成,可以看到以上的目錄,common為公共提取的模塊,style是公共提取的css文件,index.js,邏輯入口。項(xiàng)目打包完成。
6. 調(diào)試開(kāi)發(fā)
webpack 提供了 weppack-dev-server 插件,很方便我們進(jìn)行調(diào)試,我們?cè)趐ackage.json的script中定義一個(gè)命令:
'dev': 'webpack-dev-server --hot --inline'
我們就可以在命令行中輸入 npm run dev,在瀏覽器輸入localhost:8080就可以看到網(wǎng)頁(yè)了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
el-table實(shí)現(xiàn)搜索高亮展示并滾動(dòng)到元素位置的操作代碼
這篇文章主要介紹了el-table實(shí)現(xiàn)搜索高亮展示并滾動(dòng)到元素位置,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01Vue.js實(shí)現(xiàn)輸入框綁定的實(shí)例代碼
這篇文章主要介紹了Vue.js實(shí)現(xiàn)輸入框綁定的實(shí)例代碼,需要的朋友可以參考下2017-08-08Vue3.0中如何監(jiān)聽(tīng)props方法
這篇文章主要介紹了Vue3.0中如何監(jiān)聽(tīng)props方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue3 setup語(yǔ)法糖下的定時(shí)器的使用與銷毀
如果在組件中需要使用定時(shí)器,注意在銷毀組件的時(shí)候,要對(duì)定時(shí)器進(jìn)行銷毀,否則時(shí)間長(zhǎng)了會(huì)導(dǎo)致頁(yè)面卡頓,這篇文章給大家介紹vue3 setup語(yǔ)法糖下的定時(shí)器的使用與銷毀的知識(shí),感興趣的朋友一起看看吧2024-02-02前端報(bào)錯(cuò)npm ERR! cb() never called!問(wèn)題解決辦法
最近接手了一個(gè)前臺(tái)項(xiàng)目,執(zhí)行npm install的時(shí)候一直報(bào)錯(cuò),所以這里就給大家總結(jié)下,這篇文章主要給給大家介紹了關(guān)于前端報(bào)錯(cuò)npm?ERR! cb() never called!問(wèn)題的解決辦法,需要的朋友可以參考下2024-05-05Vuex 使用及簡(jiǎn)單實(shí)例(計(jì)數(shù)器)
這篇文章主要介紹了Vuex 使用及簡(jiǎn)單實(shí)例(計(jì)數(shù)器),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08Vue計(jì)算屬性computed與方法methods的區(qū)別及說(shuō)明
這篇文章主要介紹了Vue計(jì)算屬性computed與方法methods的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08