HTML中的模板，使用Webpack，会得到错误“变量”没有定义 [英] Template in HTML, with Webpack, get error "variable" is not defined

问题描述

我在index.html中创建模板以生成带有js的html代码，代码如下。下面我的Webpack配置。当我使用webpack-dev-server运行它时，出现错误：标题未定义。不知何故，webpack试图通过自己来解析'标题'，而不是委托给'lodash / template'。请帮助我修复代码，我处于绝望状态（

）。
$ b

import path from'path';从glob导入glob;从'webpack'导入webpack;从'extract-text-webpack-plugin'中导入ExtractTextPlugin;从'html-webpack-plugin'导入HtmlWebpackPlugin; 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_新的Webpack.LoaderOptionsPlugin（{minimize：inProduction，}），新的HtmlWebpackPlugin（{template：path.join，}}，}，插件：[new ExtractTextPlugin（'[name]。[chunkhash] .css' （__dirname，'./src/index.html'），}），]，};

从'lodash / template'导入临时数据'./data';const titlePicDiscHalf = temp document.write（titlePicDiscHalf（{title：'Hello World！'）））;

 <！doctype html>< html lang =en> < HEAD> <！ - 必需的元标记 - > < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1，shrink-to-fit = no> < /头> <身体GT; < script type =text / templateid =titlePicDiscHalf> < div class =titlePicDiscHalf> < div class =picture>< / div> < div class =title><％= title％>< / div> < div class =discription>< / div> < div class =buttons>< / div> < / DIV> < /脚本> < / body>< / html>  

解决方案

问题是，html-webpack-plugin使用相同的模板标签<％=％> 来将包信息插入到模板中。 p>

您有两种选择。

1。更改lodash.template分隔符

您可以将客户端lodash /模板使用的分隔符更改为其他内容，因此Webpack会忽略它。例如：

  _。templateSettings.interpolate = /< \ $ =（[\ s\S] + ？）\ $&/克; 
  

查看此演示。

  _。templateSettings.interpolate = /< \ $ =（[\ s\S] +？）\ $> / g; const temp = _.templateconst 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 / templateid =titlePicDiscHalf> < div class =titlePicDiscHalf> < div class =picture>< / div> < div class =title> < $ =标题$> < / DIV> < div class =discription>< / div> < div class =buttons>< / div> < / div>< / script>

更改html-webpack-plugin分隔符

分别安装 ejs-loader 并配置 html- webpack-plugin 来使用它来加载你的模板。在那里你可以改变你的分隔符。它可能看起来像这样：

 插件：[
新的HtmlWebpackPlugin（{
 template：'。 /index.html.ejs'，
}）
]，
模块：{
 rules：[
 {test：/\.ejs$/，loader ：'ejs-loader'，查询：{
 interpolate：/< \ $ =（[\\\ s] +？）\ $> / g，
 evaluate：/ < \ $（[\\\ s] +？）\ $> / g，
}}，
] 
}，
  

现在，您可以使用两套不同的分隔符来配置您的模板，一套用于客户端套装lodash模板，另一套用于 html-webpack-plugin ：

 <！doctype html> 
< html lang =en> 
< head> 
<！ - 必需的元标记 - > 
< meta charset =utf-8> 
< meta name =viewportcontent =width = device-width，initial-scale = 1，shrink-to-fit = no> 
< title>< $ = htmlWebpackPlugin.options.title $>< / title> 
< / head> 
< body> 
< script type =text / templateid =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。

I created template in index.html to generate html-code with js, code below. My Webpack configuration also below. When I run it with webpack-dev-server, I get error: title is not defined. Somehow webpack tries to resolve 'title' by self, instead of delegate it to 'lodash/template'. Please help me fix code, I'm in despair(.

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>

解决方案

The problem is that html-webpack-plugin uses the same template tags <%= %> to insert bundle information into template.

You have two options.

1. Change lodash.template delimiters

You could change delimiters used by client-side lodash/template to something else, so Webpack would ignore it. For example:

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

Check out this demo.

_.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. Change html-webpack-plugin delimiters

Install ejs-loader separately and configure html-webpack-plugin to use it to load your template. There you can change delimiters to yours. It could look something like this:

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

Now, you can configure your template with two different set of delimiters, one for client bundle lodash template and another for html-webpack-plugin:

<!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>

Note, <title><$= htmlWebpackPlugin.options.title $></title> is used by webpack, and <div class="title"><%= title %></div> is by client-side lodash.

这篇关于HTML中的模板，使用Webpack，会得到错误“变量”没有定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！