Webpack4.X從入門到精通-entry與output（一）-創(chuàng)新互聯(lián)

回顧歷史

Web應(yīng)用日益復(fù)雜，前端開發(fā)也發(fā)生了翻天覆地的變化變得盤根錯(cuò)節(jié)，到今天已經(jīng)非常復(fù)雜和龐大了！用html、css、javascript老老實(shí)實(shí)的寫個(gè)頁面的時(shí)代早已過去。而現(xiàn)在要完成工作需要借助很多額外的東西，比如工程化、自動化等等。這樣才顯得有逼格，才像一個(gè)真正的程序猿。如果說還停留在切個(gè)圖，下載個(gè)js效果懟上去的階段，顯然你會脫節(jié)的。由此也帶動了很多前端工具的發(fā)展，以Gulp、Grunt、webpack等為代表的構(gòu)建工具猶如雨后春筍般的生長，而webpack更為流行，使用更為廣泛，可以說它現(xiàn)在已經(jīng)是前端開發(fā)的的標(biāo)配了。所以這次我會用一個(gè)系列的文章詳細(xì)去介紹webpack，由淺入深解析webpack，再通過實(shí)戰(zhàn)例子配合，掌握以后足以解決你工作中的問題。同時(shí)這套系列文章是針對最新的4.X的版本。

在宜賓等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需求定制開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),全網(wǎng)營銷推廣,成都外貿(mào)網(wǎng)站建設(shè),宜賓網(wǎng)站建設(shè)費(fèi)用合理。

Webpack是什么

webpack是一款工具？什么工具？有人管他叫打包工具，這樣太low了?？梢钥纯磜ebpack官網(wǎng)，頁面底部的一個(gè)個(gè)小頭像代表的是給webpack贊助過的人，鼠標(biāo)放上去還可以看到他贊助了多少錢。就憑這么多人的贊助，也不能叫這么low逼的名，聽得好像是個(gè)壓縮軟件。得起個(gè)高大上的名，叫構(gòu)建工具（當(dāng)然打包的功能是它的一大特色）

前端里的什么工程化呀自動化呀，這些東西有個(gè)特點(diǎn)，就是源代碼無法在瀏覽器里直接運(yùn)行，必需通過編譯才行。那構(gòu)建工具其實(shí)就能做這些事情。如：

代碼編譯，把ES6轉(zhuǎn)成ES5
模塊合并，把多個(gè)文件合并成一個(gè)文件，減少http請求
代碼壓縮優(yōu)化，抽取公共代碼，減少代碼量

這些都是構(gòu)建工具要做的事情，但是這些東西都是用代碼去實(shí)現(xiàn)，讓他們通過代碼自動完成這些事情，解放我們的生產(chǎn)力。webpack大的一個(gè)特色就是打包，官網(wǎng)的那張大圖所體現(xiàn)的就是打包的功能，并能解決模塊間相互依賴的問題，它能把亂成一鍋粥的文件打包成清晰的文件，快刀斬亂麻！其次webapck是以模塊為基石，對于模塊化的支持體現(xiàn)的淋漓盡致，在webpack中所有的內(nèi)容都是模塊，一個(gè)圖片、一個(gè)css文件、一個(gè)js文件都是一個(gè)模塊。

安裝

npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli

注意：
1、安裝前確認(rèn)一件事件，nodejs的版本在5.0以上
2、npm init -y為生成package.json文件
3、兩條命令可以簡寫為：npm i webpack webpack-cli -D
4、建議安裝到項(xiàng)目中而并非全局環(huán)境下。安裝到全局環(huán)境下可能導(dǎo)致有的插件無法使用以及避免不同的項(xiàng)目依賴的版本不同而出現(xiàn)問題
5、4.x的版本把cli分離出來了，所以必需安裝webpack-cli
6、驗(yàn)證是否安裝成功：webpack -v
Webpack 4.X 從入門到精通 - entry與output（一）

配置文件

配置文件猶如webpack的大腦，webpack的工作都是通過配置文件完成的。編譯哪個(gè)文件、怎么編譯、編譯成什么樣、輸出為什么等等，所有的操作都是按配置文件里的內(nèi)容來完成的，所以配置文件一個(gè)重量級的嘉賓，webapck想要運(yùn)行的話配置文件是必不可少的東西。

配置文件有6個(gè)核心的東西組成，就像JavaScript由ECMAScript、DOM、BOM三部分組成一樣。

entry：入口文件（你要打包，就告訴我打包哪些）
output：出口文件（我打包完了，給你放到哪里）
module：模塊（放lorder，編譯瀏覽器不認(rèn)識的東西）
plugins：插件（輔助開發(fā)，提高開發(fā)效率）
devServer：服務(wù)器（webpack提供的本地服務(wù)器）
mode：模式，分為開發(fā)模式、生產(chǎn)模式。此為4.X里新增的

注意：
1、配置文件的名字建議叫webpack.config.js，需要放在項(xiàng)目文件夾的根目錄下。當(dāng)然你可以換成其它的名字，但是運(yùn)行的時(shí)候就要增加額外的步驟了
2、webpack采用CommonJS的規(guī)范，上面的所有參數(shù)都需要放在對象里，用moudle.exports導(dǎo)出

小試牛刀

在項(xiàng)目文件夾（我的為webpack-demo）的根目錄下創(chuàng)建必要的文件夾及文件，結(jié)構(gòu)如下：

[ ] webpack-demo
- [ ] node_modules
- [ ] src
  - main.js
  - show.js
- [ ] index.html
- [ ] package.json
- [ ] webpack.config.js

如下圖
Webpack 4.X 從入門到精通 - entry與output（一）

show.js代碼如下

//聲明一個(gè)函數(shù)，最終做為一個(gè)模塊被導(dǎo)出
const show=content=>{
    const box=document.getElementById("box");
    box.innerHTML=`你好！${content}`;
}

export {show};  //ES6導(dǎo)出模塊的語法

main.js代碼如下

import {show} from './show';    //ES6導(dǎo)入模塊的語法，‘./’為main.js的根目錄src，ES6里導(dǎo)入的模塊為js話不需要加后綴名
show('kaivon');

index.html代碼如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

package.json代碼如下

const path=require('path'); //nodejs的語法，引入路徑模塊，為了輸出的時(shí)候找絕對路徑

module.exports={
    entry:'./src/main.js',  //入口文件為main.js  
    output:{    //輸出
        path:path.resolve(__dirname,'dist'),    //path.resolve為nodejs的固定語法，用于找到當(dāng)前文件的絕對路徑
        filename:'bundle.js'    //輸出的文件名
    },
};

在終端里執(zhí)行命令webpack后，不出意外的話終端里顯示如下就表示成功了
Webpack 4.X 從入門到精通 - entry與output（一）
同時(shí)看一下文件結(jié)構(gòu)目錄，多了一個(gè)dist文件夾，以及bundle.js文件。這兩個(gè)就是webpack打包生成的文件，如下

在index.html文件里引入bundle.js文件后，用瀏覽器打開index.html，可以看到頁面里有內(nèi)容了。這就代表我們已經(jīng)使用webpack打包了一個(gè)文件，它的基本用法已經(jīng)跑了。

<body>
    <div id="box"></div>
    <script src="dist/bundle.js"></script>
</body>

語法及步驟

語法

entry 入口文件
只打包一個(gè)文件（單入口），寫個(gè)字符串
把多個(gè)文件打包成一個(gè)文件，寫個(gè)數(shù)組
把多個(gè)文件分別打包成多個(gè)文件，寫成對象
webpack把打包后的文件叫Chunck
output 出口文件
filename 輸出文件的名稱
1、輸出一個(gè)文件，寫個(gè)字符串
2、輸出多個(gè)文件，文件名前面加個(gè)標(biāo)識符（id/name/hash）
path 輸出文件的路徑
1、路徑必需為絕對路徑
2、__dirname是nodejs里的一個(gè)模塊，表示當(dāng)前文件的絕對路徑
3、path為nodejs的系統(tǒng)模塊，直接引入后調(diào)用path.resolve(__dirname,'輸出文件的路徑');

步驟

當(dāng)我們在終端里輸入webpack命令的時(shí)候webpack會按以下的步驟開始工作

先打開根目錄下的webpack.config.js
找entry（入口）屬性的值
進(jìn)入到main.js里，看到它又依賴show.js，再找到show.js
把main.js與show.js合并成一個(gè)js文件
在webpack.config.js里找到output（出口）屬性
解析output里的path與filename屬性的值
把第4步合并成的js文件放到dist文件夾里，并起個(gè)名字叫bundle.js

趁熱打鐵

下面演示多入口，在src目錄里新建兩個(gè)js文件，1.js與2.js，代碼如下：
1.js

console.log('這是第一個(gè)入口文件！');

2.js

console.log('這是第二個(gè)入口文件！');

修改webpack.config.js文件

const path=require('path');

//兩個(gè)entry分別一一對應(yīng)兩個(gè)filename
module.exports={
    //entry:['./src/1.js','./src/2.js'],
    entry:{
        one:'./src/1.js',
        two:'./src/2.js'
    },
    output:{
        //filename:'bundle.js',
        filename:'[name].bundle.js' //可以以name/id/hash放在中括號里區(qū)分文件名
        path:path.resolve(__dirname,'dist'),
    }
}

分別注釋對應(yīng)的entry與filename，在終端里執(zhí)行命令：webpack后，查看dist文件夾及運(yùn)行index.html后查看效果
1、當(dāng)entry為數(shù)組的時(shí)候，webpack會把數(shù)組里所有文件打包成一個(gè)js文件
2、當(dāng)entry為對象的時(shí)候，webpack會把對象里的文件分別打包成多個(gè)文件

文章里所說到的只是entry與output的常用配置，它的配置不止這些，可以參考以下鏈接
entry的所有配置https://webpack.js.org/concepts/entry-points/
output的所有配置https://webpack.js.org/concepts/output/

資料下載

下一篇：Webpack 4.X 從入門到精通 - plugin（二）

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標(biāo)題：Webpack4.X從入門到精通-entry與output（一）-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://aaarwkj.com/article22/jcijc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站排名、營銷型網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、ChatGPT、服務(wù)器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区