1 số tool webpack hay ho bạn có thể sử dụng được trong dự án

Thứ Ba, 22/12/2020

Tram Ho

Giới thiệu

Từ khóa webpack chắc không còn xa lạ với mọi người nữa, sức mạnh của nó đã được thể hiện rõ ràng qua số dự án đang chạy hay số sao (hiện tại đang là 56,8k lượt vote trên github, đó là chỉ là core của nó mà thôi). Khi nó đến webpack sẽ có 2 thành phần lớn tạo nên sức mạnh cho nó là loader và pluin của nó, hôm nay mình xin giới thiệu 1 số plugin mà mới tìm hiểu và cảm thấy hay ho, đang muốn thử áp dụng vào dự án.

Một số plugin:

1> moment-locales-webpack-plugin:

Trang chủ: https://github.com/iamakulov/moment-locales-webpack-plugin

Giới thiệu: Khi chúng ta sử dụng momentjs để format liên quan đến thời gian thường phải import 1 vài localization mà thôi. Tuy nhiên, khi dùng momentjs ta thường được tặng kèm rất nhiều ngôn ngữ khác nhau => chính điều này tạo ra sự dư thừa và gây nặng cho ứng dụng. Plugin này sinh ra để giảm bớt đi 1 số localization không cần thiết
Cài đặt:

npm install --save-dev moment-locales-webpack-plugin

Sử dụng:

<span class="token comment">// webpack.config.js</span>
<span class="token comment">// khai báo plugin</span>
<span class="token keyword">const</span> MomentLocalesPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'moment-locales-webpack-plugin'</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>
    plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token comment">// Nếu bạn muốn loại bỏ tất cả các ngôn ngữ khác</span>
        <span class="token comment">// ('en': ngôn ngữ mặc định)</span>
        <span class="token keyword">new</span> <span class="token class-name">MomentLocalesPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>

        <span class="token comment">// Nếu bạn muốn giữ lại 'en', 'en-us', 'ru'</span>
        <span class="token comment">//('en': ngôn ngữ mặc định không thể loại bỏ)</span>
        <span class="token keyword">new</span> <span class="token class-name">MomentLocalesPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            localesToKeep<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'es-us'</span><span class="token punctuation">,</span> <span class="token string">'ru'</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>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

// webpack.config.js

// khai báo plugin

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {

plugins: [

// Nếu bạn muốn loại bỏ tất cả các ngôn ngữ khác

// ('en': ngôn ngữ mặc định)

new MomentLocalesPlugin(),

// Nếu bạn muốn giữ lại 'en', 'en-us', 'ru'

//('en': ngôn ngữ mặc định không thể loại bỏ)

new MomentLocalesPlugin({

localesToKeep: ['es-us', 'ru'],

}),

],

};

Như ở đoạn code trên cách sử dụng rât đơn giản: bạn import plugin và sử dụng thuộc tính localesToKeep để giữ lại các ngôn ngữ bạn cần dùng. Bạn cần chú ý: tiếng anh là ngôn ngữ mặc định nên không thể loại bỏ được

Kết quả:

Bạn có thể loại bỏ được các ngôn ngữ không cần dùng của moment (khoảng 75% dung lượng file của moment là do support các ngôn ngữ khác nhau)
Tuy momentjs đang được thay thế bằng các thư viên khác như (DateFns, DateJs, Luxon,.. ) nhưng nếu dự án bạn đang dùng momnent thì có thể thử dùng thèn này

2> webpack-pwa-manifest:

Trang chủ: https://github.com/arthurbergmz/webpack-pwa-manifest

Giới thiệu: Khi chúng ta đang dùng tự động sinh ra file manifest.json (dùng trong Progressive Web Application)
Cài đặt:

npm install --save-dev webpack-pwa-manifest

Sử dụng:

<span class="token comment">// ES6+</span>
<span class="token keyword">import</span> WebpackPwaManifest <span class="token keyword">from</span> <span class="token string">'webpack-pwa-manifest'</span>

<span class="token comment">// ES5</span>
<span class="token keyword">var</span> WebpackPwaManifest <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack-pwa-manifest'</span><span class="token punctuation">)</span>

plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
  <span class="token keyword">new</span> <span class="token class-name">WebpackPwaManifest</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// tên app</span>
    name<span class="token operator">:</span> <span class="token string">'My Progressive Web App'</span><span class="token punctuation">,</span>
 <span class="token comment">// tên rút gọn, bạn sẽ thấy khi cài đặt hoặc khi hiển thị trên giao diện mà nó giới hạn từ </span>
    short_name<span class="token operator">:</span> <span class="token string">'MyPWA'</span><span class="token punctuation">,</span>
<span class="token comment">// mô tả     </span>
    description<span class="token operator">:</span> <span class="token string">'My awesome Progressive Web App!'</span><span class="token punctuation">,</span>
<span class="token comment">// màu nền: khi laucher ứng dụng lần đầu trên UI     </span>
    background_color<span class="token operator">:</span> <span class="token string">'#ffffff'</span><span class="token punctuation">,</span>
    crossorigin<span class="token operator">:</span> <span class="token string">'use-credentials'</span><span class="token punctuation">,</span> <span class="token comment">//can be null, use-credentials or anonymous</span>
<span class="token comment">// list icon    </span>
    icons<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        src<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src/assets/icon.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        sizes<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">96</span><span class="token punctuation">,</span> <span class="token number">128</span><span class="token punctuation">,</span> <span class="token number">192</span><span class="token punctuation">,</span> <span class="token number">256</span><span class="token punctuation">,</span> <span class="token number">384</span><span class="token punctuation">,</span> <span class="token number">512</span><span class="token punctuation">]</span> <span class="token comment">// multiple sizes</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        src<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src/assets/large-icon.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        size<span class="token operator">:</span> <span class="token string">'1024x1024'</span> <span class="token comment">// you can also use the specifications pattern</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        src<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src/assets/maskable-icon.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        size<span class="token operator">:</span> <span class="token string">'1024x1024'</span><span class="token punctuation">,</span>
        purpose<span class="token operator">:</span> <span class="token string">'maskable'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">"start_url"</span><span class="token operator">:</span> <span class="token string">"."</span><span class="token punctuation">,</span>
  <span class="token string">"display"</span><span class="token operator">:</span> <span class="token string">"standalone"</span><span class="token punctuation">,</span>
  <span class="token string">"scope"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
  <span class="token string">"theme_color"</span><span class="token operator">:</span> <span class="token string">"#3367D6"</span><span class="token punctuation">,</span>
  <span class="token string">"shortcuts"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token string">"name"</span><span class="token operator">:</span> shortcut"<span class="token punctuation">,</span>
      <span class="token string">"short_name"</span><span class="token operator">:</span> <span class="token string">"tên shortcut"</span><span class="token punctuation">,</span>
      <span class="token string">"description"</span><span class="token operator">:</span> <span class="token string">"mô tả"</span><span class="token punctuation">,</span>
      <span class="token string">"url"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
      <span class="token string">"icons"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token string">"src"</span><span class="token operator">:</span> <span class="token string">"/images/icon.png"</span><span class="token punctuation">,</span> <span class="token string">"sizes"</span><span class="token operator">:</span> <span class="token string">"192x192"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <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>

// ES6+

import WebpackPwaManifest from 'webpack-pwa-manifest'

// ES5

var WebpackPwaManifest = require('webpack-pwa-manifest')

plugins: [

new WebpackPwaManifest({

// tên app

name: 'My Progressive Web App',

// tên rút gọn, bạn sẽ thấy khi cài đặt hoặc khi hiển thị trên giao diện mà nó giới hạn từ

short_name: 'MyPWA',

// mô tả

description: 'My awesome Progressive Web App!',

// màu nền: khi laucher ứng dụng lần đầu trên UI

background_color: '#ffffff',

crossorigin: 'use-credentials', //can be null, use-credentials or anonymous

// list icon

icons: [

{

src: path.resolve('src/assets/icon.png'),

sizes: [96, 128, 192, 256, 384, 512] // multiple sizes

},

{

src: path.resolve('src/assets/large-icon.png'),

size: '1024x1024' // you can also use the specifications pattern

},

{

src: path.resolve('src/assets/maskable-icon.png'),

size: '1024x1024',

purpose: 'maskable'

}

],

"start_url": ".",

"display": "standalone",

"scope": "/",

"theme_color": "#3367D6",

"shortcuts": [

{

"name": shortcut",

"short_name": "tên shortcut",

"description": "mô tả",

"url": "/",

"icons": [{ "src": "/images/icon.png", "sizes": "192x192" }]

},

....

]

})

]

Kết quả
Ta sinh ra 1 file manifest.json tự động tự động sinh ra và inject, với hỗ trợ icon resizing and fingerprinting

<span class="token punctuation">{</span>
 <span class="token string">"name"</span><span class="token operator">:</span> <span class="token string">"My Progressive Web App"</span><span class="token punctuation">,</span>
 <span class="token string">"orientation"</span><span class="token operator">:</span> <span class="token string">"portrait"</span><span class="token punctuation">,</span>
 <span class="token string">"display"</span><span class="token operator">:</span> <span class="token string">"standalone"</span><span class="token punctuation">,</span>
 <span class="token string">"start_url"</span><span class="token operator">:</span> <span class="token string">"."</span><span class="token punctuation">,</span>
 <span class="token string">"short_name"</span><span class="token operator">:</span> <span class="token string">"MyPWA"</span><span class="token punctuation">,</span>
 <span class="token string">"description"</span><span class="token operator">:</span> <span class="token string">"My awesome Progressive Web App!"</span><span class="token punctuation">,</span>
 <span class="token string">"background_color"</span><span class="token operator">:</span> <span class="token string">"#ffffff"</span><span class="token punctuation">,</span>
 <span class="token string">"icons"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
   <span class="token punctuation">{</span>
     <span class="token string">"src"</span><span class="token operator">:</span> <span class="token string">"icon_1024x1024.&lt;fingerprint&gt;.png"</span><span class="token punctuation">,</span>
     <span class="token string">"sizes"</span><span class="token operator">:</span> <span class="token string">"1024x1024"</span><span class="token punctuation">,</span>
     <span class="token string">"type"</span><span class="token operator">:</span> <span class="token string">"image/png"</span><span class="token punctuation">,</span>
     <span class="token string">"purpose"</span><span class="token operator">:</span> <span class="token string">"maskable"</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token punctuation">{</span>
     <span class="token string">"src"</span><span class="token operator">:</span> <span class="token string">"icon_1024x1024.&lt;fingerprint&gt;.png"</span><span class="token punctuation">,</span>
     <span class="token string">"sizes"</span><span class="token operator">:</span> <span class="token string">"1024x1024"</span><span class="token punctuation">,</span>
     <span class="token string">"type"</span><span class="token operator">:</span> <span class="token string">"image/png"</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token punctuation">{</span>
     <span class="token string">"src"</span><span class="token operator">:</span> <span class="token string">"icon_512x512.&lt;fingerprint&gt;.png"</span><span class="token punctuation">,</span>
     <span class="token string">"sizes"</span><span class="token operator">:</span> <span class="token string">"512x512"</span><span class="token punctuation">,</span>
     <span class="token string">"type"</span><span class="token operator">:</span> <span class="token string">"image/png"</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token punctuation">{</span>
     <span class="token string">"src"</span><span class="token operator">:</span> <span class="token string">"icon_384x384.&lt;fingerprint&gt;.png"</span><span class="token punctuation">,</span>
     <span class="token string">"sizes"</span><span class="token operator">:</span> <span class="token string">"384x384"</span><span class="token punctuation">,</span>
     <span class="token string">"type"</span><span class="token operator">:</span> <span class="token string">"image/png"</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token punctuation">{</span>
     <span class="token string">"src"</span><span class="token operator">:</span> <span class="token string">"icon_256x256.&lt;fingerprint&gt;.png"</span><span class="token punctuation">,</span>
     <span class="token string">"sizes"</span><span class="token operator">:</span> <span class="token string">"256x256"</span><span class="token punctuation">,</span>
     <span class="token string">"type"</span><span class="token operator">:</span> <span class="token string">"image/png"</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token punctuation">{</span>
     <span class="token string">"src"</span><span class="token operator">:</span> <span class="token string">"icon_192x192.&lt;fingerprint&gt;.png"</span><span class="token punctuation">,</span>
     <span class="token string">"sizes"</span><span class="token operator">:</span> <span class="token string">"192x192"</span><span class="token punctuation">,</span>
     <span class="token string">"type"</span><span class="token operator">:</span> <span class="token string">"image/png"</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token punctuation">{</span>
     <span class="token string">"src"</span><span class="token operator">:</span> <span class="token string">"icon_128x128.&lt;fingerprint&gt;.png"</span><span class="token punctuation">,</span>
     <span class="token string">"sizes"</span><span class="token operator">:</span> <span class="token string">"128x128"</span><span class="token punctuation">,</span>
     <span class="token string">"type"</span><span class="token operator">:</span> <span class="token string">"image/png"</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token punctuation">{</span>
     <span class="token string">"src"</span><span class="token operator">:</span> <span class="token string">"icon_96x96.&lt;fingerprint&gt;.png"</span><span class="token punctuation">,</span>
     <span class="token string">"sizes"</span><span class="token operator">:</span> <span class="token string">"96x96"</span><span class="token punctuation">,</span>
     <span class="token string">"type"</span><span class="token operator">:</span> <span class="token string">"image/png"</span>
   <span class="token punctuation">}</span>
 <span class="token punctuation">]</span><span class="token punctuation">,</span>
   <span class="token string">"theme_color"</span><span class="token operator">:</span> <span class="token string">"#3367D6"</span><span class="token punctuation">,</span>
 <span class="token string">"shortcuts"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
   <span class="token punctuation">{</span>
     <span class="token string">"name"</span><span class="token operator">:</span> shortcut"<span class="token punctuation">,</span>
     <span class="token string">"short_name"</span><span class="token operator">:</span> <span class="token string">"tên shortcut"</span><span class="token punctuation">,</span>
     <span class="token string">"description"</span><span class="token operator">:</span> <span class="token string">"mô tả"</span><span class="token punctuation">,</span>
     <span class="token string">"url"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
     <span class="token string">"icons"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token string">"src"</span><span class="token operator">:</span> <span class="token string">"/images/icon.png"</span><span class="token punctuation">,</span> <span class="token string">"sizes"</span><span class="token operator">:</span> <span class="token string">"192x192"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token operator">...</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token punctuation">}</span>

{

"name": "My Progressive Web App",

"orientation": "portrait",

"display": "standalone",

"start_url": ".",

"short_name": "MyPWA",

"description": "My awesome Progressive Web App!",

"background_color": "#ffffff",

"icons": [

{

"src": "icon_1024x1024.<fingerprint>.png",

"sizes": "1024x1024",

"type": "image/png",

"purpose": "maskable"

},

{

"src": "icon_1024x1024.<fingerprint>.png",

"sizes": "1024x1024",

"type": "image/png"

},

{

"src": "icon_512x512.<fingerprint>.png",

"sizes": "512x512",

"type": "image/png"

},

{

"src": "icon_384x384.<fingerprint>.png",

"sizes": "384x384",

"type": "image/png"

},

{

"src": "icon_256x256.<fingerprint>.png",

"sizes": "256x256",

"type": "image/png"

},

{

"src": "icon_192x192.<fingerprint>.png",

"sizes": "192x192",

"type": "image/png"

},

{

"src": "icon_128x128.<fingerprint>.png",

"sizes": "128x128",

"type": "image/png"

},

{

"src": "icon_96x96.<fingerprint>.png",

"sizes": "96x96",

"type": "image/png"

}

],

"theme_color": "#3367D6",

"shortcuts": [

{

"name": shortcut",

"short_name": "tên shortcut",

"description": "mô tả",

"url": "/",

},

.....

}

3> filemanager-webpack-plugin:

**Trang chủ **: https://github.com/gregnb/filemanager-webpack-plugin
Giới thiệu
Cái tên của nó nói lên tất cả, nó là 1 Plugin dạng quản lý file cho phép bạn copy, nén (zip, tar, tar.gz), di chuyển hay delete file và thư mục trước hoặc sau khi build
(Mình giới thiệu để các bạn dùng thử 1 plugin tổng hợp những gì bạn cần, nếu các bạn cần 1 chức năng tương tự bạn có thể dùng các plugin copy-webpack-plugin hoặc remove-files-webpack-plugin ,…)

Cài đặt:

npm install filemanager-webpack-plugin --save-dev

1 2	npm install filemanager-webpack-plugin --save-dev

Sử dụng:

<span class="token comment">// webpack.config.js:</span>

<span class="token keyword">const</span> FileManagerPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'filemanager-webpack-plugin'</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>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token keyword">new</span> <span class="token class-name">FileManagerPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token comment">// bạn khai báo event tương ứng: onEned hoặc onStart</span>
      events<span class="token operator">:</span> <span class="token punctuation">{</span>
        onEnd<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// các option có thể khai báo là copy, move, delete, Mkdir hoặc Archive</span>
          copy<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span> source<span class="token operator">:</span> <span class="token string">'/path/fromfile.txt'</span><span class="token punctuation">,</span> destination<span class="token operator">:</span> <span class="token string">'/path/tofile.txt'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> source<span class="token operator">:</span> <span class="token string">'/path/**/*.js'</span><span class="token punctuation">,</span> destination<span class="token operator">:</span> <span class="token string">'/path'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">]</span><span class="token punctuation">,</span>
          move<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span> source<span class="token operator">:</span> <span class="token string">'/path/from'</span><span class="token punctuation">,</span> destination<span class="token operator">:</span> <span class="token string">'/path/to'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> source<span class="token operator">:</span> <span class="token string">'/path/fromfile.txt'</span><span class="token punctuation">,</span> destination<span class="token operator">:</span> <span class="token string">'/path/tofile.txt'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token keyword">delete</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'/path/to/file.txt'</span><span class="token punctuation">,</span> <span class="token string">'/path/to/directory/'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          mkdir<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'/path/to/directory/'</span><span class="token punctuation">,</span> <span class="token string">'/another/directory/'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          archive<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span> source<span class="token operator">:</span> <span class="token string">'/path/from'</span><span class="token punctuation">,</span> destination<span class="token operator">:</span> <span class="token string">'/path/to.zip'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> source<span class="token operator">:</span> <span class="token string">'/path/**/*.js'</span><span class="token punctuation">,</span> destination<span class="token operator">:</span> <span class="token string">'/path/to.zip'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> source<span class="token operator">:</span> <span class="token string">'/path/fromfile.txt'</span><span class="token punctuation">,</span> destination<span class="token operator">:</span> <span class="token string">'/path/to.zip'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> source<span class="token operator">:</span> <span class="token string">'/path/fromfile.txt'</span><span class="token punctuation">,</span> destination<span class="token operator">:</span> <span class="token string">'/path/to.zip'</span><span class="token punctuation">,</span> format<span class="token operator">:</span> <span class="token string">'tar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              source<span class="token operator">:</span> <span class="token string">'/path/fromfile.txt'</span><span class="token punctuation">,</span>
              destination<span class="token operator">:</span> <span class="token string">'/path/to.tar.gz'</span><span class="token punctuation">,</span>
              format<span class="token operator">:</span> <span class="token string">'tar'</span><span class="token punctuation">,</span>
              options<span class="token operator">:</span> <span class="token punctuation">{</span>
                gzip<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                gzipOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
                  level<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                globOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
                  nomount<span class="token operator">:</span> <span class="token boolean">true</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>
            <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><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><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>

// webpack.config.js:

const FileManagerPlugin = require('filemanager-webpack-plugin');

module.exports = {

plugins: [

new FileManagerPlugin({

// bạn khai báo event tương ứng: onEned hoặc onStart

events: {

onEnd: {

// các option có thể khai báo là copy, move, delete, Mkdir hoặc Archive

copy: [

{ source: '/path/fromfile.txt', destination: '/path/tofile.txt' },

{ source: '/path/**/*.js', destination: '/path' },

],

move: [

{ source: '/path/from', destination: '/path/to' },

],

delete: ['/path/to/file.txt', '/path/to/directory/'],

mkdir: ['/path/to/directory/', '/another/directory/'],

archive: [

{ source: '/path/from', destination: '/path/to.zip' },

{ source: '/path/**/*.js', destination: '/path/to.zip' },

{ source: '/path/fromfile.txt', destination: '/path/to.zip' },

{ source: '/path/fromfile.txt', destination: '/path/to.zip', format: 'tar' },

{

source: '/path/fromfile.txt',

destination: '/path/to.tar.gz',

format: 'tar',

options: {

gzip: true,

gzipOptions: {

level: 1,

},

globOptions: {

nomount: true,

},

],

},

}),

],

};

4>webpack-build-notifier:

Trang chủ: https://github.com/roccoc/webpack-build-notifier

Giới thiệu:
Mỗi khi bạn build với webpack, bạn muốn khi thành công hoặc thất bại sẽ có 1 thông báo nhỏ nhỏ để bạn quan sát và kịp sửa sai nếu có lỗi thì đây quả là 1 plugin mà bạn cần

(hình ảnh khi chưa cấu hình plugin)

Cài đặt:

npm install webpack-build-notifier --save-dev

1 2	npm install webpack-build-notifier --save-dev

Sử dụng:

<span class="token comment">// webpack.config.js</span>
<span class="token keyword">const</span> WebpackBuildNotifierPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack-build-notifier'</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 comment">// ...</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token keyword">new</span> <span class="token class-name">WebpackBuildNotifierPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token comment">// tiêu đều mà bạn muốn hiển thị</span>
      title<span class="token operator">:</span> <span class="token string">"My Webpack Project"</span><span class="token punctuation">,</span>
    <span class="token comment">// logo, nếu ko có sẽ sử dụng hình ảnh mặc định của webpack</span>
      logo<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"./img/favicon.png"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token comment">// cách hiển thị thông báo, nhận giá trị:</span>
      <span class="token comment">// - false: show ra notification mỗi khi build/</span>
      <span class="token comment">// - true : bạn chỉ muốn show khi thất bại hoặc lần đầu thành công</span>
      <span class="token comment">// - always: đừng show ra build thành công, chỉ quan tâm build thất bại</span>
      <span class="token comment">// - initial: giống khi thành công, !! mình chưa hiểu khác gì so với nó</span>
      suppressSuccess<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// don't spam success notifications</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>

// webpack.config.js

const WebpackBuildNotifierPlugin = require('webpack-build-notifier');

module.exports = {

// ...

plugins: [

new WebpackBuildNotifierPlugin({

// tiêu đều mà bạn muốn hiển thị

title: "My Webpack Project",

// logo, nếu ko có sẽ sử dụng hình ảnh mặc định của webpack

logo: path.resolve("./img/favicon.png"),

// cách hiển thị thông báo, nhận giá trị:

// - false: show ra notification mỗi khi build/

// - true : bạn chỉ muốn show khi thất bại hoặc lần đầu thành công

// - always: đừng show ra build thành công, chỉ quan tâm build thất bại

// - initial: giống khi thành công, !! mình chưa hiểu khác gì so với nó

suppressSuccess: true, // don't spam success notifications

})

],

}

Ngoài ra bạn có thể cấu hình thêm thời gian hiển thị với showDuration, hay các icon successIcon warningIconfailureIcon compileIcon , âm thanh , hay các sự kiện khác.

kết quả:
Build thành công hay thất bại đều có thông báo và âm thanh nhẹ nhàng

Chống chỉ định dùng plugin cho bạn nào không thích đọc thông bá[email protected]@

5> Một số plugin khác bạn có thể thử tìm hiểu:

prerender-spa-plugin: https://github.com/chrisvfritz/prerender-spa-plugin
serverless-webpack: https://github.com/serverless-heaven/serverless-webpack
Friendly-errors-webpack-plugin: https://github.com/geowarin/friendly-errors-webpack-plugin
dynamic-cdn-webpack-plugin: https://github.com/mastilver/dynamic-cdn-webpack-plugin

Kết luận:

Qua phần giới thiệu của mình, hy vọng bạn có thể có hứng thú hơn với webpack và áp dụng được 1 nào đó mình đã giới thiệu.

Cảm ơn bạn đã đọc qua bài viết của mình.

Tham khảo: https://webpack.js.org/

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

1 số tool webpack hay ho bạn có thể sử dụng được trong dự án

Giới thiệu

Một số plugin:

1> moment-locales-webpack-plugin:

2> webpack-pwa-manifest:

3> filemanager-webpack-plugin:

4>webpack-build-notifier:

5> Một số plugin khác bạn có thể thử tìm hiểu:

Kết luận:

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript