Luis-Palacios/_LayoutTemplate.cshtml

## _LayoutTemplate.cshtml
@{
    /* Modify the _LayoutTemplate.cshtml, the _Layout.cshtml will be generated by webpack */
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>TechNews</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
        <a class="navbar-brand" href="/">Tech News</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0" method="get"
                asp-controller="Home" asp-action="Search">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" name="searchTerm">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2018 - TechNews</p>
        </footer>
    </div>
    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
    <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry.replace('../../wwwroot', '') %>"></script>
    <% } %>
    @RenderSection("Scripts", required: false)
</body>
</html>

## webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        'common': path.resolve(__dirname, 'wwwroot', 'app', 'common.js'),
        'home': path.resolve(__dirname, 'wwwroot', 'app', 'home.js'),
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'wwwroot', '.temp'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: '../../Views/Shared/_Layout.cshtml',
            template : './Views/Shared/_LayoutTemplate.cshtml',
            chunks: ['common']
        })
    ],
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    }
}
	@{
	/* Modify the _LayoutTemplate.cshtml, the _Layout.cshtml will be generated by webpack */
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>TechNews</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	</head>
	<body>
	<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
	<a class="navbar-brand" href="/">Tech News</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
	<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
	<li class="nav-item">
	<a class="nav-link" href="#">About</a>
	</li>
	</ul>
	<form class="form-inline my-2 my-lg-0" method="get"
	asp-controller="Home" asp-action="Search">
	<input class="form-control mr-sm-2" type="search" placeholder="Search" name="searchTerm">
	<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
	</form>
	</div>
	</nav>

	<div class="container body-content">
	@RenderBody()
	<hr />
	<footer>
	<p>© 2018 - TechNews</p>
	</footer>
	</div>
	<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
	<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry.replace('../../wwwroot', '') %>"></script>
	<% } %>
	@RenderSection("Scripts", required: false)
	</body>
	</html>
	const path = require('path');
	const HtmlWebpackPlugin = require('html-webpack-plugin');

	module.exports = {
	entry: {
	'common': path.resolve(__dirname, 'wwwroot', 'app', 'common.js'),
	'home': path.resolve(__dirname, 'wwwroot', 'app', 'home.js'),
	},
	output: {
	filename: '[name].bundle.js',
	path: path.resolve(__dirname, 'wwwroot', '.temp'),
	},
	plugins: [
	new HtmlWebpackPlugin({
	filename: '../../Views/Shared/_Layout.cshtml',
	template : './Views/Shared/_LayoutTemplate.cshtml',
	chunks: ['common']
	})
	],
	module: {
	rules: [
	{
	test: /\.scss$/,
	use: [
	'style-loader',
	'css-loader',
	'sass-loader'
	]
	}
	]
	}
	}