На свою голову решил перейти с gulp на webpack. Взял за основу чью-то сборку с хабра.
Там используются основные файлы шаблонов во view и модули в includes. Проблема в том, что мне нужно загрузить один файл из includes в другой там же. Но выходит ошибка. Не поможете решить проблему?
Подключаю как <%= _.template(require('user.html'))() %> файл в той же папке
Trace ошибки:
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
Код конфига вебпака 4:
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)
};