javascript - Using <%=[variable]=> syntax with htmlWebpackPlugin AND html-loader

Using Webpack 4 and it's HtmlWebpackPlugin and html-loader together, I'm trying to:

Load other html files into index.html from a directory
Load variables into index.html from htmlWebpackPlugin

However, this doesn't work when html-loader is present in webpack.config.js. If I could use the same syntax that would be preferred, but I already tried using ${ } for the title tag but i get an build error, htmlWebpackPlugin undefined.

index.html

<!doctype html>
<html>
    <head>
        <title><%= htmlWebpackPlugin.options.title %></title> <!-- this doesn't work -->
   <!-- <title>${htmlWebpackPlugin.options.title}</title>        //also doesn't work -->
    </head>
    <body>
        <section>${require("./path/to/other.html")}</section> <!-- this works fine -->
    </body>
</html>

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  devServer: {
    contentBase: './src',
    port: 4200,
    open: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      template: './src/index.html'},
      title: 'Index Page')
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: /src/,
        exclude: /node_modules/
      },
      {
        test: /\.(html)$/,
        exclude: /node_modules/,
        use: {
          loader: 'html-loader',
          options: {
            attrs:[':data-src'],
            minimize: false,
            conservativeCollapse: false,
            interpolate: true
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[path][name]__[local]--[hash:base64:5]'
            }
          }
        ]
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

Using Webpack 4 and it's HtmlWebpackPlugin and html-loader together, I'm trying to:

Load other html files into index.html from a directory
Load variables into index.html from htmlWebpackPlugin

index.html

<!doctype html>
<html>
    <head>
        <title><%= htmlWebpackPlugin.options.title %></title> <!-- this doesn't work -->
   <!-- <title>${htmlWebpackPlugin.options.title}</title>        //also doesn't work -->
    </head>
    <body>
        <section>${require("./path/to/other.html")}</section> <!-- this works fine -->
    </body>
</html>

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  devServer: {
    contentBase: './src',
    port: 4200,
    open: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      template: './src/index.html'},
      title: 'Index Page')
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: /src/,
        exclude: /node_modules/
      },
      {
        test: /\.(html)$/,
        exclude: /node_modules/,
        use: {
          loader: 'html-loader',
          options: {
            attrs:[':data-src'],
            minimize: false,
            conservativeCollapse: false,
            interpolate: true
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[path][name]__[local]--[hash:base64:5]'
            }
          }
        ]
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

Share Improve this question edited Apr 19, 2018 at 0:24 asked Apr 17, 2018 at 22:52 slanden 1,3772 gold badges17 silver badges36 bronze badges

(from this issue on github)[github./jantimon/html-webpack-plugin/issues/593], jantimon stated that the html-loader does not allow to use template variables. Which answers why it's not working. But, Is there another way to make this work? – slanden Commented Apr 19, 2018 at 1:21

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

It can be achieved by stacking up the following loaders in this sequence:

{
  test: /\.html$/,
  use: [{
    loader: 'ejs-loader'
  }, {
    loader: 'extract-loader'
  }, {
    loader: 'html-loader',
    options: {
      interpolate: true
  }
}

html-loader kicks in first replacing interpolated fragments, then we need to extract resulting HTML - that's why we use extract-loader and then ejs-loader can then replace ejs fragments and it does see htmlWebpackPlugin variables.

Just running into this issue today, found a solution and this page is still open in my browser.

Another method for solving this issue is by renaming the template file as .ejs, so rename index.html as index.html.ejs.

Then the config file should be:

   plugins: [
    new HtmlWebpackPlugin(
       {
         hash: true,
         template: './src/index.html.ejs' // rename the file accordingly
       },
       title: 'Index Page')
  ],

This way html-webpack-plugin will process the ejs first as it actually a fallback loader for ejs. and html-loader will run after html-webpack-plugin producing html.

Your code has a closing curly bracket in the wrong place.

plugins: [
  new HtmlWebpackPlugin({
    hash: true,
    template: './src/index.html'},
    title: 'Index Page')
],

Try to do it like this:

plugins: [
  new HtmlWebpackPlugin({
    hash: true,
    template: './src/index.html',
    title: 'Index Page'
  })
],

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Using <%=[variable]=> syntax with htmlWebpackPlugin AND html-loader - Stack Overflow

index.html

webpack.config.js

index.html

webpack.config.js

3 Answers 3

与本文相关的文章

评论列表(0)