軟件技術-Webpack模塊化開發上手

歡迎關注我的專欄( つ??ω??)つ【人工智能通識】
【匯總】2019年4月專題

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


人工智能通識-2019年3月專題匯總

前提工作

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

點擊這里進入微軟官方站點下載VSCode

  • 其次，你需要安裝Git，然后在Github創建倉庫Repository（我創建的是GoCraft倉庫）,然后在電腦上創建本地項目文件夾（我創建的是同名GoCraft文件夾），然后進入這個文件夾git init初始化本地Git倉庫，然后git remote add origin https://username:password@github.com/...關聯到遠程的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也是必不可少的。實際上網站的運行順序是：

瀏覽器打開index.html \to index.js \to 更多.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文件。

最終目錄

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

你可以從我的Github項目中訪問到完整代碼：

點這里打開webpack-demo代碼倉庫

更多擴展內容：關于如何在打包main.js的時候支持ES6/7語法，你需要在webpack.conf.js安裝和配置相應的loader工具。關于如何實現保存文件時候自動打包，你需要安裝和配置webpack-dev-server。具體內容在這里暫時不擴展了。

歡迎關注我的專欄( つ??ω??)つ【人工智能通識】

每個人的智能新時代

如果您發現文章錯誤，請不吝留言指正；
如果您覺得有用，請點喜歡；
如果您覺得很有用，歡迎轉載~

END

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容