<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Главная</title>
<link rel="stylesheet" href="css/style.bundle.css">
<link rel="shortcut icon" href="img/ico/favicon.ico">
</head>
<body>
<%= require('./../components/header.html') %>
<!-- Основа -->
<main class="main">
<a href="./index2.html">index2</a>
</main>
<%= require('./../components/footer.html') %>
<script src="js/bundle.js"></script>
</body>
</html><header class="header">
<div class="container">
<%= require('./topMenu.html') %>
</div>
</header>
const path = require('path');
const fs = require('fs');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const 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('./app/html/pages');
module.exports = {
entry: [
'./app/js/app.js',
'./app/css/index.scss'
],
output: {
filename: './js/bundle.js'
},
devtool: "source-map",
devServer: {
port: 3000
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'app/js'),
use: {
loader: 'babel-loader',
options: {
presets: 'env'
}
}
},
{
test: /\.(sass|scss)$/,
include: path.resolve(__dirname, 'app/css'),
use: ExtractTextPlugin.extract({
use: [
{
loader: "css-loader",
options: {
sourceMap: true,
minimize: true
}
},
{
loader: "resolve-url-loader"
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
})
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'url-loader?limit=10000&name=images/[name].[hash].[ext]',
],
},
{
test: /\.html$/,
include: path.resolve(__dirname, 'app/html/components'),
use: ['raw-loader']
},
{
test: /\.(eot|ttf|woff|woff2)$/,
loader: 'file-loader?name=fonts/[name].[ext]',
},
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new ExtractTextPlugin({
filename: './css/style.bundle.css',
allChunks: true
}),
new CopyWebpackPlugin([
{
from: './app/fonts',
to: './fonts'
},
{
from: './app/img',
to: './img'
}
])
].concat(htmlPlugins)
};<%= require('./../components/header.html').default %>
Сложный
Простой
