Webpack實戰（一）：Webpack打包工具安裝及參數配置

時間 2020-01-04

標籤 webpack 實戰打包工具安裝參數配置简体版

原文原文鏈接

爲何要模塊化

javascript跟其餘開發語言有不少的區別，其中一個就是沒有模塊化概念，若是一個項目中有多個js文件，咱們只能經過script標籤引入的方式，把一個個js文件插入到頁面，這種作法會也引發了不少弊端：javascript

須要手動維護JavaScript的加載順序
屢次請求資源，影響了加載速度
在每一個script標籤中，頂層做用域即全局做用域，若是沒有任何處理而直接在代碼中進行變量或函數聲明，就會形成全局做用域的污染，也會形成命名衝突。

模塊化很容易就避免這些問題，避免衝突，合併資源減小網絡開銷，經過導入和導出語句咱們能夠清晰地看到模塊間的依賴關係。html

模塊打包工具

模塊打包工具（module bundler）的任務就是解決模塊間的依賴，使其打包後的結果能運行在瀏覽器上。它的工做方式主要分爲兩種：java

將存在依賴關係的模塊按照特定規則合併爲單個JS文件，一次所有加載進頁面中。
在頁面初始時加載一個入口模塊，其餘模塊異步地進行加載。

目前社區中比較流行的模塊打包工具備Webpack、Parcel、Rollup等。node

Webpack是什麼

Webpack是一個開源的JavaScript模塊打包工具，其最核心的功能是解決模塊之間的依賴，把各個模塊按照特定的規則和順序組織在一塊兒，最終合併爲一個JS文件（有時會有多個，這裏討論的只是最基本的狀況）。這個過程就叫做模塊打包webpack

Webpack的特色

Webpack默認支持多種模塊標準，包括AMD、CommonJS，以及最新的ES6模塊，而其餘工具大多隻能支持一到兩種。這對於一些同時使用多種模塊標準的工程很是有用，Webpack會幫咱們處理好不一樣類型模塊之間的依賴關係。
Webpack有完備的代碼分割（code splitting）解決方案。從字面意思去理解，它能夠分割打包後的資源，首屏只加載必要的部分，不過重要的功能放到後面動態地加載。這對於資源體積較大的應用來講尤其重要，能夠有效地減少資源體積，提高首頁渲染速度。
Webpack能夠處理各類類型的資源。除了JavaScript之外，Webpack還能夠處理樣式、模板，甚至圖片等，而開發者須要作的僅僅是導入它們。好比你能夠從JavaScript文件導入一個CSS或者PNG，不過這些須要loader來處理。
Webpack 使用異步I/O和多級緩存提升運行效率，這使得 Webpack可以以使人難以置信的速度快速增量編譯。
擴展性強，插件機制完善，Webpack 還有一個功能豐富的插件系統。大多數內容功能都是基於這個插件系統運行的，還能夠開發和使用開源的 Webpack插件，來知足各式各樣的需求。

安裝Webpack

安裝Webpack以前，須要安裝最新版本的node.js,它須要依賴node.js,使用 Node.js 最新的長期支持版本(LTS - Long Term Support),使用舊版本的node.js，可能會遇到一些問題，由於它們可能缺乏 webpack 功能以及/或者缺乏相關 package 包。web

咱們使用node.js的包管理器npm安裝Webpack，安裝Webpack有兩種方式：npm

1.全局安裝：json

npm install --g webpack
複製代碼

若是採用全局安裝，那麼在與他人進行項目協做的時候，因爲每一個人系統中的Webpack版本不一樣，可能會致使輸出結果不一致。
部分依賴於Webpack的插件會調用項目中Webpack的內部模塊，這種狀況下仍然須要在項目本地安裝Webpack，而若是全局和本地都有，則容易形成混淆

2.本地安裝瀏覽器

npm install --save-dev webpack
複製代碼

若是你使用 webpack 4+ 版本，你還須要安裝 CLI。緩存

npm install --save-dev webpack-cli
複製代碼

對於大多數項目，咱們建議本地安裝。這可使咱們在引入破壞式變動(breaking change)的依賴時，更容易分別升級項目。注意：因爲咱們將Webpack安裝在了本地，所以沒法直接在命令行內使用「webpack」指令。項目內部只能使用npx webpack的形式.

初始化一個項目

使用npm init 首先初始化一個項目，首先在命令行內定位到所要放項目的文件夾，而後執行npm init，建立便可。以下圖

執行完以後，會生成一個pakeage.json文件,這個文件主要是用來記錄這個項目的詳細信息的，它會將咱們在項目開發中所要用到的包，以及項目的詳細信息等記錄在這個項目中。使用npm init初始化項目,在進行項目傳遞的時候不須要將項目依賴包一塊兒發送給對方，對方在接收到你的項目以後直接執行npm install就能夠將項目全部的依賴所有下載到項目裏。

在項目內安裝webpack,webpack-cli：

npm install --save-dev webpack webpack-cli
複製代碼

Webpack.config.js 文件簡單配置

從以前咱們在package.json中添加的腳本命令來看，當項目須要愈來愈多的配置時，就要往命令中添加更多的參數，那麼到後期維護起來就會至關困難。爲了解決這個問題，能夠把這些參數改成對象的形式專門放在一個配置文件裏，在Webpack每次打包的時候讀取該配置文件便可，Webpack的默認配置文件爲webpack.config.js

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'development'
}
複製代碼

Webpack對於output.path的要求是使用絕對路徑（從系統根目錄開始的完整路徑），以前咱們在命令行中爲了簡潔因此使用了相對路徑。而在webpack.config.js中，咱們經過調用Node.js的路徑拼裝函數——path.join，將__dirname（Node.js內置全局變量，值爲當前文件所在的絕對路徑）與dist（輸出目錄）鏈接起來，獲得了最終的資源輸出路徑。

package.json 裏面的scripts配置文件添加打包參數， "build": "webpack

{
  "name": "webpacktest2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "lanfeng",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}
複製代碼

執行npm run build，Webpack就會預先讀取webpack.config.js，而後進行打包。 index.js 文件

import firstDemo from './add-first.js';
document.write(firstDemo);
複製代碼

add-first.js

const test = 'Hello Webpack'
export default test
複製代碼

index.html 文件

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>First</title>
  </head>
  <body>
    <script src="./dist/bundle.js"></script>
  </body>
</html>
複製代碼

預留效果如圖：

以上就是Webpack相關的介紹和簡單的配置方法。跟其餘模塊化打包工具相比，Webpack是開發者使用較多的一款打包工具。