webpack筆記：寫一個loader和plugin

在開始React或者Vue新項(xiàng)目時，我們一般使用腳手架快速的搭建一個工程，腳手架幫我們省去了很多繁瑣的配置革答，但同時也讓webpack成了一個迷蠢络。在我之前幾年的工作經(jīng)驗(yàn)中，很少真的去了解webpack拙绊，遇到問題了網(wǎng)上找點(diǎn)資料復(fù)制粘貼一下配置，解決了問題也就沒有再去管它泳秀，相信很多人應(yīng)該跟我一樣的情況标沪。

webpack這樣一個在前端廣泛使用的一個工具，還是有必要學(xué)習(xí)的晶默。loader和plugins是兩個重要的核心概念谨娜，本文通過實(shí)現(xiàn)和應(yīng)用來了解它們的工作原理。如果想全面的學(xué)習(xí)或了解webpack磺陡，推薦閱讀 webpack官網(wǎng)趴梢。

編寫一個loader

loader用來對源碼進(jìn)行編譯轉(zhuǎn)換，比如把ES6編譯為ES5币他，把less編譯為css等坞靶。一個loader就是一個function，接收一個source參數(shù)蝴悉，對source進(jìn)行一些處理后返回彰阴。
在開發(fā)調(diào)試時我們會寫一些console.log，在生產(chǎn)環(huán)境中建議刪除拍冠。我們可以實(shí)現(xiàn)這樣一個loader尿这，打包編譯時自動刪除console.log簇抵。如下圖，npm init后寫一個簡單的方法射众，這樣就實(shí)現(xiàn)了我們要的功能碟摆。

// 目錄結(jié)構(gòu)
loader-demo
 ├─index.js
 └package.json

// index.js內(nèi)容
module.exports = function(source) {
  console.log('----------- loader -----------');
  return source.replace(/console\.log\(.*?\)/, '');
}

使用這個loader

發(fā)布loader
可以用npm publish命令將loader-demo發(fā)布到npm倉庫，為了方便測試叨橱，也可以使用npm link命令典蜕。進(jìn)入loader-demo目錄，執(zhí)行npm link罗洗。
在另一個工程使用
我們新建一個npm+webpack工程愉舔，名為webpack-demo，在工程目錄下執(zhí)行npm link loader-demo伙菜。在配置文件里使用loader-demo如下轩缤，匹配js文件，使用loader-demo來處理贩绕，每個匹配的文件都會把源碼傳給我們的loader-demo方法進(jìn)行處理典奉。

// 目錄結(jié)構(gòu)
webpack-demo
 ├─package.json
 ├─webpack.config.js
 ├─src
   ├─index.js
   └print.js

// webpack.config.js內(nèi)容
const path = require('path');
module.exports = {
  entry: './src/index',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'loader-demo'
      }
    ]
  }
}

看一下效果
使用loader-demo前，在打包后的文件里可以搜索到console.log丧叽，使用loader-demo后，在打包后的文件里搜索不到console.log公你，說明我們的loader起了效果踊淳。在本文的最開始處有附件，可以下載嘗試陕靠。

編寫一個plugin

插件能做的事情更多迂尝，這里實(shí)現(xiàn)一個簡單的功能：在打包后的每個js文件頭部加入版權(quán)信息。

// 目錄結(jié)構(gòu)
yo-plugin-demo
 ├─index.js
 └package.json

// index.js內(nèi)容
module.exports = class PloginDemo {
  // 構(gòu)造器剪芥，傳入版權(quán)信息
  constructor(crInfo) {
    this.crInfo = crInfo;
  }
  // 必須垄开，webpack運(yùn)行時調(diào)用
  apply(compiler) {
    // webpack生命周期，生成資源到output目錄之前執(zhí)行
    // 具體可以查看 https://www.webpackjs.com/api/compiler-hooks
    compiler.hooks.emit.tap('YoPluginDemo', compilation => {
      console.log('----------- plugin -----------');
      // 遍歷所有資源税肪，以js結(jié)尾的文件溉躲，在頭部加上版權(quán)信息
      for(const fileName in compilation.assets) {
        if(/\.js$/.test(fileName)) {
          const asset = compilation.assets[fileName];
          asset.source = () => {
            return `/** Copyright ? ${this.crInfo} */\r\n${asset._value}`
          }
        }
      }
    });
  }
}

使用這個plugin

發(fā)布plugin（跟前面講的loader一樣）
npm link
在另一個工程使用（使用前面說到的webpack-demo）
npm link yo-plugin-demo

// webpack.config.js內(nèi)容
const path = require('path');
const YoPluginDemo = require('yo-plugin-demo');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'loader-demo'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new YoPluginDemo('2020 朽木'),
  ]
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者