一、webpack的常見配置

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    // 入口文件
    entry: {
        app: path.join(__dirname, "../src/js/index.js")
    },
    // 輸出文件
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "/"
    },
    // loader配置
    module: {
        rules: [
            {
                test: /\.scss/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
            ......
        ]
    },
    // plugins配置
    plugins: [
        // 重新創(chuàng)建html文件
        new HtmlWebpackPlugin({
            title: "首頁",
            filename: "index.html",
            template: path.resolve(__dirname, "../src/index.html")
        })
        ......
    ]
}

二、webpack的打包原理

1. 識別入口文件
2. 通過逐層識別模塊依賴(Commonjs、amd或者es6的import，webpack都會對其進(jìn)行分析，來獲取代碼的依賴)
3. webpack做的就是分析代碼，轉(zhuǎn)換代碼，編譯代碼，輸出代碼
4. 最終形成打包后的代碼

三、什么是loader

loader是文件加載器，能夠加載資源文件，并對這些文件進(jìn)行一些處理，諸如編譯、壓縮等，最終一起打包到指定的文件中

1. 處理一個文件可以使用多個loader，loader的執(zhí)行順序和配置中的順序是相反的，即最后一個loader最先執(zhí)行，第一個loader最后執(zhí)行
2. 第一個執(zhí)行的loader接收源文件內(nèi)容作為參數(shù)，其它loader接收前一個執(zhí)行的loader的返回值作為參數(shù)，最后執(zhí)行的loader會返回此模塊的JavaScript源碼

四、什么是plugin

在webpack運(yùn)行的生命周期中會廣播出許多事件，plugin可以監(jiān)聽這些事件，在合適的時機(jī)通過webpack提供的API改變輸出結(jié)果。

class MyPlugin{
    constructor(options){
        console.log("MyPlugin constructor:", options);
    }
    apply(compiler){
        compiler.plugin("compilation", compilation => {
            console.log("MyPlugin");
        });
    }
}
module.exports = MyPlugin;
 
 
webpack.config.js配置：
module.exports = {
    ...
    plugins: [
        new MyPlugin({param: "my plugin"})
    ]
}

使用該plugin后，執(zhí)行的順序：

1. webpack啟動后，在讀取配置的過程中會執(zhí)行new MyPlugin(options)初始化一個MyPlugin獲取其實(shí)例
2. 在初始化compiler對象后，就會通過compiler.plugin(事件名稱，回調(diào)函數(shù))監(jiān)聽到webpack廣播出來的事件
3. 并且可以通過compiler對象去操作webpack

五、loader和plugin的區(qū)別

對于loader，它是一個轉(zhuǎn)換器，將A文件進(jìn)行編譯形成B文件，這里操作的是文件，比如將A.scss轉(zhuǎn)換為A.css，單純的文件轉(zhuǎn)換過程

plugin是一個擴(kuò)展器，它豐富了webpack本身，針對是loader結(jié)束后，webpack打包的整個過程，它并不直接操作文件，而是基于事件機(jī)制工作，會監(jiān)聽webpack打包過程中的某些節(jié)點(diǎn)，執(zhí)行廣泛的任務(wù)