[WEBPACK] Plugin HtmlWebpackPlugin (ok)

https://hocwebchuan.com/tutorial/webpack/html_webpack_plugin.php

Cài đặt và setting HtmlWebpackPlugin

• Plugin HtmlWebpackPlugin được dùng để sắp xếp các file html theo một trật tự nhất định, giúp tối ưu nội dung file html hơn.

• Trước tiên, ta tiến hành cài đặt HtmlWebpackPlugin và cấu hình file webpack.config.js như bên dưới:

npm install --save-dev html-webpack-plugin

Kết quả

HTML webpack plugin

Chỉnh nội dung file webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
  /*[name]: [path]*/
    app: './src/index.js',
    print: './src/my-test.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

• Tiến hành chạy lệnh npm để thực thi nội dung trên:

npm run build

• Khi này mở file /dist/index.html, chúng ta sẽ thấy nội dung file đã được sắp xếp lại như sau:

Trước	Sau khi sắp xếp

• Ta thấy nội dung sau khi được sắp xếp đã được điều chỉnh lại đúng chuẩn HTML hơn, và các đoạn script đã được đưa xuống bên dưới, đảm bảo cho việc chạy scrip sau khi HTML đã được load hoàn toàn.

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
Webpack bundle
Cấu hình Webpack
Webpack quản lý output
Cài đặt và setting HtmlWebpackPlugin