Webpack minify Javascript - TerserJSPlugin

Webpack minify Javascript - TerserJSPlugin

  • Tương tự như với minify CSS, chúng ta hoàn toàn có thể làm tương tự với minify Javascript, mà không cần tới cách minify như trước.

Cài đặt và xử lý minify Javascript

Để tạo được file minify CSS tự động, ta cần thực hiện các bước sau:

  • Cài đặt plugin MiniCssExtractPlugin.
  • Cài đặt plugin TerserJSPlugin.
  • Chỉnh webpack.config.js.
  • Import các file Javascript vào bên trong index.js.
  • Chạy npm run build.

Cài đặt plugin MiniCssExtractPlugin

npm install --save-dev mini-css-extract-plugin
Kết quả

MiniCssExtractPlugin

Cài đặt plugin TerserJSPlugin

npm install --save-dev terser-webpack-plugin
Kết quả

TerserJSPlugin

Chỉnh file webpack.config.js

Tạm thời đóng lại những setting không cần:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },
  /*entry: {
    newfile: [
      './src/index.js',
      './src/my-test.js'
    ]
  },*/
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    new MiniCssExtractPlugin({
      filename: 'style.min.css'
    })
  ],
  output: {
    filename: 'main.min.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          /*'style-loader',*/
          'css-loader'
        ]
      }
    ]
  }
};

Chạy lệnh npm:

npm run build

Import file Javascript vào /src/index.js

import './style.css';
import './my-test.js';
function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello World!';
  return element;
}
document.body.appendChild(component());
  • Lúc này ta sẽ thấy bên trong thư mục dist sẽ xuất hiện 1 file main.min.js đã được minify từ file /src/index.js và /src/my-test.js.
  • Đồng thời khi này, nội dung file /dist/index.html đã được tự động liên kết với file /dist/main.min.js vừa tạo.

Nội dung file /dist/main.min.js

!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){"use strict";t.r(n);t(1),t(2);document.body.appendChild(function(){const e=document.createElement("div");return e.innerHTML="Hello World!",e}())},function(e,n,t){},function(e,n){document.body.appendChild(function(){const e=document.createElement("p");return e.innerHTML="This content called from my-test.js!",e}())}]);
  • Cấu trúc thư mục lúc này:

Webpack-project

  • node_modules

    • ...
  • package.json package.json
  • package.json webpack.config.js
  • package-lock.json package-lock.json

  • dist

    • package.json index.html
    • package.json main.min.js
    • package.json style.min.css

  • src

    • package.json index.js
    • package.json my-test.js
    • package.json style.css
  • Bài học tiếp theo sẽ giúp chúng ta dò tìm file Javascript nào bị lỗi, chứ không thể tìm lỗi trong một đống source code đã được minify ^^.

Các lệnh chính đã sử dụng trong toàn bộ bài học

Bài học Lệnh đã dùng
Cài đặt Webpack 
cd Webpack-project
npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli
Webpack bundle 
npx webpack
Cấu hình Webpack 
npx webpack --config webpack.config.js
npm run build
Webpack quản lý output 
npm run build
Webpack code splitting 
npm install --save lodash
npm run build
npm run build
Cài đặt và setting HtmlWebpackPlugin 
npm install --save-dev html-webpack-plugin
npm run build
Cài đặt và setting CleanWebpackPlugin 
npm install --save-dev clean-webpack-plugin
npm run build
Webpack Cache 
npm run build
npm run build
Webpack gom chung các file javascript 
npm run build
Webpack source map 
npm run build
npm run build
Webpack css loader 
npm install --save-dev style-loader css-loader
npm run build
Webpack minify CSS - OptimizeCSSAssetsPlugin 
npm install --save-dev mini-css-extract-plugin
npm install --save-dev optimize-css-assets-webpack-plugin
npm run build
npm run build
Webpack minify Javascript - TerserJSPlugin 
npm install --save-dev mini-css-extract-plugin
npm install --save-dev terser-webpack-plugin
npm run build

minify cho file CSS

Webpack Watch Mode