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

時間 2019-11-08

標籤 webpack 4.x 入門精通 entry output 简体版

原文原文鏈接

回顧歷史

Web應用日益複雜，前端開發也發生了翻天覆地的變化變得盤根錯節，到今天已經很是複雜和龐大了！用html、css、javascript老老實實的寫個頁面的時代早已過去。而如今要完成工做須要藉助不少額外的東西，好比工程化、自動化等等。這樣才顯得有逼格，纔像一個真正的程序猿。若是說還停留在切個圖，下載個js效果懟上去的階段，顯然你會脫節的。由此也帶動了不少前端工具的發展，以Gulp、Grunt、webpack等爲表明的構建工具猶如雨後春筍般的生長，而webpack更爲流行，使用更爲普遍，能夠說它如今已是前端開發的的標配了。因此此次我會用一個系列的文章詳細去介紹webpack，由淺入深解析webpack，再經過實戰例子配合，掌握之後足以解決你工做中的問題。同時這套系列文章是針對最新的4.X的版本。javascript

Webpack是什麼

webpack是一款工具？什麼工具？有人管他叫打包工具，這樣太low了。能夠看看webpack官網，頁面底部的一個個小頭像表明的是給webpack贊助過的人，鼠標放上去還能夠看到他贊助了多少錢。就憑這麼多人的贊助，也不能叫這麼low逼的名，聽得好像是個壓縮軟件。得起個高大上的名，叫構建工具（固然打包的功能是它的一大特點）css

前端裏的什麼工程化呀自動化呀，這些東西有個特色，就是源代碼沒法在瀏覽器裏直接運行，必需經過編譯才行。那構建工具其實就能作這些事情。如：html

代碼編譯，把ES6轉成ES5

模塊合併，把多個文件合併成一個文件，減小http請求

代碼壓縮優化，抽取公共代碼，減小代碼量

這些都是構建工具要作的事情，可是這些東西都是用代碼去實現，讓他們經過代碼自動完成這些事情，解放咱們的生產力。webpack最大的一個特點就是打包，官網的那張大圖所體現的就是打包的功能，並能解決模塊間相互依賴的問題，它能把亂成一鍋粥的文件打包成清晰的文件，快刀斬亂麻！其次webapck是以模塊爲基石，對於模塊化的支持體現的淋漓盡致，在webpack中全部的內容都是模塊，一個圖片、一個css文件、一個js文件都是一個模塊。前端

安裝

npm init -y

npm install --save-dev webpack

npm install --save-dev webpack-cli

注意：
一、安裝前確認一件事件，nodejs的版本在5.0以上
二、npm init -y爲生成package.json文件
三、兩條命令能夠簡寫爲：npm i webpack webpack-cli -D
四、建議安裝到項目中而並不是全局環境下。安裝到全局環境下可能致使有的插件沒法使用以及避免不一樣的項目依賴的版本不一樣而出現問題
五、4.x的版本把cli分離出來了，因此必需安裝webpack-cli
六、驗證是否安裝成功：webpack -v

java

配置文件

配置文件猶如webpack的大腦，webpack的工做都是經過配置文件完成的。編譯哪一個文件、怎麼編譯、編譯成什麼樣、輸出爲何等等，全部的操做都是按配置文件裏的內容來完成的，因此配置文件一個重量級的嘉賓，webapck想要運行的話配置文件是必不可少的東西。node

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

entry：入口文件（你要打包，就告訴我打包哪些）

output：出口文件（我打包完了，給你放到哪裏）

module：模塊（放lorder，編譯瀏覽器不認識的東西）

plugins：插件（輔助開發，提升開發效率）

devServer：服務器（webpack提供的本地服務器）

mode：模式，分爲開發模式、生產模式。此爲4.X裏新增的

注意：
一、配置文件的名字建議叫webpack.config.js，須要放在項目文件夾的根目錄下。固然你能夠換成其它的名字，可是運行的時候就要增長額外的步驟了
二、webpack採用CommonJS的規範，上面的全部參數都須要放在對象裏，用moudle.exports導出web

小試牛刀

在項目文件夾（個人爲webpack-demo）的根目錄下建立必要的文件夾及文件，結構以下：npm

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

以下圖

show.js代碼以下

//聲明一個函數，最終作爲一個模塊被導出
const show=content=>{
    const box=document.getElementById("box");
    box.innerHTML=`你好！${content}`;
}

export {show};  //ES6導出模塊的語法

main.js代碼以下

import {show} from './show';    //ES6導入模塊的語法，‘./’爲main.js的根目錄src，ES6裏導入的模塊爲js話不須要加後綴名
show('kaivon');

index.html代碼以下

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

webpack.config.js代碼以下

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

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

在終端裏執行命令webpack後，不出意外的話終端裏顯示以下就表示成功了

同時看一下文件結構目錄，多了一個dist文件夾，以及bundle.js文件。這兩個就是webpack打包生成的文件，以下

在index.html文件裏引入bundle.js文件後，用瀏覽器打開index.html，能夠看到頁面裏有內容了。這就表明咱們已經使用webpack打包了一個文件，它的基本用法已經跑了。

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

語法及步驟

語法

一、 entry 入口文件

只打包一個文件（單入口），寫個字符串

把多個文件打包成一個文件，寫個數組

把多個文件分別打包成多個文件，寫成對象

webpack把打包後的文件叫Chunck

二、 output 出口文件
filename 輸出文件的名稱

一、輸出一個文件，寫個字符串

二、輸出多個文件，文件名前面加個標識符（id/name/hash）

path 輸出文件的路徑

一、路徑必需爲絕對路徑

二、__dirname是nodejs裏的一個模塊，表示當前文件的絕對路徑

三、path爲nodejs的系統模塊，直接引入後調用path.resolve(__dirname,'輸出文件的路徑');

步驟

當咱們在終端裏輸入webpack命令的時候webpack會按如下的步驟開始工做

先打開根目錄下的webpack.config.js

找entry（入口）屬性的值

進入到main.js裏，看到它又依賴show.js，再找到show.js

把main.js與show.js合併成一個js文件

在webpack.config.js裏找到output（出口）屬性

解析output裏的path與filename屬性的值

把第4步合併成的js文件放到dist文件夾裏，並起個名字叫bundle.js

趁熱打鐵

下面演示多入口，在src目錄裏新建兩個js文件，1.js與2.js，代碼以下：
1.js

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

2.js

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

修改webpack.config.js文件

const path=require('path');

//兩個entry分別一一對應兩個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放在中括號裏區分文件名
        path:path.resolve(__dirname,'dist'),
    }
}

分別註釋對應的entry與filename，在終端裏執行命令：webpack後，查看dist文件夾及運行index.html後查看效果
一、當entry爲數組的時候，webpack會把數組裏全部文件打包成一個js文件
二、當entry爲對象的時候，webpack會把對象裏的文件分別打包成多個文件

文章裏所說到的只是entry與output的經常使用配置，它的配置不止這些，能夠參考如下連接
entry的全部配置 https://webpack.js.org/concep...
output的全部配置 https://webpack.js.org/concep...

資料下載

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。