webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。
entry
output
loader
loader對於模組的原始碼進行轉換
plugins
外掛，對整個構建過程起作用。
是一個具有
apply屬性的JavaScript物件
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, compilation => {
console.log("webpack 構建過程開始！");
});
}
}
複製程式碼常用外掛
-
HtmlWebpackPlugin
作用： 依據一個簡單的index.html模板，自動生成一個自動引用打包後的js檔案的新index.html
-
CommonsChunkPlugin
作用： 提取公共程式碼，通過將公共模組提取出來，只在頁面載入的時候引入一次，提升應用的載入效率。
-
UglifyJSPlugin
作用：UglifyJSPlugin