Webpack 學習筆記（1）開始

時間 2019-11-29

標籤 webpack 學習筆記開始简体版

原文原文鏈接

目錄javascript

參考資料

Getting Started | Webpack
webpack | v4.16.3html

本文以一個實例webpack-demo來記錄 webpack 的使用。在使用 webpack 前，應保證能使用 npm 命令。
安裝 Webpack 時，官方推薦使用獨立安裝（Local Installation）而不是使用全局安裝（Global Installation），即在須要用到的模塊中安裝webpack。這樣的好處在於，當新的需求被引入時，項目的獨立更新變得容易。java

1. 基礎設定

首先咱們建立一個目錄，初始化 npm ，而後在目錄中安裝 webpack 和 webpack-cli（這是個運行 webpack 的命令行工具）：node

$ mkdir webpack-demo && cd webpack-demo
$ npm init -y
$ npm install webpack webpack-cli --save-dev

而後在webpack-demo文件夾下構建以下結構（加號+表明添加的文件及文件夾）：webpack

webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
+ |- /src
+   |- index.js

dist/index.htmlgit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Getting Starting</title>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

src/index.jsgithub

import _ from 'lodash';

function component() {
  var element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

接着打開package.json文件。爲了移除默認的程序入口，將main字段刪除；爲避免程序被已外發部，設置private字段爲true。web

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {}
  }

基本配置完畢。能夠看到，咱們設置了dist文件夾和src文件夾將「distribution」代碼和「source」代碼分離，「source」是咱們書寫和編輯的部分，「distribution」是最終瀏覽器加載的最小化和最優化的程序輸出結果。shell

2. 建立一個包

咱們首先安裝lodash。Lodash是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。（在index.js中引用）npm

$ npm install lodash --save-dev

在 index.js 的代碼中，咱們明確要求引用 lodash 並使用 _ 將其綁定。經過說明模塊須要哪些依賴關係，webpack可使用這些信息來創建依賴關係圖。而後，它使用這些關係圖生成一個優化的、將代碼內容正確組織的捆綁包。

安裝完畢後咱們在當前目錄下運行命令npx webpack，該命令將src/index.js做爲切入點，生成dist/main.js做爲輸出。

此時，用瀏覽器打開index.html，能夠看到網頁中顯示「Hello webpack」。

補充說明：npx有什麼用：npx容許開發者直接使用模塊（module）內提供的命令行工具（免得輸入目錄）；

// 直接使用模塊內命令行工具
$ node_modules\.bin\webpack

// 在npx支持下使用模塊內命令行工具
$ npx webpack

3. 使用配置文件完成打包命令

雖然在4.x版本以後的 webpack 再也不須要任何配置，可是大多數項目都包含了許多複雜的配置，所以 webpack 支持配置文件。這比在終端手動輸入大量命令要高效得多，咱們能夠建立一個配置文件來代替上面用到的命令行選項：

在 webpack-demo 文件夾下新建文件：webpack.config.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

此時能夠把/dist/main.js文件刪除，再次構建程序，但此時採用的是藉助配置文件的方法：

# 方法一：
$ npx webpack --config webpack.config.js

# 方法二：
$ npx webpack

得益於 webpack-cli 的運行機制，若是當前目錄中存在 webpack.config.js 文件，webpack 命令會默認使用它。固然，使用 --config 選項是爲了說明咱們能夠加載任意命名的配置文件（這對於須要被拆分爲多個文件的複雜配置十分有用）。

使用配置文件構建項目有個好處：入口文件和輸出文件的文件名、路徑能夠自定義，而不只被限制使用系統規定的index.js、main.js之類，將會使開發更加靈活。

4. 使用 NPM Scripts 完成打包命令

scripts | npm Document

直接使用命令行執行 webpack 命令不免顯得有點繁瑣和枯燥，咱們可使用 NPM Script 爲打包命令建立「快捷鍵」。

在 package.json 文件中有一個 scripts 字段，咱們在其中添加 build 字段，併爲該字段賦值 webpack：

{
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
   "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "lodash": "^4.17.10",
     "webpack": "^4.16.3",
     "webpack-cli": "^3.1.0"
   }
 }

如今，npm run build 命令能夠用來代替咱們以前使用的 npx webpack 命令：

$ npm run build

注意：在 scripts 字段中，咱們能夠引用本地的命令行工具包，就像咱們使用 npx 訪問的同樣。

最終咱們文件夾的目錄結構以下：

webpack-demo
  |- node_modules
  |- /dist
    |- index.html
    |- main.js
  |- /src
    |- index.js
  |- package.json
  |- package-lock.json
  |- webpack.config.js