軟體技術-Webpack模組化開發上手

Webpack · 發表 2019-04-06 12:37:34

摘要：歡迎關注我的專欄( つ•̀ω•́)つ【人工智慧通識】 Webpack是目前最流行的Web開發模組化管理工具，這是一篇最基礎的上手教程，包含了VSCode和Github專案設定。前提工作首先,你需要安裝VSCode(Visual Studio Co...

歡迎關注我的專欄( つ•̀ω•́)つ【人工智慧通識】

Webpack是目前最流行的Web開發模組化管理工具，這是一篇最基礎的上手教程，包含了VSCode和Github專案設定。

前提工作

首先,你需要安裝VSCode(Visual Studio Code)，這可以說是當今最流行的Web開發編碼工具，它是開源免費的，由微軟進行更新維護。

點選這裡進入微軟官方站點下載VSCode

其次，你需要安裝Git，然後在Github建立倉庫Repository（我建立的是 GoCraft 倉庫）,然後在電腦上建立本地專案資料夾（我建立的是同名 GoCraft 資料夾），然後進入這個資料夾 git init 初始化本地Git倉庫，然後 git remote add origin https://username:[email protected]/... 關聯到遠端的Github倉庫，建立新檔案如 index.html ，測試成功推送到本地Git和遠端Github倉庫。

具體完整的操作說明可以參照這個文章

最後，你需要安裝 node.js 。這是Web開發人員必備工具，它本來是用作後端開發的，但實際上前端的專案組織管理都離不開它，尤其是它包含的 npm 管理命令，稍後我們要一直用到。

點選這裡進入Node.js官方站點下載LTS穩定版安裝

初始化專案

進入你存放所有網頁的資料夾（我的是 GoCraft/cli )，然後執行 npm init -y ，這個 npm 命令是 node.js 安裝包提供的。

這個命令為我們快速設定專案的資訊，都寫在 package.json 檔案中。 -y 是自動設定，如果沒有它你就需要輸入很多內容或敲很多回車。

注意這裡的 main："index.js" ，表示入口檔案是 index.js ，它是所有程式碼的起始點。

安裝webpack

webpack是用來管理各種web檔案之間的關係的，能夠有效地把各種js檔案組織在一起，是當前最常用的模組化開發管理工具。

安裝命令：

npm install webpack --save-dev

npm install webpack-cli --save-dev

這裡的 --save-dev 是指把安裝資訊記錄儲存到開發環境設定中，建議所有安裝都帶著這個引數執行。 webpack-cli 是webpack的一個配套命令工具，稍後會用到它。

如果你安裝比較慢，建議你先用管理員許可權（蘋果電腦下加sudo）安裝淘寶的npm映象： npm install -g cnpm --registry=https://registry.npm.taobao.org ，然後再用 cnpm 代替 npm 來執行 cnpm install webpack --save-dev 和 cnpm install webpack-cli --save-dev

設定Git忽略資料夾

安裝webpack的時候會導致Git出現數千個檔案更改標記，這是因為在 node_modules 資料夾下產生數千個檔案，而這些檔案沒必要放到Git倉庫或者Github倉庫中去，所以我們需要及時設定，讓Git排除

node_modules 資料夾。

在整個專案下( GoCraft 目錄而不是 cli 目錄）下建立 .gitignore 檔案，然後檔案內新增要忽略的資料夾，這裡只有一行:

cli/node_modules/

然後儲存，退出Code重新啟動，這時候就會看到Git需要提交的檔案變成了很少的兩三個。

建立index.html和index.js

作為瀏覽器的入口頁面 index.html 是必不可少的，而作為 main 程式碼的入口頁面 index.js 也是必不可少的。實際上網站的執行順序是：

我們建立 dist/index.html 檔案：

<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>

在這裡我們引入一個還不存在的本地檔案 main.js ，稍後它將由webpack根據 index.js 生成。

然後我們建立 src 資料夾下的 src/index.js ：

function component() {
let element = document.createElement('div');
element.innerHTML = "Hello World!"
return element;
}
document.body.appendChild(component());

然後我們需要修改一下 package.json 檔案，新增一行 "private": true, ，去掉 "main": "index.js", 一行，這樣將自動生成 main.js 而不會直接使用 index.js 。完整內容變為：

{
"name": "cli",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
}
}

注意 devDependencies 開發依賴包，這個內容就是我們之前 --save-dev 產生的記錄。

使用第三方包

安裝第三方工具，這裡我們使用 lodash.js 這個工具進行測試，它提供了一些列常用小功能。

cnpm install --save lodash

這個命令將把 lodash 安裝到 node_modules 資料夾中待用。 --save 表示記錄到生產環境（所以沒有帶 -dev )

修改一下 index.js 使用我們的 lodash ：

import _ from 'lodash';
function component() {
let element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());

注意 import xx from "XXX" 就是從 node_modules 資料夾包含的第三方工具中呼叫功能，並且將這個功能重新命名為 xxx 。所以下面直接使用了 _.join 功能。

然後執行 npx webpack 命令，這個命令將自動分析 src/index.js ，找到裡面所有 import 匯入的 js 模組檔案，以及這些模組檔案又可能匯入的另外的模組檔案，把這所有檔案打包成 dist/main.js ,供 index.html 使用。

如果 npx webpack 命令遇到錯誤 cannot find module... ，那麼可以嘗試重新用標準 npm 命令(而不是 cnpm 命令)安裝，注意要使用管理員模式或者加sudo開始：

npm install webpack --save-dev
npm install webpack-cli --save-dev

npm install --save lodash

成功後生成的檔案結構類似：

如果在瀏覽器手工開啟 index.html 檔案檢視，將看到 Hello webpack！ 字樣。

自定義模組

建立 cli/utils/hello.js 檔案，內容如下：

export default function hello() {
alert("I am hello module.")
}

然後在 index.js 中匯入並使用它：

import _ from 'lodash';
import hello from './utils/hello';
function component() {
let element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
hello()
return element;
}
document.body.appendChild(component());

再次執行 npx webpack ，然後開啟 index.html ，正常就可以看到來自自定義模組的彈窗。

webpack.config.js設定檔案

一般情況下webpack不需要額外設定，但可以在用專案根目錄下建立 webpack.config.js 檔案進行更多設定，例如：

const path = require('path');

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

這裡， entry: './src/index.js' 指定了入口 js 檔案，而 ouput 指定了 npx webpack 命令輸出檔案 main.js 的位置。

npx webpack和npm run build

我們可以通過修改 package.json ，用 npm run build 替換掉 npx webpack 命令(雖然這好像沒啥意義)：

{
"name": "cli",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
},
"dependencies": {
"lodash": "^4.17.11",
"resolve-cwd": "^2.0.0",
"resolve-from": "^4.0.0"
}
}

然後我們執行 npm run build 也能打包生成 dist/main.js 檔案。

最終目錄

最終目錄結構看起來像這個樣子：