Hi I have a MVC 5 project with lots of frontend code in javascript. So I decided to modularize those javascript ==> inject them to cshtml templates ==> render partial them in my View My config:
webpack.config.js
module.exports = {
entry: {
layout: './Public/js/Layout.js',
index: './ViewModules/Home/Index.js',
noisoisieuam: './ViewModules/KetQua/NoiSoiSieuAm.js'
},
output: {
path: path.resolve(__dirname, './Public/Output'),
filename: '[name].bundle.[contenthash].js',
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
templateContent: '',
filename: '../../../ViewModules/Shared/_Layout.temp.cshtml',
chunks: [ 'layout']
}),
new HtmlWebpackPlugin({
inject: true,
templateContent: '',
filename: '../../../ViewModules/Home/Index.temp.cshtml',
chunks: ['index']
}),
new HtmlWebpackPlugin({
inject: true,
templateContent: '',
filename: '../../../ViewModules/KetQua/NoiSoiSieuAm.temp.cshtml',
chunks: ['noisoisieuam']
})
],
// IMPORTANT NOTE: If you are using Webpack 2 or above, replace "loaders" with "rules"
module: {
rules: [
{
use: [
{
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"]
}
}
],
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.json$/,
type: 'javascript/auto',
use: [
{
loader: 'file-loader',
options: {
name: "[path][name].[ext]"
}
}
],
}
]
}
}
The *.temp.cshtml files are empty cshtml files only for javascript injection.
Code in my respective *.cshtml (my View):
...
@Html.Partial("~/ViewModules/<path-to-template>/*.temp.cshtml")
...
The problem is only the first 2 temp.cshtml are injected by webpack (the _Layout and my home page).
npm run build or build in Visual Studio dont give any error. Those javascript bundles all created. The 'noisoisieuam' chunk is not injected to my temp.cshtml
How can I fix this? Thank you very much