學習webpack4 基礎配置

學習webpack4 - 基礎配置

學習webpack4 - html處理

學習webpack4 - 樣式處理

學習webpack4 - es6語法轉化

學習webpack4 - 第三方庫的使用

學習webpack4 - 抽離公共**

yarn init -y 初始化專案

yarn add webpack webpack-cli -d

step2: 開啟package.json檔案，新增乙個指令碼：

"scripts":

打包成功了！當前目錄結構為：

當前目錄中並沒有webpack.config.js這個檔案卻還能打包成功？因為在webpack4中不必一定要有配置檔案了，也不必一定要指定乙個入口和出口才能打包成功。它會預設找到./src/index.js 作為預設入口點並且在 ./dist/main.js 中輸出模組包，但是這樣不是很靈活，因為名字之類的都指定了，那麼怎麼自己配置這些東西呢？

step1: 根目錄下新建乙個webpack.config.js檔案

step2: 開啟webpack.config.js檔案，進行入口和出口配置：

let path = require('path');

module.exports = 
}

執行成功了。

當前目錄結構為：

兩個配置：

entry: 入口配置

用來指定入口起點，預設./src，進入入口起點後，webpack會找出有哪些模組和庫是入口起點直接和間接依賴的。

output: 出口配置

用來指定在**輸出所建立的bundles，預設./dist，其中：

上面結果中還看到有乙個warning說mode沒有設定，這個mode是模式，接下來配置下這個mode

module.exports = ,

output: ,
//...
}

let htmlwebpackplugin = require('html-webpack-plugin')

module.exports = ,
output: ,
//外掛程式配置
plugins: [
new htmlwebpackplugin(),
new htmlwebpackplugin()
] //...
}

mode（模式）：分別是production(生產) 和 development(開發) 模式

方法一：開啟webpack.config.js檔案，配置mode

方法二：開啟package.json檔案，配置指令碼

嘗試執行，

npm run dev  //開發環境

npm run build //生產環境

專案中如果我們**有改動，webpack就會實時監控並編譯的話，開發就會舒服的多，實現方法如下：

module.exports = ,

//...
}

step1: 安裝webpack-dev-server

yarn add webpack-dev-server -d

step3: 開啟package.json檔案，更改下指令碼

"scripts":

npm run dev

此時瀏覽器會自動開啟 http://localhost:3000/

學習webpack4 基礎配置

學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共 yarn init y 初始化專案 yarn add webpack webpack cli...

webpack4配置詳解

方式一 單檔案寫法 entry 方式二 多檔案寫法 entry output 常用的有三種 模板描述 hash模組識別符號的hash,一般應用於filename name hash js chunkhash按需載入塊內容的hash，根據chunk自身的內容計算而來,js name chunkhash...

webpack4配置熱更新

目錄 step1 step2 step3 在資料夾中建立3個資料夾，分別是 src dist config 然後在src下建立乙個main.js 在dist下建立乙個index.html 在config下建立乙個webpack.dev.js 使用命令列，輸入 git init 建立乙個git的.檔案...