In this post, I’m going to show you how to write a simple webpack plugin. By creating this very simple plugin, we will learn a couple of concepts of webpack and start to build up our knowledges about how webpack works. Now, let’s jump in.
1. Setup project
First, create a folder named YouCleanWebpackPlugin (or MyCleanWebpackPlugin or whatever you want).
Next, run npm init -y
to create a package.json
file.
Next, run npm i webpack webpack-cli
to install webpack and its command-line-interface.
Next, create two files a.js
and b.js
inside the src
folder at the root.
1 2 3 4 5 6 |
<span class="token comment">//src/a.js</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//src/b.js</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'b'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Next, create the webpack.config.js
file
1 2 3 4 5 6 7 8 9 10 |
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> entry<span class="token punctuation">:</span> <span class="token punctuation">{</span> a<span class="token punctuation">:</span> <span class="token string">'./src/a.js'</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token string">'./src/b.js'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> output<span class="token punctuation">:</span> <span class="token punctuation">{</span> filename<span class="token punctuation">:</span> <span class="token string">'[name].js'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
At this point, your folder structure should be similar to this:
Cool! That’s all for the setup. Now is the main part, creating the plugin.
2. Init plugin
A webpack plugin is simply a class with the apply
method. At the root, create a plugin
folder and inside, create the YouCleanWebpackPlugin.js
file.
1 2 3 4 5 6 7 8 9 |
<span class="token comment">//plugins/YouCleanWebpackPlugin.js</span> <span class="token keyword">class</span> <span class="token class-name">YouCleanWebpackPlugin</span> <span class="token punctuation">{</span> <span class="token function">apply</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello, plugin here'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> YouCleanWebpackPlugin<span class="token punctuation">;</span> |
That’s it! Simple right?
3. Load plugin
Next thing is loading our plugin. In the webpack.config.js
, require our plugin file and initiate it in the plugins array, like so:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="token comment">//webpack.config.js</span> <span class="token keyword">const</span> YouCleanWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./plugins/YouCleanWebpackPlugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">,</span> plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token keyword">new</span> <span class="token class-name">YouCleanWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> |
Now, run npx webpack
to see the result.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$ npx webpack hello<span class="token punctuation">,</span> plugin here Hash<span class="token punctuation">:</span> <span class="token number">6704</span>d7aafb311be76e75 Version<span class="token punctuation">:</span> webpack <span class="token number">4.43</span><span class="token number">.0</span> Time<span class="token punctuation">:</span> <span class="token number">88</span>ms Built at<span class="token punctuation">:</span> <span class="token number">06</span><span class="token operator">/</span><span class="token number">19</span><span class="token operator">/</span><span class="token number">2020</span> <span class="token number">7</span><span class="token punctuation">:</span><span class="token number">53</span><span class="token punctuation">:</span><span class="token number">30</span> <span class="token constant">PM</span> Asset Size Chunks Chunk Names a<span class="token punctuation">.</span>js <span class="token number">946</span> bytes <span class="token number">0</span> <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> a b<span class="token punctuation">.</span>js <span class="token number">947</span> bytes <span class="token number">1</span> <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> b Entrypoint a <span class="token operator">=</span> a<span class="token punctuation">.</span>js Entrypoint b <span class="token operator">=</span> b<span class="token punctuation">.</span>js <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token punctuation">.</span><span class="token operator">/</span>src<span class="token operator">/</span>a<span class="token punctuation">.</span>js <span class="token number">16</span> bytes <span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token punctuation">.</span><span class="token operator">/</span>src<span class="token operator">/</span>b<span class="token punctuation">.</span>js <span class="token number">16</span> bytes <span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token constant">WARNING</span> <span class="token keyword">in</span> configuration The <span class="token string">'mode'</span> option has not been <span class="token keyword">set</span><span class="token punctuation">,</span> webpack will fallback to <span class="token string">'production'</span> <span class="token keyword">for</span> <span class="token keyword">this</span> value<span class="token punctuation">.</span> Set <span class="token string">'mode'</span> option to <span class="token string">'development'</span> or <span class="token string">'production'</span> to enable defaults <span class="token keyword">for</span> each environment<span class="token punctuation">.</span> You can also <span class="token keyword">set</span> it to <span class="token string">'none'</span> to disable any <span class="token keyword">default</span> behavior<span class="token punctuation">.</span> Learn more<span class="token punctuation">:</span> https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>webpack<span class="token punctuation">.</span>js<span class="token punctuation">.</span>org<span class="token operator">/</span>configuration<span class="token operator">/</span>mode<span class="token operator">/</span> |
See the hello, plugin here
message. It is loaded. Awesome!
The next thing to do is implementing our main functionality of the plugin, which is removing all the file in the output folder before every build to keep it clean. At this point, your folder structure should be similar to this:
4. Implement plugin feature
We will need the help of another package, lets run npm i del
. Then, update our YouCleanWebpackPlugin.js
like so:
1 2 3 4 5 6 7 8 9 10 |
<span class="token keyword">const</span> del <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'del'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">YouCleanWebpackPlugin</span> <span class="token punctuation">{</span> <span class="token function">apply</span><span class="token punctuation">(</span>compiler<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> outputPath <span class="token operator">=</span> compiler<span class="token punctuation">.</span>options<span class="token punctuation">.</span>output<span class="token punctuation">.</span>path<span class="token punctuation">;</span> del<span class="token punctuation">.</span><span class="token function">sync</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'**/*'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> cwd<span class="token punctuation">:</span> outputPath <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> YouCleanWebpackPlugin<span class="token punctuation">;</span> |
Then run npx webpack
again to see the result. You probably can’t see anything yet, everything stay the same. In order to see the difference, let’s remove the b
entry point from the webpack.config.js
. Then, run npx webpack
again and you will see the b.js
file in the dist
folder …gone! Which means…it works!
5. Conclusion
In conclusion, we did we learn? We learn that, a webpack plugin is simple a javascript class with a apply
method which receive the compiler
parameter. To load a plugin, we need to instantiate it inside the plugins
array of the webpack.config.js
file.
In the next post, we will explore more about how these plugins are being called and also about the compiler
parameter that we receive in the apply
method. Thanks for reading.
6. Inspiration
clean-webpack-plugin: https://github.com/johnagan/clean-webpack-plugin