webpack整理

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 構建過程開始！");
        });
    }
}
複製代碼

經常使用插件

1. HtmlWebpackPlugin

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

2. CommonsChunkPlugin

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

3. UglifyJSPlugin

   做用：UglifyJSPlugin

webpack-dev-server