[: currentTime | date:'mm:ss' :] [: timeLeft | date:'mm:ss' :]

文件结构

.
├── dist/
├── node_modules/
├── index.css
├── index.html
├── index.js
├── package-lock.json
├── package.json
└── webpack.config.js

webpack.config.js

const Html = require('html-webpack-plugin');

module.exports = {
  mode    : 'development',
  entry   : './index.js',
  output  : {
    filename : 'bundle.[hash].js',
    path     : __dirname + '/dist',
  },
  plugins : [
    new Html({
      template : './index.html',
    }),
  ],
};

package.json

{
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    ...
  }
  ...
}

其他骚操作

[: currentTime | date:'mm:ss' :] [: timeLeft | date:'mm:ss' :]

文件结构

.
├── index.html
├── index.js
├── package-lock.json
├── package.json
└── webpack.config.js

index.html

<!doctype html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Yo</title>
</head>
<body>
<h1>Yo</h1>
<input type="text" disabled="disabled">

</body>
</html>

webpack.config.js

const Clean = require('clean-webpack-plugin');
const Html  = require('html-webpack-plugin');

module.exports = {
  mode    : 'development',
  entry   : './index.js',
  output  : {
    filename : 'bundle.[hash].js',
    path     : __dirname + '/dist',
  },
  plugins : [
    new Clean([ './dist' ]),
    new Html({
      template : './index.html',
      filename : 'index.html',
      inject   : true,
      minify   : {
        collapseBooleanAttributes : true,
        collapseWhitespace        : true,
        removeComments            : true,
      },
    }),
  ],
};

package.json

{
  "devDependencies": {
    "clean-webpack-plugin": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    ...
  }
  ...
}
登录后评论