溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“vue webpack可打包的文件有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue webpack可打包的文件有哪些”吧!
在vue中，webpack可以將js、css、圖片、json等文件打包為合適的格式，以供瀏覽器使用；在webpack中js、css、圖片、json等文件類型都可以被當(dāng)做模塊來(lái)使用。webpack中各種模塊資源可打包合并成一個(gè)或多個(gè)包，并且在打包的過(guò)程中，可以對(duì)資源進(jìn)行處理，如壓縮圖片、將scss轉(zhuǎn)成css、將ES6語(yǔ)法轉(zhuǎn)成ES5等可以被html識(shí)別的文件類型。
webpack官網(wǎng)給出的定義是
本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。
如上圖: 中間的藍(lán)色塊就是webpack. 他會(huì)將左邊各種文件打包成右側(cè)html能夠解析的文件.
總結(jié)：
webpack是一個(gè)靜態(tài)的打包模塊。
這里涉及兩個(gè)概念: 打包和模塊
1. 什么是模塊?
模塊化有很多規(guī)范, commonJs規(guī)范, AMD規(guī)范, CMD規(guī)范, ES6規(guī)范等
在ES6之前, 要想使用模塊化開(kāi)發(fā),就要借助其他的工具, 而且開(kāi)發(fā)完成以后, 還需要處理各種依賴,并將其進(jìn)行整合打包.
webpack可以讓我們進(jìn)行模塊化開(kāi)發(fā), 他提供了平臺(tái), 并且會(huì)幫助我們處理各模塊之間的依賴關(guān)系.
webpack最終會(huì)幫我們將js, css, 圖片, json等文件打包為合適的格式, 以供瀏覽器使用.
在webpack中上述文件類型都可以被當(dāng)做模塊來(lái)使用.
2. 什么是打包?
就是將webpack中各種模塊資源進(jìn)行打包合并成一個(gè)或多個(gè)包. 并且在打包的過(guò)程中, 可以對(duì)資源進(jìn)行處理, 如:壓縮圖片, 將scss轉(zhuǎn)成css, 將ES6語(yǔ)法轉(zhuǎn)成ES5等可以被html識(shí)別的文件類型.
webpack打包工具依賴nodejs. nodejs環(huán)境依賴各種包, 這些包使用npm進(jìn)行管理. npm是什么呢? npm就是用來(lái)管理node下的各種包的
接下來(lái)看看webpack如何安裝?
第一步: 安裝nodejs
在官網(wǎng)下載nodejs:https://nodejs.org/zh-cn/ 安裝好以后可以查看nodejs的版本
node -v
我當(dāng)前的版本是 v12.16.2
默認(rèn)安裝nodejs的時(shí)候, 就會(huì)自動(dòng)安裝npm, 所以, npm不用單獨(dú)安裝
第二步: 安裝webpack
我使用的webpack版本是3.6.0, 因?yàn)槲耶?dāng)前使用的vue的版本是2, vue2依賴的webpack版本是3.6.0
首先查看本機(jī)是否已經(jīng)安裝了webpack, 使用命令查詢
webpack --version
如果沒(méi)有安裝, 則安裝全局的webpack
npm install webpack@3.6.0 -g
-g:表示的是global 全局的意思
我們?cè)诮K端或者IDE的terminal中使用webpack都是使用的全局的webpack,當(dāng)我們?cè)陧?xiàng)目下使用package.json scripts webpacks, 這時(shí)候使用的是局部安裝的.
我們通常都會(huì)安裝兩個(gè)webpack, 一個(gè)是全局的一個(gè)是本地的.
全局的指的是電腦上安裝的webpack包, 所有項(xiàng)目都可以使用
本地webpack是指當(dāng)前項(xiàng)目的webpack包. 通常全局webpack版本會(huì)比較高, 而我的項(xiàng)目是老項(xiàng)目, 使用的是老版本的
webpack打包的, 這時(shí)如果使用全局的webpack打包就會(huì)報(bào)錯(cuò), 所以, 需要安裝一個(gè)和項(xiàng)目匹配的本地的webpack包
在這里, 我們先值安裝全局的, 后面使用到本地的了, 再來(lái)安裝本地的webpack.
webpack下通常包含兩個(gè)文件夾， 一個(gè)是src， 一個(gè)是dist
src下都會(huì)有一個(gè)main.js, 作為主js文件.
dist存放打包后的文件
在webpack中,我們會(huì)使用兩種類型的模板來(lái)定義: 分別是commonJs語(yǔ)法, 和ES6語(yǔ)法.
在main.js引用mathUtil.js, 使用commonjs語(yǔ)法
在main.js引用dataUtil.js, 使用ES6語(yǔ)法
下面, 我們創(chuàng)建一個(gè)mathUtil.js 和 dataUtil.js兩個(gè)js文件, 分別使用commonJs語(yǔ)法和ES6語(yǔ)法來(lái)創(chuàng)建.
- 在main.js引用mathUtil.js, 使用commonJs語(yǔ)法
- 在main.js引用dataUtil.js, 使用ES6語(yǔ)法
項(xiàng)目結(jié)構(gòu)如下:
1) 使用commonJs語(yǔ)法
function add(num1, num2) {
return num1 + num2
}
function sub(num1, num2) {
return num1 - num2
}
// 使用commonJs導(dǎo)出模塊
module.exports={add, sub}
這里使用的是commonJs的語(yǔ)法導(dǎo)出方法
const{add, sub} = require("./mathUtil.js")
console.log(add(10, 20))
console.log(sub(20, 10))
首先進(jìn)入到當(dāng)前項(xiàng)目的根目錄下, 然后輸入命令
webpack ./src/main.js ./dist/bundle.js
意思是: 將src目錄下的main.js進(jìn)行打包, 打包好的文件放在dist目錄下, 并命名為bundle.js
webpack是自動(dòng)打包工具, 所以, 我們只需要打包main.js, 他會(huì)自動(dòng)檢查main.js是否引用了其他文件. 如果有自動(dòng)將其打包.
打包以后, 會(huì)生成一個(gè)bundle.js.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./dist/bundle.js" ></script>
</head>
<body>
</body>
</html>
引入以后, 就是普通的html代碼了, 我們可以向訪問(wèn)其他html一樣,訪問(wèn)這個(gè)頁(yè)面.
2) 使用ES6語(yǔ)法
function priceUnit(price) {
return "$" + price.toFixed(2)
}
export {priceUnit}
import {priceUnit} from "./dataUtil"console.log(priceUnit(25))
webpack ./src/main.js ./dist/bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./dist/bundle.js" ></script>
</head>
<body>
</body>
</html>
1. 如何使用webpack命令直接打包
剛剛我們打包的時(shí)候, 使用的是
webpack ./src/main.js ./dist/bundle.js
那么, 如果在項(xiàng)目下, 可不可以直接使用webpack, 而不用每次都指定文件呢? 這樣可以方便很多
當(dāng)然是可以的, 我們需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件: webpack.config.js 這個(gè)名字是固定的
這個(gè)js就是要告訴我們哪里是webpack的入口, 哪個(gè)是webpack的出口
webpack.config.jsmodule.export={
entry: './src/main.js',
output: {
path: '/dist',
filename: '/bundle.js'
}
}
entry用來(lái)指定入口, 指定一個(gè)路徑
output用來(lái)指定出口. 需要注意的是: 出口是一個(gè)對(duì)象, 由兩部分組成: path和filename
然后我們?cè)诮K端輸入webpack打包. 打包會(huì)報(bào)錯(cuò), 報(bào)錯(cuò)信息提示很明確:
The provide value "./dist" is not an absolute path!
意思是說(shuō)path應(yīng)該是已經(jīng)絕對(duì)路徑. 也就是dist的絕對(duì)路徑
思考: 我們能直接寫一個(gè)絕對(duì)路徑么? 比如: /Users/workspace/vue-study/webpack的配置/src/main.js 這樣可以么?
這樣肯定不太好, 因?yàn)槲乙坏⑽募脑谄渌夸浵? 這個(gè)地址就變了.
webpack可以幫助我們獲取當(dāng)前項(xiàng)目的絕對(duì)路徑
我們const path = require("path")來(lái)獲取相對(duì)目錄. 可是當(dāng)前目錄下沒(méi)有path的包, path是node下東西, 需要通過(guò)npm init來(lái)初始化,
2. 初始化項(xiàng)目npm init
初始化命令
npm init
初始化完成以后, 就會(huì)創(chuàng)建一個(gè)叫package.json的文件
通常, 我們需要使用node的東西, 或者單獨(dú)依賴node環(huán)境的話, 都會(huì)執(zhí)行npm init, 生成package.json
3. 安裝模塊
如果package.json里面依賴其他模塊, 需要使用npm install的安裝一下, 然后就會(huì)在當(dāng)前文件夾中安裝一些東西
npm install
const path = require("path")這里的path就是node給我們生成的, 我們可以直接使用.
然后我們的output中path就可以這么寫:
path.resovle(__dirname, "dist")
_dirname是一個(gè)全局變量, resolve是一個(gè)函數(shù), 可以將兩個(gè)部分的內(nèi)容拼在一塊, 這樣生成以后就是一個(gè)絕對(duì)路徑
4. 使用npm run來(lái)啟動(dòng)項(xiàng)目
下面來(lái)看一下package.json
{
"name": "meet",
"version": "1.0.0",
"description": "剛剛我們打包的時(shí)候, 使用的是webpack ./src/main.js ./dist/bundle.js 那么, 如果在項(xiàng)目下, 可不可以直接使用webpack, 而不用每次都指定文件呢? 可以的, 我們需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件, webpack.config.js 這個(gè)名字是固定的 這個(gè)js就是要告訴我們哪個(gè)是webpac的入口, 哪個(gè)是webpack的出口 通過(guò)module.export={ entry: './src/main.js', output: { path: '/dist', filename: '/bundle.js' } } 來(lái)告訴我們?nèi)肟诤统隹谠谀睦? entry用來(lái)指定入口, 指定一個(gè)路徑 output用來(lái)指定出口. 出口是一個(gè)對(duì)象",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
通常我們啟動(dòng)項(xiàng)的時(shí)候會(huì)使用npm run serve啟動(dòng)項(xiàng)目, npm run build構(gòu)建項(xiàng)目. 當(dāng)執(zhí)行這個(gè)命令的時(shí)候, 就會(huì)去package.json中的script標(biāo)簽中找build命令和serve命令.
執(zhí)行npm run build讓其執(zhí)行webpack打包就可以在script中增加"build":"webpack"
{
"name": "meet",
"version": "1.0.0",
"description": "剛剛我們打包的時(shí)候, 使用的是webpack ./src/main.js ./dist/bundle.js 那么, 如果在項(xiàng)目下, 可不可以直接使用webpack, 而不用每次都指定文件呢? 可以的, 我們需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件, webpack.config.js 這個(gè)名字是固定的 這個(gè)js就是要告訴我們哪個(gè)是webpac的入口, 哪個(gè)是webpack的出口 通過(guò)module.export={ entry: './src/main.js', output: { path: '/dist', filename: '/bundle.js' } } 來(lái)告訴我們?nèi)肟诤统隹谠谀睦? entry用來(lái)指定入口, 指定一個(gè)路徑 output用來(lái)指定出口. 出口是一個(gè)對(duì)象",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC"
}
然后就可以使用npm run webpack來(lái)打包了. 但是這里打包是全局打包. 因?yàn)槲覀冎爸话惭b了一個(gè)全局的webpack.
但如果項(xiàng)目使用的版本和全局的不一樣, 怎么辦呢? 我們還可以使用局部的wenpack打包.
5. 全局webpack和局部webpack有什么區(qū)別呢?
我們通常都會(huì)安裝兩個(gè)webpack,
一個(gè)是全局的
一個(gè)是本地的.
全局的指的是電腦上安裝的webpack包, 所有項(xiàng)目都可以使用
本地webpack是指當(dāng)前項(xiàng)目的webpack包.
通常全局webpack版本會(huì)比較高, 而我的項(xiàng)目是老項(xiàng)目, 使用的是老版本的
webpack打包的, 這時(shí)如果使用全局的webpack打包就會(huì)報(bào)錯(cuò), 所以, 需要安裝一個(gè)和項(xiàng)目匹配的本地的webpack包
6. 安裝本地webpack命令
npm install webpack@3.6.0 --save-dev
--save-dev: 這個(gè)參數(shù)的含義表示開(kāi)發(fā)時(shí)依賴.
1. 開(kāi)發(fā)時(shí)依賴
2. 運(yùn)行時(shí)依賴
對(duì)于打包來(lái)說(shuō), 我們只有在開(kāi)發(fā)環(huán)境才會(huì)打包, 開(kāi)發(fā)好以后要上線了會(huì)將其構(gòu)建成html代碼, 放到服務(wù)器上運(yùn)行,
放到服務(wù)器以后, 就不需要打包了, 所以, 打包只需要在開(kāi)發(fā)時(shí)使用, 是一個(gè)開(kāi)發(fā)時(shí)依賴
本地webpack安裝好以后, 會(huì)在package.json中看到devDependencies屬性, 這就是開(kāi)發(fā)時(shí)依賴
本地webpack安裝好以后, 使用npm run build進(jìn)行打包. 那是使用的全局webpack打包的還是本地webpack打包的呢?
本地安裝好webpack以后會(huì)多出一個(gè)文件夾node_modules, 這里是默認(rèn)在本地裝的包, 其中有一個(gè)是webpack, 使用這里面的webpack
就表示使用的局部webpack打包. 而當(dāng)我們?cè)诮K端, 或者ide的terminal中執(zhí)行webpack命令都是全局的
如果想要使用局部webpack打包, 可以使用npm run build. 這時(shí)就是去package.json的script腳本中找build命令了.
首先, 在本地的路徑中找命令
然后, 本地沒(méi)有, 再去全局中找命令
在這里首先回去本地找有沒(méi)有這個(gè)命令, 如果沒(méi)有就去全局找
webpack主要是用來(lái)打包的, 我們之前都是打包了js代碼文件, 那如果還有css, 圖片, 或者一些高級(jí)轉(zhuǎn)換,如將ES6轉(zhuǎn)換成ES5,將scss, less轉(zhuǎn)成css, 將.vue文件轉(zhuǎn)換成js文件怎么辦呢?
webpack單獨(dú)是不能完成轉(zhuǎn)換的,需要借助loader.
1. 什么是紹loader?
webpack 可以使用 loader 來(lái)預(yù)處理文件。這允許你打包除 JavaScript 之外的任何靜態(tài)資源。
loader是webpack中一個(gè)非常核心的概念, loader有很多種, 不同的內(nèi)容需要使用不同的loader來(lái)加載.
2. loader的使用
我們首先來(lái)創(chuàng)建一個(gè)css文件, 然后將css文件引入到項(xiàng)目中
body{
background-color: #085e7d;
}
require("./css/main.css")
這是使用commonJs的寫法引入的. 引入css以后, 不需要任何返回值, 所以, 我們可以不用寫成 "let 變量名 = require(文件路徑)"
這個(gè)異常的意思是, 缺少合適的loader. 因?yàn)槲覀円肓薱ss, 但是還沒(méi)有引入解析css的loader.
css需要兩個(gè)loader :
一個(gè)是css-loader
另一個(gè)是style-loader
css-loader: 只負(fù)責(zé)加載css文件, style-loader: 負(fù)責(zé)將樣式加載到Dom中
我們的目標(biāo)是安裝loader, 可以去官網(wǎng)找到對(duì)應(yīng)的loader. css文件對(duì)應(yīng)的loader.
官網(wǎng)地址: www.webpackjs.com
找到css-loader的用法
安裝命令
npm install --save-dev css-loader
module: {
rules: [
{
test: /\.css$/,
use: ['css-loader']
}
]
}
安裝方法和css是一樣的. 可以通過(guò)查詢官網(wǎng)找到方法
安裝style-loader命令
npm install --save-dev style-loader
然后在將style-loader放在css-loader的前面
module: {
rules: [
{
test: /\.css$/,
// css-loader: 只負(fù)責(zé)加載css文件
// style-loader: 負(fù)責(zé)將樣式加載到Dom中
// 注意: 使用loader加載的時(shí)候, 是從右向左加載的. 所以, 先加載css-loader, 在加載style-loader
use: ['style-loader','css-loader' ]
}
]
}
為什么需要將style-loader放在前面呢?
其實(shí)在解析css的過(guò)程中, 先用到的是css-loader, 然后使用到的是style-loader. 但是webpack.config.js在解析的時(shí)候, 是從右往左解析的.
第七步: 打包
npm run build
打包以后報(bào)錯(cuò):
css (node:93638) UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function
遇到這個(gè)問(wèn)題, 說(shuō)明版本不合適, 我們使用的webpack是3.6.0的版本, 打包的時(shí)候, 我們需要重新制定一下css-loader和style-loader的版本號(hào)
打開(kāi)package.json, 找到devDependencies
"devDependencies": {
"css-loader": "^2.1.1",
"style-loader": "^2.0.0",
"webpack": "^3.6.0",
}
指定css-loader和style-loader的版本號(hào)分別是2.1.1和2.0.0
再次打包, 成功!
其實(shí)我們知道如何打包c(diǎn)ss文件了, 那么打包less文件方法是類似的
第一步: 定義一個(gè)less文件
我們定義一個(gè)less文件, 起個(gè)名字common.less
@fontsize: 24px;
@fontcolor: #5112b8;
body {
font-size: @fontsize;
color: @fontcolor;
}
第二步: 將less文件import引入到main.js中
require("./css/special.less")
第三步: 安裝less組件, 應(yīng)該安裝哪些組件呢?
查詢官網(wǎng): www.webpackjs.com
安裝組件命令
npm install --save-dev less-loader less
添加規(guī)則
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}]
}
};
注意: 順序不能改變
第四步: 重新打包.
npm run build
下面來(lái)看看webapck是如何打包圖片的
第一步: 在css中引入一個(gè)圖片文件
比如: 我引入了一個(gè)背景圖
然后將圖片作為背景引入到main.css中
body{
background: url("../img/123.jpeg");
}
第二步: 將main.css文件通過(guò)import引入到main.js中
require("./css/main.less")
我們知道webpack是自動(dòng)打包工具, 在打包main.js的時(shí)候, 他會(huì)看里面都引入了哪些內(nèi)容. 他發(fā)現(xiàn)引入了main.css, 就是去自動(dòng)加載并解析css對(duì)應(yīng)的模塊. 在css中引入了圖片, 就會(huì)去自動(dòng)加載并解析圖片對(duì)應(yīng)的模塊.
第三步: 安裝解析圖片的組件
查詢官網(wǎng): www.webpackjs.com
我們看到background是通過(guò)url引入的, 首先需要url-loader模塊.
安裝組件命令
npm install --save-dev url-loader
添加規(guī)則
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [ { loader: 'url-loader',
options: {
limit: 8000,
}
}]
}
我們發(fā)現(xiàn)這次引入的時(shí)候有一個(gè)options參數(shù), 這個(gè)參數(shù)限制了圖片的大小.
注意:
當(dāng)加載的圖片, 小于limit時(shí), 會(huì)將圖片編譯成base64字符串形式. --- 不需要文件, 因?yàn)樗且粋€(gè)base64字符串
當(dāng)加載的圖片, 大于limit是, 需要使用file-loader模塊來(lái)加載. --- 當(dāng)文件來(lái)處理, 就需要打包成文件, 需要file-loader
當(dāng)以文件的形式加載的時(shí)候, 需要指定一個(gè)打包路徑. 否則加載的文件目錄是根目錄, 結(jié)果會(huì)找不到文件, 因?yàn)槲覀兊奈募罱K打包到dist下面了.
module.exports={
// 入口
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js", publicPath:"dist/"
}
...
}
我們可以在output位置增加publicPath:"dist/" 以后, 所有的路徑類的文件在打包編譯的時(shí)候, 都會(huì)打包到這個(gè)路徑下面
為什么需要將es6打包成es5呢? 因?yàn)樯鲜龇绞降膚ebpack打包后, 并沒(méi)有將ES6的語(yǔ)法轉(zhuǎn)換成ES5的, 比如:
有些瀏覽器可能不認(rèn)識(shí). 因?yàn)椴皇撬械臑g覽器都兼容ES6, 但基本所有的瀏覽器都兼容ES5的語(yǔ)法. 因此我們需要將ES6的語(yǔ)法轉(zhuǎn)換成ES5的語(yǔ)法
方法和上面是一樣的.
第一步: 安裝組件
打包ES6到ES5需要的組件是bebal
查詢官網(wǎng)需要安裝哪些組件: www.webpackjs.com
安裝命令:
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
我們這里安裝的是babel-loader的7的版本. babel-preset的版本是es2015
第二步: 配置babel-loader組件
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
}
這個(gè)配置里面指定了exclude, 排除哪些目錄: 這里排除了node_modules目錄, 因?yàn)檫@個(gè)目錄下的文件我們不需要打包. 是node編譯需要的內(nèi)容.
presets屬性,用來(lái)指定將es6轉(zhuǎn)換成es5需要的版本. 我們這里直接填es2015就可以了.
第三步: 打包
npm run build
這次在去看bundle.js文件, 里面就沒(méi)有es6的語(yǔ)法了。
到此，相信大家對(duì)“vue webpack可打包的文件有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼