webpack整理

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關係圖(dependency graph),其中包含應用程序須要的每一個模塊,而後將全部這些模塊打包成一個或多個 bundle。html

entry

output

loader

loader對於模塊的源代碼進行轉換webpack

plugins

插件,對整個構建過程起做用。web

是一個具備apply屬性的JavaScript對象bash

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
    apply(compiler) {
        compiler.hooks.run.tap(pluginName, compilation => {
            console.log("webpack 構建過程開始!");
        });
    }
}
複製代碼

經常使用插件app

  1. HtmlWebpackPluginwebpack-dev-server

    做用: 依據一個簡單的index.html模板,自動生成一個自動引用打包後的js文件的新index.htmlui

  2. CommonsChunkPluginspa

    做用: 提取公共代碼,經過將公共模塊提取出來,只在頁面加載的時候引入一次,提高應用的加載效率。插件

  3. UglifyJSPlugincode

    做用:UglifyJSPlugin

webpack-dev-server

相關文章
相關標籤/搜索