Question

我正在使用HtmlWebpackPlugin的基本示例将变量注入到我的HTML页面中。我没有index.js，也不需要bundle.js。如何排除dist bundle.js，仅输出更新的HTML？

webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
      title: 'HTML Webpack Plugin',
      bar: 'bar'
    })
  ]
};

index.html（模板）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= JSON.stringify(htmlWebpackPlugin.options.title) %></title>
    <script><script src="<%=htmlWebpackPlugin.options.favWord%>/socket.io.js"></script></script> 
  </head>
  <body>
    <h1>Hello, Webpack!</h1>
    <p> My favorite word is <%= JSON.stringify(htmlWebpackPlugin.options.bar) %> </p>
  </body>
</html>

HTML页面生成完美，只是我不想生成bundle.js。

Answer 1

旧问题，但是对于其他有相同问题的人，可以将inject选项设置为false。

plugins: [
new HtmlWebpackPlugin({
  template: 'index.html',
  title: 'HTML Webpack Plugin',
  bar: 'bar',
  inject: false
})

]

Webpack仅将变量注入HTML

1 个答案: