webpack學習方法?大家好，我是喜歡寫 hello world 的前端西瓜哥這次我們開發一個自己的 webpack 插件，接下來我們就來聊聊關于webpack學習方法?以下内容大家不妨參考一二希望能幫到您!
大家好，我是喜歡寫 hello world 的前端西瓜哥。這次我們開發一個自己的 webpack 插件。
插件使用的 webpack 版本為 4.46.0。
webpack 插件有什麼用？webpack plugins 是 webpack 非常重要的一環，用于增強 webpack 的功能。
插件會在 webpack 構建時的生命周期鈎子上做一些處理。比如，最常用的 HtmlWebpackplugin 是在打包文件構建好之後，該插件會額外生成一個 HTML，并将将打包文件通過引用的方式加入到 HTML 文件裡。
下面正式開始開發一款名為 HelloWorldPlugin 的插件，作用是打包時額外生成一個 hello.js 文件。
plugin 的結構首先插件需要有一個 apply 方法。webpack 構建時，會執行這個 apply 方法，并将 webpack 的 compiler 對象傳入進去。
通過這個對象，我們可以訪問 webpack 的生命周期鈎子，改動一些構造過程中産生的對象，影響最終構建結果。
理論上插件是個有 apply 方法的對象即可，但最好還是寫成類的形式。
我們看下 webpack 常見的配置寫法：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
new HtmlWebpackPlugin({
template: 'index.html',
}),
// ...
}
可以看到，類的寫法可以更方便地傳入配置項，以及被複用（這裡的 new HtmlWebpackPlugin 其實可以被使用多次，構造多個 HTML）。
我們的 HelloWorldPlugin 類的基本框架為：
class HelloWorldPlugin {
options;
constructor(options) {
this.options = options;
}
apply(compiler) {
console.log('hello');
}
}
module.exports = HelloWorldPlugin;
然後将該插件加入到 webpack 配置中：
const HelloWorldPlugin = require('./HelloWorldPlugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
},
plugins: [
// 插件在這裡
new HelloWorldPlugin(),
],
}
此時如果執行 webpack 構建，你會在控制台中看到 hello 被打印出來。
此外構造函數也會将傳入的配置對象保存起來，當然這裡我還沒傳任何東西。
使用 webpack 的生命周期鈎子下面我們讓 HelloWorldPlugin 去通過鈎子去額外生成一個文件。
先看 plugin 代碼實現：
const { RawSource } = require('webpack-sources');
const pluginName = 'hello-world-Plugin';
class HelloWorldPlugin {
options;
constructor(options) {
this.options = options;
}
apply(compiler) {
// 生成一個文件
compiler.hooks.emit.tap(pluginName, (compilation) => {
compilation.assets['hello.js'] = new RawSource('console.log(\'Hello world!\')');
})
}
}
module.exports = HelloWorldPlugin;
apply 方法中，通過 compiler.hooks 可以拿到所有的鈎子。
我們要用到是 emit hook。emit hook 的觸發時機是 webpack 打包好資源，準備将資源生成到構建目錄之前，此時正是我們往裡面塞一個文件的好時機。
我們需要執行這個 emit hook 的 tap 方法來注冊事件響應函數，這裡需要傳入當前插件名和一個回調函數。傳入插件名，我也不清楚是要幹嘛，大概是做一個标記，方便 debug。回調函數則會拿到一個 compilation 對象，這個對象下的 assets 其實就是即将生成的文件。我們可以直接修改這個對象，補上一個 hello.js 文件。
這裡需要用到 webpack 官方提供的 webpack-sources 庫，這個庫專門用來生成符合 assets 格式的對象。
const { RawSource } = require('webpack-sources');
compilation.assets['hello.js'] = new RawSource('console.log(\'Hello world!\')');
如果你使用 webpack5，該庫其實已經内置到 webpack 中，通過 require('webpack').sources 即可獲取到。
使用 webpack 構建後，你會發現 dist 目錄下，除了有一個 app.js 文件，還有一個内容為 console.log('Hello world!') 的 hello.js 文件。
使用插件配置這裡我們沒有用到插件傳入的配置，我們對 HelloWorldPlugin 做個加強，用到配置。
插件改為：
const { RawSource } = require('webpack-sources');
const pluginName = 'hello-world-plugin'
class HelloWorldPlugin {
options;
constructor(options) {
this.options = options;
}
apply(compiler) {
const { filename, content} = this.options;
compiler.hooks.emit.tap(pluginName, (compilation) => {
compilation.assets[filename] = new RawSource(content);
})
}
}
module.exports = HelloWorldPlugin;
配置改為：
plugins: [
new HelloWorldPlugin({
filename: 'a.js',
content: 'b',
}),
]
于是你額外拿到了一個内容為 b 的 a.js 文件。
結尾總結一下，開發一個 Plugin 的幾個要點：
我是啥都寫寫的前端西瓜哥，歡迎關注我。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
