代码之家 › 专栏 › 技术社区 › Ramazan Chasygov

HTML中的模板,带有Webpack,未定义get error“variable”

lodash webpack html javascript

Ramazan Chasygov · 技术社区 · 7 年前

我在索引中创建了模板。html使用js生成html代码,代码如下。我的网页包配置也在下面。当我使用webpack dev服务器运行它时,我得到一个错误:标题未定义。不知何故,webpack尝试自行解析“标题”,而不是将其委托给“lodash/template”。请帮我修复代码,我绝望了(。

import path from 'path';
import glob from 'glob';
import webpack from 'webpack';

import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const inProduction = process.env.mode === 'production';

export default {
  entry: {
    app: [
      './src/scripts/main.js',
    ],
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].[chunkhash].js',
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader', 'sass-loader'],
          fallback: 'style-loader',
        }),
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: '/node_modules',
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('[name].[chunkhash].css'),
    new webpack.LoaderOptionsPlugin({
      minimize: inProduction,
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),
    }),
  ],
};

import temp from 'lodash/template'
import data from './data';

const titlePicDiscHalf = temp(document.getElementById('titlePicDiscHalf').innerHTML);
document.write(titlePicDiscHalf({ title: 'Hello World!' }));

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
    <script type="text/template" id="titlePicDiscHalf">
      <div class="titlePicDiscHalf">
        <div class="picture"></div>
        <div class="title"><%=title%></div>
        <div class="discription"></div>
        <div class="buttons"></div>
      </div>
    </script>
  </body>
</html>

2 回复 | 直到 7 年前

Community CDub 4 年前

问题是html网页包插件使用相同的模板标记 <%= %> 将捆绑包信息插入模板。

你有两个选择。

1、更换lodash。模板分隔符

您可以将客户端lodash/模板使用的分隔符更改为其他分隔符,这样Webpack就会忽略它。例如:

_.templateSettings.interpolate = /<\$=([\s\S]+?)\$>/g;

查看此演示。

_.templateSettings.interpolate = /<\$=([\s\S]+?)\$>/g;

const temp = _.template
const titlePicDiscHalf = temp(document.getElementById('titlePicDiscHalf').innerHTML);

document.write(titlePicDiscHalf({ title: 'Hello World!' }));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

<script type="text/template" id="titlePicDiscHalf">
  <div class="titlePicDiscHalf">
    <div class="picture"></div>
    <div class="title">
      <$=title$>
    </div>
    <div class="discription"></div>
    <div class="buttons"></div>
  </div>
</script>

2、更改html网页包插件分隔符

安装 ejs-loader 单独和配置 html-webpack-plugin 使用它加载模板。在那里,您可以将分隔符更改为您的分隔符。它可能看起来像这样:

plugins: [
  new HtmlWebpackPlugin({
    template: './index.html.ejs',
  })
],
module: {
  rules: [
    { test: /\.ejs$/, loader: 'ejs-loader', query: {
      interpolate: /<\$=([\s\S]+?)\$>/g,
      evaluate: /<\$([\s\S]+?)\$>/g,
    }},
  ]
},

现在,您可以使用两组不同的分隔符来配置模板,一个用于客户端包lodash模板,另一个用于 html网页包插件 :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><$= htmlWebpackPlugin.options.title $></title>
  </head>
  <body>
    <script type="text/template" id="titlePicDiscHalf">
      <div class="titlePicDiscHalf">
        <div class="picture"></div>
        <div class="title"><%= title %></div>
        <div class="discription"></div>
        <div class="buttons"></div>
      </div>
    </script>
  </body>
</html>

笔记 <title><$= htmlWebpackPlugin.options.title $></title> 由webpack使用,并且 <div class="title"><%= title %></div> 由客户端lodash提供。

Patrick 3 年前

以防其他人陷入同样的陷阱,只想使用静态html文件 <script> 然后遇到如下错误 Referenceerror: variable is not defined .

确保您没有使用JS模板字符串!

E、 g.而不是像

function addLoginStatus(user) {
    document.querySelector('.login-status').textContent = `You logged in as user.firstName`;
}

使用类似以下内容:

function addLoginStatus(user) {
    document.querySelector('.login-status').textContent = 'You logged in as ' + user.firstName;
}

我发现,对于模板字符串 webpack-html-plugin 模板自然会尝试解释它们,这在我的案例中并不是故意的。