說明:

• 本篇文章主要做如下事情:

1. 創建一個基本的webpack4.x 項目
2. [報錯]: The 'mode' option has not been set, webpack will fallback to 'production' for this value
3. [報錯]: ERROR in Entry module not found: Error: Can not resolve './src' in 'D:\L-react\HeiMa\01.webpack-base'
4. [插件] :webpack-dev-server
5. [插件] : html-webpack-plugin

• 項目源代碼

---

創建基本的 webpack4.x 項目

• 1.快速初始化一個項目: npm init -y
• 2.在項目根目錄創建 src源代碼目錄和dist產品目錄
• 3.在 src 目錄下創建index.html
• 4.使用 cnpm 安裝 webpack,運行cnpm i webpack -D
• 5.使用 cnpm 安裝 webpack-cli,運行cnpm i webpack-cli -D

---

webpack常見報錯

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

• 原因是缺少mode
• 4.x中新增了mode. production屬性,會默認對文件進行壓縮.

---

ERROR in Entry module not found: Error: Can not resolve './src' in 'D:\L-react\HeiMa\01.webpack-base'

• 入口文件未找到,在 webpack 4.x 中,不需要配置入口文件, 采用約定大于配置原則. 默認的打包入口路徑是 src -> index.js.

• 默認約定了
• 打包入口文件 ./src/index.js
• 打包的輸出文件是 ./dist/main.js

---

新建 webpack.config.js

• 向外暴露成員: mopdule.exports or export default

---

配置好模式和入口文件后

• 手動在最開始的頁面中引入 js 文件

<script src="../dist/main.js"></script>

---

webpack-dev-server

• cnpm i webpack-dev-server -D
• 每次寫完代碼手動調用webpack去打包代碼太麻煩,因此使用 webpack-dev-server來進行自動打包構建
• 使用 webpack-dev-server啟動.
• Project is running at http://localhost:8080: 項目正在8080端口運行(此時是一個小型的服務器)
• webpack output is served from /: 托管的的路徑是根路徑. 在此項目中即: 01.webpack-base
• 通過webpack-dev-server打包生成的main.js為了提高性能,是放在內存中的.

[所做事情]

1. 保存時,自動打包生成一個main.js在內存中(注意,不是在磁盤)
2. --open: 自動打開瀏覽器
3. --port 3000: 指定端口
4. --hot: 熱更新
5. --progress: 打包記錄
6. --compress: 壓縮
7. --host 127.0.0.1: 指定主機ip

---

html-webpack-plugin

• cnpm i html-webpack-plugin -D
• 未配置html-webpack-plugin的主頁是在磁盤上面的,磁盤的讀取速度不如內存
• 使用

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),   // 源文件filename: 'index.html'  // 生成在內存中首頁的名稱
})module.exports = {mode： 'development',plugins: [htmlPlugin]
}

[所做事情]:

1. 根據給定模板,在給定路徑下生成內存中的主頁
2. 會自動添加<script type="text/javacript" src="main.js"></script>

---

小結:

1. 上面2個插件的主要思想是: 減少磁盤相關的操作,利用內存的快速
2. React的虛擬DOM也是使用內存中的對象來描述真實的DOM