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>

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

Webpack phân tách code (Code Splitting)

CleanWebpackPlugin - Dọn dẹp thư mục