【webpack】webpack4基本的建構過程

前提

安裝node，npm（新版本的node安裝時會同時安裝npm）。如果想提高下載下傳安裝包時的速度，可以安裝淘寶鏡像cnpm。接下來，開始講解webpack的基本建構過程。

過程

1.在項目目錄下，執行

npm init --yes

，執行完生成一個package.json的檔案。

2.安裝webpack（以下兩種方式自選）：

npm install --save-dev webpack【本地安裝，預設安裝最新版本】
npm install --save-dev webpack@<version> 【本地安裝，安裝特定版本，将version改為你需要的版本】

3.安裝

npm install --save-dev webpack-cli

【由于我安裝的是webpack^4.29.6版本，故需要安裝webpack-cli。若是4.0以下版本的webpack，則不需要安裝webpack-cli】

4.項目根目錄下建立以下檔案（帶“+”号的）：

|-node_modules
 |-package.json
+|-index.html 
+|-src
+  |-index.js

在index.html寫入内容：

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

在index.js中寫入内容：

function component() {
    var element = document.createElement('div');
  
    // Lodash（目前通過一個 script 腳本引入）對于執行這一行是必需的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  
    return element;
  }
  
  document.body.appendChild(component());

5.我們還需要調整 package.json 檔案，以便確定我們安裝包是私有的(private)，并且移除 main 入口。這可以防止意外釋出你的代碼。

{
  "name": "HelpBM",
  "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.29.6",
    "webpack-cli": "^3.3.0"
  }
}

調整目錄結構：

|-node_modules
  |-package.json
+ |-dist
    |-index.html 
  |-src
    |-index.js

6.要在

index.js

中打包

lodash

依賴，我們需要在本地安裝 library：

npm install --save lodash

在安裝一個要打包到生産環境的安裝包時，你應該使用 npm install --save，如果你在安裝一個用于開發環境的安裝包（例如，linter, 測試庫等），你應該使用 npm install --save-dev。請在 npm 文檔中查找更多資訊。

也就是說，如果是項目上線時仍需要用到的安裝包，我們用

npm install --save

安裝，我們可以在

package.json

的dependencies中看到此項目依賴的安裝包。如果隻是開發階段需要用到的安裝包，我們用

npm install --save-dev

安裝，可以在

package.json

的 devDependencies看到此項目以來的本地安裝包。

7.由于之前未安裝lodash，故隻能通過script腳本引入；然後修改另一個

<script>

标簽來加載 bundle，而不是原始的 /src 檔案。修改index.html檔案：

<!doctype html>
  <html>
   <head>
     <title>起步</title>
-    <script src="https://unpkg.com/[email protected]"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>

8.執行

npx webpack

（執行建構），會将我們的腳本作為入口起點，然後輸出為 main.js。得到如下結果：

Hash: 56e7f5843b82c7e95b31 Version: webpack 4.29.6 Time: 908ms Built

at: 2019-03-20 16:52:07 Asset Size Chunks Chunk

Names main.js 70.3 KiB 0 [emitted] main Entrypoint main =

main.js [1] ./src/index.js 286 bytes {0} [built] [2]

(webpack)/buildin/global.js 472 bytes {0} [built] [3]

(webpack)/buildin/module.js 497 bytes {0} [built]

+ 1 hidden module

WARNING in configuration The ‘mode’ option has not been set, webpack

will fallback to ‘production’ for this value. Set ‘mode’ option to

‘development’ or ‘production’ to enable defaults for each environment.

You can also set it to ‘none’ to disable any default behavior. Learn

more: https://webpack.js.org/concepts/mode/

在浏覽器打開index.html,能看到頁面上輸出：Hello webpack

9.我們知道，在webpack4中，我們可以無須任何配置。但有時候又需要根據項目來作出一些其他配置，是以我們在項目根目錄下建立webpack.config.js檔案來替代一些預設配置。

const path = require('path');

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

由于我們設定輸出為bundle.js，故修改index.html檔案為：

<!doctype html>
<html>
  <head>
    <title>起步</title>
  </head>
  <body>
    <script src="./bundle.js"></script>
  </body>
</html>

10.再次執行建構npx wepback，得到如下結果：

Hash: 56e7f5843b82c7e95b31

Version: webpack 4.29.6

Time: 937ms

Built at: 2019-03-20 17:12:52

Asset Size Chunks Chunk Names

main.js 70.3 KiB 0 [emitted] main

Entrypoint main = main.js

[1] ./src/index.js 286 bytes {0} [built]

[2] (webpack)/buildin/global.js 472 bytes {0} [built]

[3] (webpack)/buildin/module.js 497 bytes {0} [built]

+ 1 hidden module

WARNING in configuration The ‘mode’ option has not been set, webpack

will fallback to ‘production’ for this value. Set ‘mode’ option to

‘development’ or ‘production’ to enable defaults for each environment.

You can also set it to ‘none’ to disable any default behavior. Learn

more: https://webpack.js.org/concepts/mode/

11.使用npm run build來代替npx webpack，在package.json中作出修改：

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

修改完之後，執行npm run build會得到與npx webpack一樣的結果。

結論

webpack的基本建構到此結束。最終項目目錄結構應如下所示：

|-node_modules
 |-package.json
 |-webpack.config.js
 |-dist
      |-index.html 
      |-bundle.js
 |-src
      |-index.js

參考文檔：《webpack中文文檔》

【webpack】webpack4基本的建構過程

前提

過程

結論

繼續閱讀

使用extract-text-webpack-plugin插件後報錯

CSS樣式抽離之 extract-text-webpack-plugin 插件

webpack, js 相容性處理

Vue項目 - 項目檔案介紹

vue3.0搭建，從零開始搭建vue3.0腳手架插件分布情況（最新版）

20分鐘gulp快速入門

NODE_ENV不是内部或外部指令,也不是可運作的程式

你配置Webpack 4的方式可能是錯的！

本月推薦：15 個有用的 JavaScript 和 CSS 庫

使用Travis-CI 與 Github Webhook自動部署你的頁面

項目中遇到的問題1-10

demo06 webpack + babel7 + typescript

測試工程師面試解析～

Vue - 安裝Node.js（配置環境變量、配置NPM下載下傳存放目錄、NPM設定鏡像倉庫）

Vue項目 - 單檔案元件和Vue中的路由

vue-cli簡介（中文翻譯）