webpack：在pug模板中注入javascript散列文件名

mzsu5hc0 于 2022-12-25 发布在 Java

关注(0)|答案(2)|浏览(203)

我使用pug作为我的Node.JS视图引擎。
而且我正在使用webpack捆绑我的javascript文件和hashname，以便缓存破坏。
这里的问题是我不知道如何在pug模板中包含捆绑的javascript文件名，因为每次它都会生成一个新的哈希名称。
我怎样才能得到从webpack生成的散列名称，并将其包含在我的pug文件中？
它应该以如下方式包含脚本文件：

doctype html
html
  include _head

  body

    script(src='/_bundle/main.649c4c4e6c8076189257.js')

我的webpack.config文件

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  mode: "production",
  entry: "./src/_public/js/index.js",
  output: {
    filename: "main.[contenthash].js",
    path: path.resolve(__dirname, "src/_public/_bundle"),
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader", "css-loader", "sass-loader",
        ],
      },
    ],
  },
  plugins: [
     new HtmlWebpackPlugin({
       filetype: "pug",
     }),
     new HtmlWebpackPlugin({
       filename: "./src/views/base.pug",
     }),
  ],
}

JavaScript

来源：https://stackoverflow.com/questions/65512709/webpack-inject-javascript-hashed-file-name-in-pug-template

2条答案

按热度按时间

aemubtdh1#

正确配置HtmlWebpackPlugin和HtmlWebpackPugPlugin：

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

module.exports = {
    mode: "production",
    entry: "./src/_public/js/index.js",
    output: {
        filename: "main.[contenthash].js",
        path: path.resolve(__dirname, "src/_public/_bundle"),
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    "style-loader", "css-loader", "sass-loader",
                ],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPugPlugin(),
        new HtmlWebpackPlugin({
            template: './src/views/base.pug',
            filename: 'layout.pug',
        }),
    ],
}

安装npm i HtmlWebpackPugPlugin，您将在layout.pug文件中找到js和css引用。

赞(0）回复(0）举报 2022-12-25

iqih9akk2#

2022年的实际解决方案。
安装pug-plugin：

npm i -D pug-plugin

使用pug-plugin：

Webpack的入口点是Pug文件
所有源脚本（JS/TS）都可以通过Pug中的require（）加载
所有源样式（CSS/SCSS）都可以通过Pug中的require（）加载

Pug + JS + SCSS的网络包配置：

const path = require('path');
const PugPlugin = require('pug-plugin');

module.exports = {
  output: {
    path: path.join(__dirname, 'dist/'),
    filename: 'js/[name].[contenthash:8].js' // output hashed filename of JS
  },

  entry: {
    // define Pug files in entry:
    index: './src/views/index.pug',      // => index.html
    about: './src/views/about/index.pug' // => about.html
    // ...
  },

  plugins: [
    // enable using Pug files as entry point
    new PugPlugin({
      extractCss: {
        filename: 'css/[name].[contenthash:8].css' // output hashed filename of CSS
      },
    })
  ],

  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: PugPlugin.loader, // the Pug loader
      },
      {
        test: /\.(css|sass|scss)$/,
        use: ['css-loader', 'sass-loader']
      },
    ],
  },
};

Pug文件 ./src/视图/索引.pug：

doctype html
html
  head
    //- load source styles via require()
    link(href=require('./path/to/scss/styles.scss') rel='stylesheet')
  body
    h1 Hello Pug!

    //- load source scripts via require()
    script(src=require('./path/to/js/index.js'))

生成的HTML：

<html>
  <head>
    <link href="/css/styles.f57966f4.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello Pug!</h1>
    <script src="/js/index.b855d8f4.js"></script>
  </body>
</html>

赞(0）回复(0）举报 2022-12-25

我来回答

webpack：在pug模板中注入javascript散列文件名

2条答案

相关问题

热门标签

最新问答