Question

我的webpack.production.js如下......

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = () => ({
  output: {
    filename: 'bundle.[chunkhash:8].js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
});

我正在使用服务器端渲染，而在server.js我有...

const app = express();

// serve built files with static files middleware
app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req, res) => {
  const body = renderToString(<App />)

  res.writeHead(200, { "Content-Type": "text/html "} );
  res.send( htmlTemplate(body))
});

app.listen(3000);

function htmlTemplate(body) {
  return `
    <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">${body}</div>
        <script src="./bundle.[chunkhash:8].js"></script>
      </body>
    </html>
    `
}

如何将散列文件名传递给此模板以初始渲染到脚本标记？

如果我在webpack输出文件中使用bundle。[chunkhash：8] .js，如何在服务器的html模板中指定文件名？

0 个答案: