Sắp xếp nội dung HTML - HTMLWebpackPlugin

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
<!doctype html>
<html>
  <head>
    <title>Webpack - hocwebchuan</title>
  </head>
  <body>
    <script src="vendors~app~print.bundle.js"></script>
    <script src="app.bundle.js"></script>
    <script src="print.bundle.js"></script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Output Management</title>
  </head>
  <body>
  <script type="text/javascript" src="vendors~app~print.bundle.js"></script><script type="text/javascript" src="app.bundle.js"></script><script type="text/javascript" src="print.bundle.js"></script></body>
</html>
  • 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
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
Cài đặt và setting HtmlWebpackPlugin
npm install --save-dev html-webpack-plugin
npm run build