webpack.config.js

const path = require('path')
const CopyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin')
​
module.exports = {
　　mode: 'development',
　　entry: {
　　　　main: './src/index.js'
　　},
　　plugins: [
　　　　　　new CopyrightWebpackPlugin({
　　　　　　name: 'pluginParams'
　　　　})
　　]
　　output: {
　　　　path: path.resolve(__dirname, 'dist'),
　　　　filename: '[name].js'
　　}
}

根目錄建立 plugins 資料夾，在資料夾中建立一個 copyright-webpack-plugin.js 檔案

注： loader 是一個函式(function)， plugin 是一個 類(class)

copyright-webpack-plugin.js

class CopyrightWebpackPlugin {
　　constructor(options) {
　　　　console.log('外掛被使用了, 傳入的引數為：'， options)
　　}
　　// 引數 compiler 是 webpack 的一個例項
　　// compiler 存放著所有配置內容，包括所有打包的相關內容
　　// compiler.hooks 定義了打包過程中的時刻值（鉤子）
　　// emit 時刻：將打包的資源輸出到 輸出目錄(dist) 前,是一個非同步的時刻值
　　apply(compiler) {
　　　　// compile 時刻是同步的時刻
　　　　// 同步的時刻的引數中， 第二個方法引數只傳一個 compilation 引數
　　　　compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => {
　　　　console.log('compiler')
　　})
　　　// compilation 存放著這一次打包的內容
　　compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, callback) => {
　　// 打包生成的內容存放在compilation.assets
　　// console.log(compilation.assets)
　　// 打包輸出前新增一個 copyright.txt 檔案
　　compilation.assets['copyright.txt'] = {
　　source: function() {
　　　　return 'copyright output by plugin'
　　}
　　size: function() {
　　　　return 26
　　}
};
　　// 使用 tapAsyns 時 最後一定要呼叫一下 callback
　　callback()
　　})
　　}
}
​
module.exports = CopyrightWebpackPlugin;
對於 compilation 中擁有哪些屬性，可以通過 node 額度除錯工具檢視

在 package.json 中

第一個引數 --inspect 表示開啟 Node 除錯工具，--inspect-brk在執行 webpack.js 進行除錯時，在 webpack 執行時的第一行上打上斷點

{
　　// ...
　　"script": {
　　"debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js"
}
}
class CopyrightWebpackPlugin {
　　constructor(options) {
　　console.log('外掛被使用了, 傳入的引數為：'， options)
}
　　apply(compiler) {
　　　　compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => {
　　　　console.log('compiler')
})
compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, callback) => {
　　debugger;
　　compilation.assets['copyright.txt'] = {
　　source: function() {
　　return 'copyright output by plugin'
}
size: function() {
return 26
}
};
callback()
})
}
}
​
module.exports = CopyrightWebpackPlugin;
執行 npm run debbug 後可開啟瀏覽器控制檯，在 Node 除錯工具中進行除錯

此時可滑鼠移動到 需要檢視的變數或方法中的變數進行檢視，或者在右側的 watch 中新增需要監測的變數檢視。

搜尋

複製