目錄
-
✎ 0配置——基本命令
打包命令：npx webpack
原理解析：
- 會去找 ../node_modules/.bin/webpack.cmd文件（怎麼樣判斷？ 如圖解析
）
- 執行了npx webpack會有一個dist（
）
- 在dist裏面建立index.html 的body裏面直接引用打包後的main.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript" src="./main.js"> </script> </body> </html>- 右鍵瀏覽器打開
- 添加webpack.config.js內容，如果mode是開發模式則對應bundle.js不壓縮，如果是生產模式（production）則壓縮，默認爲生產模式。
var HtmlWebpackPlugin = require('html-webpack-plugin') let path = require('path') console.log(path.resolve('dist')) module.exports = { mode: 'development', entry: "./src/index.js", output: { path: path.resolve(__dirname, 'dist'), filename: "bundle.js" }, plugins: [ new HtmlWebpackPlugin() ] }- 總結：藉助配置文件，在依賴中webpack會調用webpack-cli依賴，然後執行../node_modules/webpack-cli/bin/config/config-yargs.js的option默認名稱文件解析，強制修改也是可以的。
）
）
-
✎ node寫法——主要內容
- Webpack核心概念
- Webpack的常用配置
在上一篇文章中，我們已經實現了一個基礎的Webpack結構：
裏面有webpack.config.js，這個文件是我們在執行Webpack指令過程中會查找的配置文件。
在上一篇文章中指明瞭編譯的入口文件、輸出路徑，以及生成文件的名稱。
問題：webpack.config.js到底是什麼東西呢？
答：我們可以理解爲是一個對象；
module.exports可以對外公佈一個js文件的相應內容！！
-
✎ Webpack核心概念
-
導入（import）和導出（export）
推薦文章：Webpack4教程：第一部分，入口、輸入和ES6模塊
// main.js
// import * as lib from './lib.js';
// import * as Dog from './dog.js';
const lib = require('./lib.js')
const Dog = require('./dog.js')
console.log('-------------------整個導入----------------------')
console.log(lib.sum(1, 2));
console.log(lib.substract(3, 1));
console.log(lib.divide(6, 3));
const dog = new Dog.default();
dog.bark();
console.log('---------------導入一個或多個named導出------------')
import {
sum,
substract,
divide
} from './lib';
console.log('sum:' + sum(1, 2));
console.log('substract:' + substract(3, 1));
console.log('divide:' + divide(6, 3));
- 入口
- 輸出
- loader
- 插件
-
➊ 入口 / 輸出
- ➣ 入口起點(entry point)指示，webpack應該使用哪個模塊，來作爲構建及內部依賴圖的開始；
- ➣ 進入入口起點後，webpack有哪些模塊和庫是入口起點（直接和間接）依賴的。
- ➣ 如圖所示（其入口文件是src目錄下的index.js文件，查找這個文件相依賴的內容）
-
➋ Loader
- loader讓webpack能夠去處理那些非Java script的文件（webpack自身只理解JavaScript）。
- loader可以將所有類型的文件轉換爲webpack能夠處理的有效模塊。
- loader作用如圖所示
解析：藉助一些相應的loader，將es6的語法轉換爲es5的語法；
-
➌ Plugins（插件）
- Loader被用於轉換某些類型的模塊，而插件則可以用於執行範圍更廣的任務。
- 插件的範圍，包括從打包優化和壓縮一直到重新定義環境中的變量。
- 插件接口功能及其強大，可以用來處理各種各樣的任務。
- 如圖所示（可以提取我們所用到的css、生成html頁面，從一個目錄到另外一個目錄的生成）
-
✎ 配置
-
◆ 入口配置
- Webpack的入口文件可以是單個也可以是多個，決定了最終打包出來是多個bundle還是一個；
- context設置基礎目錄絕對路徑用於從配置中解析入口的起點，先去這裏再去mian.js或者是a.js，resolve記得引入原生模塊！！
-
◆ 出口配置
-
◆ 模塊配置
module配置，主要屬性有rules、test、include、exclude、use等
◆ 模塊配置 resolve屬性
設置模塊如何被解析。webpack提供合理的默認值，但是還是可能會修改一些細節。
- 引入文件的require可以不寫後綴
- 如下src/utils路徑，可以設置別名爲utils，可以用utils代替這樣的一個路徑！！
◆ 插件配置
plugins選項用於以各種方式自定義webpack構建過程。
-
◆ 開發中服務器配置
webpack-dev-server用於啓動一個開發過程中小型服務器，方便開發調試；
- port 制定服務器監聽端口號
- contentBase:path.join(__dirname,"dist") 指告訴服務器資源路徑在哪裏
- compress 是否啓動服務器gzip壓縮（傳輸過程中變小，實現過程中再解壓，增加反應速度）
- publicPath 設定可訪問靜態資源路徑
- proxy 可以作爲代理服務器向口段發送請求
-
✎ 總結
module.export是對象，包含很多屬性：
- entry是入口文件
- output輸出路徑
- module是指明用到的loader
- resolve可以不寫後綴名
- plugins插件的使用和實例化
- devServer內置小型服務器
-
✎ 課程鏈接
51cto學習課程（webpack配置）