安裝webpack

• 全域性安裝：npm i -g webpack
  
  • 目的：在任何目錄中通過CLI使用 webpack 這個命令

• 專案安裝：npm i -D webpack

  • 目的：執行當前專案的構建

  安裝失敗：目錄下存在一個以前的jQuery包
  

  安裝成功

使用例項

思路

• 1 使用npm init -y 初始package.json，使用npm來管理專案中的包
  

• 2 新建 專案目錄結構及index.html和main.js，實現隔行變色功能
  

main.js檔案
// 通過 ES6 的 import 關鍵字，來匯入jquery包檔案
// 1 通過npm下載jquery：npm i -S jquery
 

// 2 下載好的包，就會被放到 node_modules 資料夾中
// 3 通過 import 匯入包，將來就會自動從 node_modules 資料夾中找到這個包，並且匯入
import $ from 'jquery'

// 實現隔行變色
$('#list > li:odd').css('backgroundColor', 'red')
$('#list > li:even').css('backgroundColor', 'yellow')

$('li').css({
    marginBottom: 10,
    fontSize: 30
})

index.html
<ul
 
 id="list">
  <li>這是第01個li元素</li>
  <li>這是第02個li元素</li>
  <li>這是第03個li元素</li>
</ul>

<!-- 因為 webpack-dev-server 直接將打包好的bundle.js檔案，放到了它啟動的伺服器的根目錄中，所以，我們需要通過 /bundle.js 絕對路徑的形式，來引入 bundle.js -->
<script src="/bundle.js"></script>

• 3 執行webpack src/js/index.js dist/bundle.js進行打包構建，語法是：webpack 入口檔案 輸出檔案
  

webpack的基本使用：
1 通過命令列的方式（webpack命令需要在根目錄中執行）
webpack 入口檔案 出口檔案
webpack ./src/js/main.js ./dist/bundle.js
2 通過 配置檔案的方式使用webpack
在專案的根目錄中建立一個名字：webpack.config.js 的檔案
在這個js檔案中，通過程式碼的形式配置webpack
在專案的根目錄執行命令：webpack

建立webpack配置檔案webpack.config.js

// path 是NodeJS內建的模組，無需額外的下載，直接使用即可
var path = require('path')

// 匯出模組內容
module.exports = {
  // 入口
  // __dirname 表示當前配置檔案（webpack.config.js）所在的目錄
  // path.join 將兩個路徑合併為一個絕對路徑！！！
  entry: path.join(__dirname, './src/js/main.js'),

  // 出口
  output: {
    // path 表示出口檔案生成的目錄
    path: path.join(__dirname, './dist'),
    // filename 表示出口檔案的名稱
    filename: 'bundle.js'
  }
}

• 4 注意：需要在頁面中引入 輸出檔案 的路徑（此步驟可通過配置webpack去掉）

webpack-dev-server

• 安裝：npm i -D webpack-dev-server
• 作用：配合webpack，建立開發環境（啟動伺服器、監視檔案變化、自動編譯、重新整理瀏覽器等），提高開發效率
• 注意：無法直接在終端中執行 webpack-dev-server，需要通過 package.json 的 scripts 實現
  

配置package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --contentBase ./src --port 3000 --hot"
  },

配置說明

• –contentBase ：主頁面目錄
  
  • –contentBase ./：當前工作目錄
  • –contentBase ./src：webpack-dev-server 啟動的伺服器，我們在瀏覽器中開啟的時候會自動展示 ./src 中的 index.html 檔案
• –open ：自動開啟瀏覽器
• –port ：埠號
• –hot ：熱更新，只加載修改的檔案(按需載入修改的內容)，而非全部載入

使用

npm run dev

配置- webpack.config.js

const webpack = require('webpack')

devServer: {
  // 伺服器的根目錄 Tell the server where to serve content from
  // https://webpack.js.org/configuration/dev-server/#devserver-contentbase
  contentBase: path.join(__dirname, './src'),
  // 自動開啟瀏覽器，此處配置open等的話package.json中就不必配置了
  open: true,
  // 埠號
  port: 3000,

  // --------------- 1 熱更新 -----------------
  hot: true
},

plugins: [
  // ---------------- 2 啟用熱更新外掛 ----------------
  new webpack.HotModuleReplacementPlugin()
]
}

html-webpack-plugin 外掛

• 安裝：npm i -D html-webpack-plugin
• 作用：根據模板，自動生成html頁面
• 優勢：頁面儲存在記憶體中，自動引入bundle.js、css等檔案
  

/* webpack.config.js */
const htmlWebpackPlugin = require('html-webpack-plugin')

// ...
plugins: [
  new htmlWebpackPlugin({
    // 模板頁面路徑
    template: path.join(__dirname, './src/index.html'),
    // 在記憶體中生成頁面路徑，預設值為：index.html
    filename: 'index.html'
  })
]