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