webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關係圖(dependency graph),其中包含應用程序須要的每一個模塊,而後將全部這些模塊打包成一個或多個 bundle。html
loader對於模塊的源代碼進行轉換webpack
插件,對整個構建過程起做用。web
是一個具備
apply
屬性的JavaScript對象bash
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, compilation => {
console.log("webpack 構建過程開始!");
});
}
}
複製代碼
經常使用插件app
HtmlWebpackPluginwebpack-dev-server
做用: 依據一個簡單的index.html模板,自動生成一個自動引用打包後的js文件的新index.htmlui
CommonsChunkPluginspa
做用: 提取公共代碼,經過將公共模塊提取出來,只在頁面加載的時候引入一次,提高應用的加載效率。插件
UglifyJSPlugincode
做用:UglifyJSPlugin