一、概念

①本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)

②當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle

③參考文檔：webpack中文文檔

二、基本使用

1、輸出hello world

①全局安裝

npm install --global webpack

②準備目錄結構

③命令行執行打包指令：會在src文件夾裏多出一個bundle.js文件

webpack main.js bundle.js
 

④打開參看index.html文件，控制臺輸出hello world

    <!-- <script src="src/main.js"></script> -->
    <!-- 需要把打包過後生成的文件引入 -->
    <script src="src/bundle.js""></script>

2、優化（規範）

①重新劃分目錄結構：為了目錄結構的劃分更加清晰，把項目中的源碼和打包後的結果做了以下劃分，把源碼存儲在src目錄中，把打包的結果存儲到dist目錄中（如果沒有這個目錄會自動創建）

②配置文件webpack.config.js的基本配置

// 該文件其實最終是要在node環境下執行的
const path = require(‘path‘)

// 導出一個具有特殊屬性配置的對象
module.exports = {
    entry:‘./src/main.js‘,/* 入口文件模塊路徑 */
    output:{
        path:path.join(__dirname,‘./dist/‘),/* 出口文件模塊所屬目錄，必須是一個絕對路徑 */
        filename:‘bundle.js‘/* 打包的結果文件名稱 */
    }
}

③命令行執行打包指令：webpack會自動讀取webpack.config.js作為默認配置文件，也可以通過手動 --config 參數來指定配置文件

webpack

3、本地安裝的方式（推薦）

①全局安裝的問題：安裝在全局的webpack打包的時候使用的開發者電腦上的webpack版本，如果到了其他人的電腦上，可能webpack版本不一致從而出現一些兼容問題

②本地安裝的好處：把webpack啊安裝到本地項目中，這樣webpack打包工具就會跟著項目文件的移動而移動，就不會出現兼容性問題。把webpack安裝到開發依賴（--save-dev）中，因為webpack是一個打包工具，項目如果需要上線，上線的是打包的結果，而不是這個工具，所以為了區分核心包依賴和開發工具依賴，通過 --save 和 --save-dev來區分

③本地安裝：安裝之前需要初始化項目文件，如果是webpack4 以上的版本，還需要安裝 webpack-cli（此工具用於在命令行中運行 webpack）

npm init -y
npm install webpack webpack-cli --save-dev

④本地安裝的配置（配置文件package.json裏的scripts，相當於取別名為build）

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0"
  }
}

⑤命令行執行打包命令

npm run build

⑥補充：如果想在每次修改文件以後，自動打包，可以在package.json裏的scripts配置

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack",
    "watch-build":"webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0"
  }
}

npm run webpack-build

webpack基本使用