Добрый день! При использовании данной строчки: $('ul').json2html(result ,{'<>':'li','html':'${lastTo} ${last}'});
У меня возникает ошибка:
ERROR in Template execution failed: ReferenceError: lastTo is not defined
ERROR in ReferenceError: lastTo is not defined
- lodash.templateSources[2]:9 eval
lodash.templateSources[2]:9:10
- index.html:105
C:/Users/Admin/Desktop/Webpack-Bootstrap22222/src/html/views/index.html:105:53
- index.html:108 module.exports
C:/Users/Admin/Desktop/Webpack-Bootstrap22222/src/html/views/index.html:108:3
- index.js:284 Promise.resolve.then
[Webpack-Bootstrap22222]/[html-webpack-plugin]/index.js:284:18
Проблема с конфигурационным файлом webpack, поскольку без cсборщика webpack, никакой ошибки в коде нет.
Мой webpack.congig выглядит следующем образом:
// const { createCanvas, loadImage } = require('canvas')
// const canvas = createCanvas(200, 200)
// const ctx = canvas.getContext('2d')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const fs = require('fs')
function generateHtmlPlugins(templateDir) {
const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir));
return templateFiles.map(item => {
const parts = item.split('.');
const name = parts[0];
const extension = parts[1];
return new HtmlWebpackPlugin({
filename: `${name}.html`,
template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`),
inject: false,
})
})
}
const htmlPlugins = generateHtmlPlugins('./src/html/views')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
minimizer: [
new OptimizeCssAssetsPlugin({}),
new UglifyJsPlugin({})
]
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
port: 4200
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/html/views/index.html',
}),
new HtmlWebpackPlugin({
filename: 'header.html',
template: './src/html/includes/header.html',
}),
new HtmlWebpackPlugin({
filename: 'aside.html',
template: './src/html/includes/aside.html',
}),
// new HtmlWebpackPlugin({
// template: '!!html-loader!./src/html/views/index.html'
// }),
new MiniCssExtractPlugin({
filename: 'css/style.css'
})
].concat(htmlPlugins),
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
// {
// test: /\.scss$/,
// use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
// },
{
test: /\.html$/,
include: path.resolve(__dirname, 'src/html/includes'),
use: ['raw-loader']
},
// {
// test: /\.html$/, // tells webpack to use this loader for all ".html" files
// loader: 'html-loader'
// },
// {
//test: /\.(png|jpe?g|gif)$/i,
// use: [
// {
// loader:'file-loader',
// options:{
// name:'[name].[ext]',
// outputPath:'./',
// useRelativePath:true
// }
// }
// ]
// },
{
test: /\.(js|ts)$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
}
Прошу помочь!!! Где-то увидел решение:
new HtmlWebpackPlugin({
template: '!!html-loader!index.html'
})
Мой путь до файла, в котором находится ${lastTo} следующий: './src/html/includes/reports.html'