webpack 起步

garynan發表於2019-03-14
Web

webpack 起步

GitHub 學習 Demo。

找一個資料夾初始化 npm 專案 並安裝依賴。

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
複製程式碼

新增 npm script

"scripts": {
	"build": "webpack --config webpack.config.js"
}
複製程式碼

基本用法

給專案新增一些檔案

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

# ./index.html
<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <!-- lodash js 庫 -->
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

# ./src/index.js
function component() {
  let element = document.createElement('div');

  // _ 由 lodash js 庫 提供
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());
複製程式碼

此外，還需要調整我們的package.json檔案，以確保我們將包標記為私有，以及刪除 main 選項。 這是為了防止意外發布您的程式碼。

  {
    "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.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {}
  }
複製程式碼

這個例子 lodash 依賴是通過 <script> 引入的，是隱式並全域性依賴的。
這會帶來一些問題：

  • 非顯式依賴的。
  • 如果依賴丟失，或已錯誤的順序引入，程式將無法正常運作。
  • 如果包含依賴項但未使用，瀏覽器依然會下載不必要的程式碼。

所以我們應該這樣做：

Bundle 將相關依賴的程式碼捆綁在一起

以這樣的方式引入依賴：

npm install --save lodash
複製程式碼
# src/index.js

+ import _ from 'lodash';
+
  function component() {
    let element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());
複製程式碼

Configuration 新增配置

在專案的根目錄下新增 webpack 配置檔案 webpack.config.js。
使用 node js 程式設計。

  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js
複製程式碼

編譯

npm run build

# 或者
npx webpack --config webpack.config.js

# --config 中 webpack.config.js 是預設值。如果你的配置檔案是這樣命名的，執行 webpack 命令時可以忽略此引數
複製程式碼

配置檔案比簡單的CLI使用具有更大的靈活性。 我們可以通過這種方式指定載入器規則，外掛，解析選項和許多其他增強功能。 更多資訊可以看文件。

tips:
通過在npm run build命令和引數之間新增兩個破折號，可以將自定義引數傳遞給webpack : 

npm run build -- --colors.
複製程式碼

NEXT

現在已經有了基本構建，那麼您應該轉到下一個指南 assets 資產管理，以瞭解如何使用 webpack 管理影象和字型等靜態資源。

相關文章