webpack是一個(gè)模塊打包器（module bundler），利用webpack打包可以使開發(fā)便捷，拓展性強(qiáng)，可以使用戶任意選擇自己喜歡的模塊進(jìn)行開發(fā)，可以解決模塊之間的相互依賴關(guān)系，插件機(jī)制完善。webpack提供了一個(gè)核心，核心提供了很多開箱即用的功能，同時(shí)它可以用loader和plugin來擴(kuò)展。

1.Loader：

用于對(duì)模塊源碼的轉(zhuǎn)換，loader 描述了 webpack 如何處理非 javascript 模塊，并且在 buld 中引入這些依賴。loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或者將內(nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。比如說：CSS-Loader，Style-Loader 等。

• 常見的loader配置：

// webpack.config.js
module.exports = {
  module: {
    rules: [
     {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      { test: /\.js$/, use: 'babel-loader' },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'postcss-loader' },
        ]
      }
    ]
  }
};

2.plugin

目的在于解決 loader 無法實(shí)現(xiàn)的其他事,它直接作用于 webpack，擴(kuò)展了它的功能。在 webpack 運(yùn)行的生命周期中會(huì)廣播出許多事件，plugin 可以監(jiān)聽這些事件，在合適的時(shí)機(jī)通過 webpack 提供的 API 改變輸出結(jié)果。插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量。插件接口功能極其強(qiáng)大，可以用來處理各種各樣的任務(wù)。如：extract-text-webpack-plugin將 css 提取成獨(dú)立的 css 文件；html-webpack-plugin 創(chuàng)建 HTML 頁面文件到你的輸出目錄，另外將 webpack 打包后的 chunk 自動(dòng)引入到這個(gè) HTML 中；DefinePlugin 定義全局常量

// 一個(gè) JavaScript 命名函數(shù)。
function MyExampleWebpackPlugin() {
};
// 在插件函數(shù)的 prototype 上定義一個(gè) apply 方法。
MyExampleWebpackPlugin.prototype.apply = function(compiler) {
// 指定一個(gè)掛載到 webpack 自身的事件鉤子。
compiler.plugin('webpacksEventHook', function(compilation /* 處理 webpack 內(nèi)部實(shí)例的特定數(shù)據(jù)。*/, callback) {
console.log("This is an example plugin!!!");
// 功能完成后調(diào)用 webpack 提供的回調(diào)。
callback();
});
};