代码之家 › 专栏 › 技术社区 › Matt Kuhns

只将变量注入HTML的Webpack

webpack javascript

Matt Kuhns · 技术社区 · 7 年前

我正在使用HtmlWebpackPlugin的一个基本示例将变量注入到我的HTML页面中。我没有index.js,也不想要bundle.js。如何排除dist bundle.js并只输出更新的HTML?

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>

0 回复 | 直到 7 年前

Qiniso 5 年前

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

推荐文章

Brandon Mulas · 如何在electronic+webpack中从Main进程获取javascript对象到Renderer进程

1 年前