S
S
sinneren2018-03-26 11:47:17
HTML
sinneren, 2018-03-26 11:47:17

Why doesn't _.template load the neighboring file?

On my own, I decided to switch from gulp to webpack. I took as a basis someone's assembly from Habr.
It uses the main template files in view and modules in includes. The problem is that I need to load one file from includes into another in the same place. But an error comes up. Can you help solve the problem?
I connect as <%= _.template(require('user.html'))() %> file in the same folder.
Trace the error:

Html Webpack Plugin:
  Error: Cannot find module 'user.html'
  
  - module.js:20 require
    internal/module.js:20:19
  
  - lodash.templateSources[4]:9 eval
    lodash.templateSources[4]:9:22
  
  - article.html:98 
    C:/Project/layout/src/html/views/article.html:98:114
  
  - article.html:103 ./node_modules/html-webpack-plugin/lib/loader.js!./src/html/views/article.html.module.exports
    C:/Project/layout/src/html/views/article.html:103:3
  
  - index.js:277 Promise.resolve.then.e
    [layout]/[html-webpack-plugin]/index.js:277:18

Webpack 4 config code:
const path = require('path');
const fs = require('fs');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
const autoprefixer = require('autoprefixer');
const env = process.argv.slice(2);
const config = {
    mode: env[1] || 'development'
}
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/scss/scope.scss'
    ],
    output: {
        path: path.resolve(__dirname, config.mode)
    },
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.(sass|scss)$/,
                include: path.resolve(__dirname, 'src/scss'),
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                            minimize: true,
                            url: false
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            plugins: [
                                autoprefixer({
                                    browsers: ['ie >= 9', 'last 4 version']
                                })
                            ],
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true
                        }
                    }
                    ]
                })
            },
            {
                test: /\.html$/,
                include: path.resolve(__dirname, 'src/html/includes'),
                use: ['raw-loader']
            },
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: './css/style.bundle.css',
            allChunks: true,
        }),
        new CleanWebpackPlugin(['production', 'development']),
        new WriteFilePlugin(),
        new CopyWebpackPlugin([
            {
                from: './src/img',
                to: './img'
            },
            {
                from: './src/scss/font-awesome-4.5.0/fonts',
                to: './fonts'
            },
            {
                from: './src/js',
                to: './js'
            }
        ]),
    ].concat(htmlPlugins)
};

Answer the question

In order to leave comments, you need to log in

1 answer(s)
E
Egor Zhivagin, 2018-03-26
@Krasnodar_etc

<%= _.template(require('./user.html'))() %>
Webpack should use relative paths.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question