webpack build 添加BuildInfo

珍宝商店

已于 2023-12-26 18:08:15 修改

阅读量320

点赞数 10

文章标签： webpack 前端 node.js

于 2023-12-26 16:16:34 首次发布

本文链接：https://blog.csdn.net/m0_64344997/article/details/135224645

版权

创建文件
引入文件
添加html

创建文件

在webpack文件夹添加version.js

// 打包时间
const currentDateObj = new Date();
const currentDate = currentDateObj.getFullYear() + "-" + (currentDateObj.getMonth() + 1) + "-" + currentDateObj.getDate() + " " + currentDateObj.getHours() + ":" + currentDateObj.getMinutes();
module.exports = {
  currentDate
}

引入文件

在webpack.config.js引入文件并在plugins添加 BuildInfo

const BuildInfo = require('./version.js');

// appIndexJs  src/index
// paths.appBuild   build

return {
    entry: paths.appIndexJs,
    output: {
      // The build folder.
      path: paths.appBuild,
      // Add /* filename */ comments to generated require()s in the output.
      pathinfo: isEnvDevelopment,
      // There will be one main bundle, and one file per asynchronous chunk.
      // In development, it does not produce real files.
      filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/bundle.js',
      // There are also additional JS chunk files if you use code splitting.
      chunkFilename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].chunk.js'
        : isEnvDevelopment && 'static/js/[name].chunk.js',
      assetModuleFilename: 'static/media/[name].[hash][ext]',
      // webpack uses `publicPath` to determine where the app is being served from.
      // It requires a trailing slash, or the file assets will get an incorrect path.
      // We inferred the "public path" (such as / or /my-project) from homepage.
      publicPath: paths.publicUrlOrPath,
      // Point sourcemap entries to original disk location (format as URL on Windows)
      devtoolModuleFilenameTemplate: isEnvProduction
        ? info =>
            path
              .relative(paths.appSrc, info.absoluteResourcePath)
              .replace(/\\/g, '/')
        : isEnvDevelopment &&
          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
    },
    module: {
       rules: []
    },
    plugins: [
        new HtmlWebpackPlugin(
        {
          title: "版本信息",
          template: "src/version.html",
          filename: "version.html",
          inject: false,
          chunksSortMode: "none",
          buildInfo: BuildInfo
        }),
    ]
}

添加html

src下添加version.html

<!doctype html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8">
  <title>版本声明</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
</head>

<body>
  <div id="root">
    <div>打包时间：<%= htmlWebpackPlugin.options.buildInfo.currentDate %></div>
  </div>
</body>

</html>