Webpack的基本配置和打包與介紹

快跑啊小盧發表於2021-04-14
Web

1. 前言

1.1 Webpack是什麼

  • 可能有很多的小夥伴對於這個Webpack既熟悉又陌生，有一些剛開始接觸vue的小夥伴在對專案進行打包的時候經常會使用到npm run build來進行打包，但是卻不瞭解Webpack裡面複雜的配置和功能。
  • Webpack是一種前端資源構建工具，一個靜態模組打包器，在Webpack看來，前端所有資原始檔都會作模組處理，它將根據模組的依賴關係進行靜態分析，打包生成對應的靜態資源，Webpack官網上這張萬年不變的示意圖中其實也已經說明了一切。
  • 接下來我們就一起來學習一下Webpack的基本概念和配置流程。

1.2 Webpack的五個核心

  • Entry 入口指示Webpack以哪個檔案為入口起點開始打包，分析構建內部依賴圖。

  • Output 輸出指示Webpack打包後的資源bundles輸出到哪裡。

  • Loader Loader讓Webpack能夠處理那些非js檔案。

  • Plugins 外掛功能，可以用於打包優化和壓縮，重新定義環境變數等功能。

  • Model 指示Webpack使用相應模式的配置，通過選擇 development, production 或 none 之中的一個，來設定 mode 引數，你可以啟用 webpack 內建在相應環境下的優化。

    Model的配置資訊可以參考官網：https://webpack.docschina.org/configuration/mode/

2. Webpack的安裝配置入門

2.1 安裝

npm init -y //初始化
npm install webpack webpack-cli --save-dev //安裝webpack

2.2 配置

  • 在資料夾中的src資料夾新建一個foo.js檔案
//foo.js
alert('你好呀 webpack')
  • 在資料夾中新建一個webpack.config.js檔案
//webpack.config.js
var path = require('path');
module.exports = {
  mode: '`production`',//環境
  entry: './src/foo.js', //打包入口
  output: { //打包出口
    path: path.join(__dirname, 'dist'), //打包後檔案存放的位置
    filename: '`index.js`',  //打包後檔案生成的檔名
  },
};
config的配置資訊可以參考官網：https://webpack.docschina.org/configuration/
  • 此時 檔案目錄是這樣子的

2.3 開始打包

  • 在package.json檔案中新增如下命令
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  • 此時我們在終端輸入npm run build命令就會將入口檔案（entry）進行打包輸出到（output）dist資料夾的位置
  • 此時的目錄是這樣的
  • 我們光看js是看不出效果的，在dist資料夾新建一個index.html頁面引用該打包後的js檔案試試
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引用打包後的js</title>
</head>
<body>
    <script src="./index.js"></script>
</body>
</html>
  • 開啟該index.html 我們會發現效果已經出來啦！
  • 至此 一個最簡單版的打包就完成了！！！

那麼有同學就會問了 啊。。。。這打包了個寂寞啊？這跟原本的html引用js有區別嗎？？？別急，上面只是演示了最簡單的打包流程，webpack的功能遠遠不止這樣

  • 我們來另外一個例子 在foo.js同個資料夾內建立一個稱為 helloWebpack.js 的模組。
//helloWebpack.js
export default function () {
    alert('hi webpack')
}
  • 在foo.js引用它
//foo.js
import hello from './helloWebpack'
hello()

細心的同學可能會發現了現在如果直接在 html 頁面裡面引用 index.js 是無法執行的，瀏覽器是無法處理 ES6 模組或者是 common.js 規範的，那如果使用Webpack來處理入口來打包會怎麼樣呢？

  • 此時我們在終端輸入npm run build命令 然後執行index.html檔案。

此時效果就出來了！！！Webpack 天生支援 ES6 import 和 export 的模組語法，可以直接使用。

3. 總結

上面講到了Webpack的基本配置和安裝打包，五個核心要點之中的其中兩個 下篇我們來學學如何使用Loader和plugins會發現更多Webpack的奧妙

相關文章