webpack自定義loader和自定義插件

加載本地 Loader

1、path.resolve
可以簡單通過在 rule 對象設置 path.resolve 指向這個本地文件

{
  test: /\.js$/
  use: [
    {
      loader: path.resolve('path/to/loader.js'),
      options: {/* ... */}
    }
  ]
}

　　

2、ResolveLoader
這個就是上面我用到的方法。ResolveLoader 用於配置 Webpack 如何尋找 Loader。 默認情況下只會去 node_modules 目錄下尋找，為了讓 Webpack 加載放在本地項目中的 Loader 需要修改 resolveLoader.modules。
假如本地的 Loader 在項目目錄中的 ./loaders/loader-name 中，則需要如下配置：

module.exports = {
  resolveLoader:{
    // 去哪些目錄下尋找 Loader，有先后順序之分
    modules: ['node_modules','./loaders/'],
  }
}

　　

加上以上配置后， Webpack 會先去 node_modules 項目下尋找 Loader，如果找不到，會再去 ./loaders/ 目錄下尋找。
3、npm link
npm link 專門用於開發和調試本地 npm 模塊，能做到在不發布模塊的情況下，把本地的一個正在開發的模塊的源碼鏈接到項目的 node_modules 目錄下，讓項目可以直接使用本地的 npm 模塊。 由於是通過軟鏈接的方式實現的，編輯了本地的 Npm 模塊代碼，在項目中也能使用到編輯后的代碼。

完成 npm link 的步驟如下：

• 確保正在開發的本地 npm 模塊（也就是正在開發的 Loader）的 package.json 已經正確配置好；
• 在本地 npm 模塊根目錄下執行 npm link，把本地模塊注冊到全局；
• 在項目根目錄下執行 npm link loader-name，把第2步注冊到全局的本地 Npm 模塊鏈接到項目的 node_moduels 下，其中的 loader-name 是指在第1步中的package.json 文件中配置的模塊名稱。

鏈接好 Loader 到項目后你就可以像使用一個真正的 Npm 模塊一樣使用本地的 Loader 了。

1.封裝自定義的功能loader

（格式很簡單，重點在於loader-utils，loaderUitls.getOptions可獲取webpack配置rules中的options以供使用 ）

這只是一個簡單的替換路徑loader，具體別的需求的loader就可以自己編寫內容了

 

 

 2. 自定義插件

compiler和compilation

// MyPlugin.js
function MyPlugin(options) {
  this.options = options;
}
MyPlugin.prototype.apply = function(compiler) {
  // ...
  compiler.plugin('compilation', function(compilation) {
    console.log('The compiler is starting a new compilation...');
    compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
      htmlPluginData.html += 'The magic footer';
      callback(null, htmlPluginData);
    });
  });
};
module.exports = MyPlugin;

事件： 通過執行下列事件來允許其他插件更改html： 異步事件： html-webpack-plugin-before-html-generation html-webpack-plugin-before-html-processing html-webpack-plugin-alter-asset-tags html-webpack-plugin-after-html-processing html-webpack-plugin-after-emit 同步事件： html-webpack-plugin-alter-chunks

配合htmlWebpackPlugin插件，給html中link標簽加id

my-plugin.js

function MyPlugin(options) {
  this.options = options;
}
MyPlugin.prototype.apply = function(compiler) {
  compiler.plugin('compilation', function(compilation) {
    compilation.plugin('html-webpack-plugin-alter-asset-tags', function(htmlPluginData, callback) {
      if (htmlPluginData.head && htmlPluginData.head.length) {
        htmlPluginData.head.forEach(item => {
          if (item.attributes) {
             let href = item.attributes.href;
             item.attributes.id = href.substring(href.indexOf('css/') + 4, href.indexOf('.'));
          }
        });
      }
      callback(null, htmlPluginData);
    });
  });
};
module.exports = MyPlugin;

然后 webpack.config.js 中配置為：

let MyPlugin = require('./my-plugin.js')
// ...
plugins: [
  new MyPlugin({options: ''})
]