一、概念

webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle

WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。

構建就是把原始碼轉換成釋出到線上的可執行 JavaScrip、CSS、HTML 程式碼，包括如下內容。

• 程式碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等。
• 檔案優化：壓縮 JavaScript、CSS、HTML 程式碼，壓縮合並圖片等。
• 程式碼分割：提取多個頁面的公共程式碼、提取首屏不需要執行部分的程式碼讓其非同步載入。
• 模組合併：在採用模組化的專案裡會有很多個模組和檔案，需要構建功能把模組分類合併成一個檔案。
• 自動重新整理：監聽本地原始碼的變化，自動重新構建、重新整理瀏覽器。
• 程式碼校驗：在程式碼被提交到倉庫前需要校驗程式碼是否符合規範，以及單元測試是否通過。
• 自動釋出：更新完程式碼後，自動構建出線上釋出程式碼並傳輸給釋出系統。

構建其實是工程化、自動化思想在前端開發中的體現，把一系列流程用程式碼去實現，讓程式碼自動化地執行這一系列複雜的流程。 構建給前端開發注入了更大的活力，解放了我們的生產力。

二、初始化專案

1、建立package.json檔案

npm init

2、安裝webpack和webpack-cli

// 全域性
cnpm i webpack -g
// 本地
cnpm i webpack webpack-cli -D

-D是指開發環境需要，上線環境不需要。 等同於：--save-dev

-S是上線需要。等同於：--save

3、配置package中的scripts

"scripts": {
    "start": "webpack --profile --progress --colors --display-error-details",
    "dev": "webpack --display-modules --profile --progress --colors --display-error-details"
  },
 

color： 輸出結果帶彩色，比如：會用紅色顯示耗時較長的步驟；

profile： 輸出效能資料，可以看到每一步的耗時；

progress： 輸出當前編譯的進度，以百分比的形式呈現；

display-modules： 預設情況下 node_modules 下的模組會被隱藏，加上這個引數可以顯示這些被隱藏的模組；

display-error-details： 輸出詳細的錯誤資訊；

三、配置webpack

1、核心概念

entry：入口

output：輸出

loader：模組轉換器

plugins：擴充套件外掛

Module：模組

Chunk：程式碼塊

具體概念，後補，繼續...

參考：https://www.webpackjs.com/concepts/

2、建立目錄

建立 index.html檔案

建立src資料夾 / index.js檔案

建立webpack.config.js檔案

目錄結構，如下：

-rw-r--r-- 1 Administrator 197121  276 11月 15 10:59 index.html
drwxr-xr-x 1 Administrator 197121    0 11月 15 10:38 node_modules/
-rw-r--r-- 1 Administrator 197121  720 11月 15 10:41 package.json
-rw-r--r-- 1 Administrator 197121 3214 11月 15 10:58 README.md
drwxr-xr-x 1 Administrator 197121    0 11月 15 10:58 src/
-rw-r--r-- 1 Administrator 197121    0 11月 15 11:00 webpack.config.js

3、配置生成HTML的外掛

cnpm i html-webpack-plugin –D

4、配置webpack.config.js檔案

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'build.js'
    },
    module: {},
    plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html' })
    ],
    mode: 'development',
    resolve: {}
}

5、試執行

此時，執行npm start 或 webpack filename ， 就會一個dist資料夾，包括一個html檔案和build.js檔案。

放到本地伺服器上，試試，正常使用！

到此，一個簡版的webpack配置，已經OK了。先提一版。繼續...

參考

https://www.webpackjs.com/concepts/
https://www.webpackjs.com/configuration/
https://blog.csdn.net/sinat_17775997/article/details/80318569

Github

https://github.com/wangjianuo/webpack-tea
tag_v1.0_基礎版webpack配置