壓縮檔案
**分割：提取公用**
模組合併：把多個模組合併
自動重新整理（熱更新）：**改變，自動重新整理頁面
由於外掛程式可以攜帶引數/選項，必須在 webpack 配置中，向 plugins 屬性傳入的是外掛程式的例項。
let
=require
('clean-webpack-plguin'
)；
new
cleanwebpackplugin
()
let htmlwebpackplugin =
require
('html-webpack-plugin'
)；
new
htmlwebpackplugin
()
// webpack 的配置檔案（遵循commonjs規範）
let path =
require
('path');
// node內建的模組
console.
log(__dirname)
;// node的每乙個模組中自帶的變數，指的是當前資料夾的絕對路徑
console.
log(__filename)
;// __filename比__dirname多了乙個檔案的名字
console.
log(path.
resolve
(__dirname,
'build'))
;// 建立乙個新的資料夾，其目錄為：當前資料夾/build
// 匯入clean-webpack-plugin外掛程式：用來清空之前打包生成的檔案
let=
require
('clean-webpack-plugin');
// 匯入html-webpack-plugin外掛程式：用來自動根據對應的html模板生成新的html檔案
let htmlwebpackplugin =
require
('html-webpack-plugin');
// 這個檔案要匯出乙個物件
module.exports =
, plugins:
[// 使用clean-webpack-plugin外掛程式
newcleanwebpackplugin()
,new
htmlwebpackplugin()
],devserver:
/* * devserver注意事項：
1、預設開啟的是 index.html頁面，如果沒有，則頁面顯示的是靜態資源目錄下的檔案
2、如果想要顯示打包後的html檔案（例如我這裡的newindex.html），則需要手動在瀏覽器開啟的位址後面補上 /nesindex.html
3、這裡打包是打包到記憶體中，因此在dist資料夾中是看不到任何檔案的
*/}
,"keywords":[
],"author":""
,"license"
:"isc"
,"devdependencies"
:}
webpack學習之路之webpack核心概念
webpack相關文件 webpack官網 webpack中文官網 webpack github位址 webpack 版本差異及修復bug webpack 主要4個核心概念 1 entry entry是某一段 的入口，這段 入口會告訴webpack 裡面有哪些模組的依賴。entry也是打包的入口，告...
前端學習之webpack
yarn webpack mode 模式可以切換webpack的打包模式，也可以在配置檔案中設定 production模式會優化打包的結果 development 模式會優化打包的速度 none模式會執行最原始的webpack配置，不做任何額外的處理 webpack內部的loader只能處理js檔案...
記錄一次webpack3公升級到webpack4過程
公升級之前也參考了一些網上的教程。借鑑之，進行的自己的公升級。一些版本為什麼設為那個版本號也是參考別人的結果。整體是按照先公升級npm run dev 在公升級npm run build的順序。首先公升級webpack，在package.json檔案中將webpack版本號修改為4.8.1。webp...