Develop Reference

How to use webpack-dev-server for cshtml files in ASP.NET core 6 MVC

i use webpack in my asp.net core 6 mvc project.
I use webpack-dev-server to run the browser automatically. My question is, how can I see the changes on index.cshtml instead of index.html. (When I change the extension of the html file from html to cshtml, the browser cannot load the cshtml file)
in webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
entry: {
opencv: './wwwroot/Source/example1.js',
},
mode: 'development',
devtool: 'inline-source-map',//baraye modiriate khataha
devServer: {//jahate webpack-dev-server(hmr bedoobe webpack-hot-middleware )
static: {
directory: path.join(__dirname,'/wwwroot/distt/' ),
publicPath: '/devserverdist4/',
},
compress: true,
port: 9003,
open: true,
},
plugins: [
new HtmlWebpackPlugin({
title: 'index1',
}),
new HtmlWebpackPlugin({
title: 'index2',
filename: 'index2.html',
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}),
new MiniCssExtractPlugin({
//filename: "allstyles_for_bonLarma.css",
filename: '[name].styles.css',
}),
new NodePolyfillPlugin(),//taze ezafe baraye erore fs
new webpack.DefinePlugin({
'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
}),
],
output: {
filename: '[name].bundle.js',
path: path.join/*resolve*/(__dirname, '/wwwroot/dist/'),
publicPath: '/outputdist1/',
clean: true,
},
optimization: {
minimize: true,
minimizer: [new TerserPlugin(), new CssMinimizerPlugin(),],
},
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.js?$/,
use: {
loader: 'babel-loader', options: {
presets:
['#babel/preset-react', '#babel/preset-env']
}
}
},
]
},
resolve: { //taze ezafe baraye erore fs
fallback: {
fs: false,
},
}
};
I want to use the webpack-dev-server feature in my mvc project views that have cshtml extension

I dont think you can do that. Razor cshtml file need to have everything include in the view before you build and run your project so that it can build and transform cshtml to html.
HtmlWebpackPlugin only work with html so the only option you can choose is serve the html file in your .net core project.
Update
You don't need to use webpack-dev-server, it's more convenient to use nuget package:
Add Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation NuGet package to the project.
Add the following in Program.cs:
builder.Services.AddControllersWithViews().AddRazorRuntimeCompilation();

Webpack dependent plugin

i am trying to add sammyjs on webpack as a plugin. But sammyjs is dependent on jquery and jquery is also present on plugin.
Here is the code
const webpack = require('webpack')
const jquery = require('jquery')
const Sammy = require('sammy')
const {resolve} = require('path')
const webpackConfig = {
entry: "./src/js/bootstrap.js",
output: {
path: resolve("dist"),
filename: "bundle.js",
publicPath: '/dist/'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Sammy: 'Sammy'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
resolve: {
alias: {
graph: resolve(__dirname, 'src/modules/graph'),
}
},
};
module.exports = webpackConfig;
but building it. Sammyjs keeps asking for jQuery variable:
I dont just want to import it in pages because it feels like the bundle is getting bigger.
Please tell me if i am doing right. Or there is other way to attain clean and smaller bundle.

How to import jquery in webpack

I have a problem with jquery when i using it on webpack.
My code:
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
entry: {
vendor: [
'./src/main/webapp/js/vendor/jquery-3.3.1.min.js',
// './src/main/webapp/js/vendor/fs.js',
'./src/main/webapp/js/vendor/google-adsense.js',
'./src/main/webapp/js/vendor/jquery.menu-aim.min.js',
'./src/main/webapp/js/vendor/jquery.touchSwipe.min.js',
],
app: './src/main/assets/js/desktop/app.js',
mobile: './src/main/assets/js/mobile/app.js',
touch: './src/main/assets/js/touch/app.js',
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: require.resolve('jquery'),
loader: 'expose-loader?jQuery!expose-loader?$'
}
],
},
plugins: [
// new CleanWebpackPlugin(['src/main/webapp/assets']),
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // Specify the common bundle's name.
}),
new UglifyJsPlugin({
test: /\.js$/,
sourceMap: process.env.NODE_ENV === "development"
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
output: {
filename: '[name].js',
path: path.resolve(__dirname, './src/main/webapp/js')
}
};
When above code compiles , console throws this error
vendor.js:1 Uncaught ReferenceError: webpackJsonp is not defined
at vendor.js:1
And when i try to use this
externals: {
jquery: 'jQuery'
}
It throws
vendor.js:1 Uncaught ReferenceError: jQuery is not defined
at Object.231 (vendor.js:1)
at o (common.js:1)
at Object.228 (vendor.js:1)
at o (common.js:1)
at window.webpackJsonp (common.js:1)
at vendor.js:1
And i using jquery in my core js file import $ from 'jquery'.
What did i do wrong ? any help ? Thank you.

So there are few themes in your webpack.config.js, some of which conflict. Just going to list them so I can better understand what I think you are trying to achieve.
Theme 1
You have an entry called vendor that is clearly referencing a minified jQuery library you have presumably downloaded and placed in the directory specified.
Theme 2
You also have an expose-loader that is essential exposing the jquery library from its node_modules probably listed in the dependencies of your package.json.
This makes the jquery in the node_modules available as $ and jQuery in the global scope of the page where your bundle is included.
Theme 3
You also have included the ProvidePlugin with configuration for jQuery.
The ProvidePlugin is supposed to inject dependencies into the scope of your module code, meaning you do not need to have import $ from 'jquery' instead $ and jQuery will already be available in all of your modules.
Conclusion
From what I have gathered I think you're trying to bundle jQuery from the static file at ./src/main/webapp/js/vendor/jquery-3.3.1.min.js in a vendor bundle.
You are then trying to expose the libraries in the vendor bundle to the global scope (jQuery).
Then also have your application code able to import jQuery from what is made available by the vendor bundle in the global scope.
Answer
So if that is what you are doing you need to do the following things.
Firstly, check in your package.json files dependencies for jquery. If its there you want to remove it, there's no need for it if you're going to use your jquery-3.3.1.min.js file instead to provide jQuery to your application.
Secondly, change your test of the expose-loader to trigger when it sees your jquery-3.3.1.min.js file in your entries, not resolve it from the jquery dependency from your node_modules.
This regex pattern should do the trick.
{
test: /jquery.+\.js$/,
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
Thirdly, remove the ProvidePlugin if you're going to import the library explicitly with import $ from 'jquery' you do not need it.
Lastly, you need to tell webpack when it sees an import for jquery it can resolve this from window.jQuery in the global scope. You can do this with the externals configuration you already referenced.
externals: {
jquery: 'jQuery'
}
With all these changes you should end up with a webpack.config.js file that looks like this.
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
entry: {
vendor: [
'./src/main/webapp/js/vendor/jquery-3.3.1.min.js',
// './src/main/webapp/js/vendor/fs.js',
'./src/main/webapp/js/vendor/google-adsense.js',
'./src/main/webapp/js/vendor/jquery.menu-aim.min.js',
'./src/main/webapp/js/vendor/jquery.touchSwipe.min.js',
],
app: './src/main/assets/js/desktop/app.js',
mobile: './src/main/assets/js/mobile/app.js',
touch: './src/main/assets/js/touch/app.js',
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: /jquery.+\.js$/,
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
],
},
plugins: [
// new CleanWebpackPlugin(['src/main/webapp/assets']),
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // Specify the common bundle's name.
}),
new UglifyJsPlugin({
test: /\.js$/,
sourceMap: process.env.NODE_ENV === "development"
})
],
output: {
filename: '[name].js',
path: path.resolve(__dirname, './src/main/webapp/js')
},
externals: {
jquery: 'jQuery'
}
};
I hope that does not just give you the answer but enough explanation as to where you were going wrong.

How to add/use aurelia-bootstrap-datepicker in node_modules

I'm new to aurelia and wanted to add a datepicker in my form, I saw this post from danyow, showing how to add datepicker using jquery. But would love to use a datepicker from bootstrap.
And so I saw this another post, haven't tried the second link because as I'm scanning the node_modules (if it matters, I use the spa templates found here), I saw a folder aurelia-bootstrap-datepicker and under the src folder, there's a aurelia-bootstrap-datepicker.js in which the content is pretty much the same with the second link.
Can I use that folder to have a datepicker? If yes, how? Or should I just follow the second link to create one myself?
What I tried:
use it as feature in my boot.ts file aurelia.use.standardConfiguration().feature(PLATFORM.moduleName('aurelia-bootstrap-datepicker'));
use it as a plugin
require it on my html file
Everything above, nothing is working for me.
Please advise. Thanks
EDIT:
boot.ts
import 'isomorphic-fetch';
import { Aurelia, PLATFORM } from 'aurelia-framework';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build
export function configure(aurelia: Aurelia) {
aurelia.use.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-validation'));
if (IS_DEV_BUILD) {
aurelia.use.developmentLogging();
}
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app/components/app/app')));
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { AureliaPlugin } = require('aurelia-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
entry: { 'app': 'aurelia-bootstrapper' },
resolve: {
extensions: ['.ts', '.js'],
modules: ['ClientApp', 'node_modules'],
},
output: {
path: path.resolve(bundleOutputDir),
publicPath: '/dist/',
filename: '[name].js'
},
module: {
rules: [
{ test: /\.ts$/i, include: /ClientApp/, use: 'ts-loader?silent=true' },
{ test: /\.html$/i, use: 'html-loader' },
{ test: /\.css$/i, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [
new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
new AureliaPlugin({ aureliaApp: 'boot' })
].concat(isDevBuild ? [
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
new webpack.optimize.UglifyJsPlugin()
])
}];
}

webpack ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk

So When I try to split my application into 1 application.js file and 1 libraries.js file, everything works fine. When I try to split it up into 1 application.js file and 2 libraries.js files, I get this error when building:
ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (libraries-react)
Anyone know what might be causing this error?
My configuration for webpack is
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractSass = new ExtractTextPlugin('main.css');
module.exports = {
module: {
loaders: [{
test: /\.jsx$/,
loader: 'babel',
exclude: ['./node_modules'],
query: {
presets: ['react', 'es2015']
}
}, {
test: /\.scss$/,
loader: extractSass.extract(['css', 'sass'])
}, {
test: /\.html$/,
loader: 'file?name=[name].[ext]'
}, {
test: /\/misc\/.*\.js$/,
loader: 'file?name=/misc/[name].[ext]'
}, {
test: /\.(png|jpg|jpeg|)$/,
loader: 'file?name=/images/[name].[ext]'
}]
},
plugins: [
extractSass,
new webpack.optimize.CommonsChunkPlugin('libraries-core', 'libraries-core.js'),
new webpack.optimize.CommonsChunkPlugin('libraries-react', 'libraries-react.js')
],
entry: {
//3rd party libraries
'libraries-core': [
'lodash',
'superagent',
'bluebird',
'eventemitter3',
'object-assign',
'schema-inspector',
'jsuri',
'store-cacheable',
'immutable'
],
'libraries-react': [
'react',
'react-dom',
'react-router',
'nucleus-react'
],
//application code
application: './web/app/application.jsx',
//mocks
'mocked-api': './web/app/mock/api.js',
'mocked-local-storage': './web/app/mock/local-storage.js'
},
output: {
path: './web/build',
publicPath: '/build',
filename: '[name].js'
}
}

Following the github issue#1016, you need to reverse the order of the chunk names in plugin definition regarding to the entry points' definition
It seems like a bug to this webpack plugin for the time being...
new webpack.optimize.CommonsChunkPlugin('libraries-react', 'libraries-react.js')
new webpack.optimize.CommonsChunkPlugin('libraries-core', 'libraries-core.js')
or
new webpack.optimize.CommonsChunkPlugin({names: ['libraries-react', 'libraries-core'], filename: '[name].js')

Switching from two entries for the CommonChunkPlugin to a single one helped in my case.
Before:
plugins: [
new webpack.optimize.CommonsChunkPlugin('libraries-core', 'libraries-core.js'),
new webpack.optimize.CommonsChunkPlugin('libraries-react', 'libraries-react.js')
]
After:
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['libraries-core', 'libraries-react'],
minChunks: Infinity
})
]
It's based on the two-explicit-vendor-chunks example.

The other answers talk about the order of the names in CommonsChunkPlugin which is true. But sometimes even after you correct the order (i.e reverse of the order given in entry), webpack still might throw the same error.
And this is when you're using another CommonsChunkPlugin instance to extract commons - eg. explicit-webpack-runtime-chunk, again the order matters - here the order of instances in the config's plugins list. Simply, move this instance after the CommonsChunkPlugin for explicit-vendor-chunks. For example,
plugins: [
// explicit-vendor-chunk
new CommonsChunkPlugin({
names: ["vendor-2", "vendor-1"],
minChunks: Infinity
}),
// and the following should go after explicit-vendor-chunk
// in the list of plugins
// explicit-webpack-runtime-chunk
new CommonsChunkPlugin({
name: "manifest", // something that's not an entry
minChunks: Infinity
})
]