Dhiren321
commented
8 months ago here is my package.json
{
"name": "webapp",
"private": true,
"version": "0.1.0",
"devDependencies": {
"@babel/core": "7.7.2",
"@hot-loader/react-dom": "16.11.0",
"@types/history": "4.7.3",
"@types/react": "16.9.11",
"@types/react-dom": "16.9.4",
"@types/react-helmet": "5.0.14",
"@types/react-redux": "7.1.5",
"@types/react-router": "5.1.3",
"@types/react-router-dom": "5.1.2",
"@types/webpack": "4.41.0",
"@types/webpack-env": "1.14.1",
"aspnet-prerendering": "3.0.1",
"aspnet-webpack-react": "4.0.0",
"babel-loader": "8.0.6",
"babel-plugin-import": "^1.13.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "3.2.0",
"cssnano": "4.1.10",
"file-loader": "4.2.0",
"fork-ts-checker-webpack-plugin": "3.1.0",
"ignore-loader": "0.1.2",
"mini-css-extract-plugin": "0.8.0",
"node-noop": "1.0.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"react-dev-utils": "9.0.1",
"react-dropzone": "^14.2.2",
"react-hot-loader": "4.12.18",
"rimraf": "3.0.0",
"sass": "^1.64.1",
"sass-loader": "^10.4.1",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.3.0",
"ts-loader": "6.2.1",
"ts-nameof": "4.2.0",
"ts-nameof-loader": "1.0.2",
"typescript": "^4.9.5",
"url-loader": "2.2.0",
"webpack": "4.41.2",
"webpack-cli": "3.3.10",
"webpack-dev-middleware": "3.7.2",
"webpack-hot-middleware": "2.25.0",
"webpack-merge": "4.2.2"
},
"dependencies": {
"@babel/polyfill": "7.7.0",
"@material-ui/core": "^4.11.0",
"@reduxjs/toolkit": "1.1.0",
"aspnet-webpack": "3.0.0",
"aspnet-webpack-react": "4.0.0",
"awesome-debounce-promise": "2.1.0",
"axios": "0.21.1",
"bootstrap": "^4.5.0",
"chokidar": "^3.5.3",
"connected-react-router": "6.6.0",
"core-js": "^3.32.1",
"custom-event-polyfill": "1.0.7",
"debug": "^4.3.4",
"domain-wait": "^1.3.0",
"event-source-polyfill": "1.0.9",
"formik": "2.0.4",
"history": "4.10.1",
"ini": "^4.1.1",
"mkdirp": "^3.0.1",
"nval-tippy": "^1.0.40",
"query-string": "^5.1.1",
"react": "16.12.0",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "1.0.0-beta.16",
"react-dom": "16.12.0",
"react-helmet": "6.0.0-beta",
"react-redux": "7.1.3",
"react-router": "5.1.2",
"react-router-bootstrap": "0.25.0",
"react-router-dom": "5.1.2",
"react-select": "^3.1.0",
"react-toastify": "5.4.1",
"redux": "4.0.4",
"redux-thunk": "2.3.0",
"uuid": "^9.0.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
},
"scripts": {
"build:dev": "node build.before.js --mode=development && node ./node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js && node ./node_modules/webpack/bin/webpack.js --config webpack.config.js",
"build:prod": "node build.before.js --mode=production && node ./node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod=true && node ./node_modules/webpack/bin/webpack.js --config webpack.config.js --env.prod=true"
}
}and web.config
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const CssNanoPlugin = require("cssnano");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
// Configuration in common to both client-side and server-side bundles.
const sharedConfig = () => {
var mode = isDevBuild ? "development" : "production";
console.log('\x1b[36m%s\x1b[0m', "=== Webpack compilation mode: " + mode + " ===");
var config = {
mode,
optimization: {
moduleIds: 'named',
minimize: !isDevBuild,
usedExports: isDevBuild,
minimizer: !isDevBuild ? [
// Production.
new TerserWebpackPlugin({
terserOptions: {
output: {
comments: false,
},
},
}),
new OptimizeCSSAssetsPlugin({
cssProcessor: CssNanoPlugin,
cssProcessorPluginOptions: {
preset: ["default", { discardComments: { removeAll: true } }]
}
})
] : [
//developement
new TerserWebpackPlugin({
terserOptions: {
output: {
comments: false,
},
},
}),
new OptimizeCSSAssetsPlugin({
cssProcessor: CssNanoPlugin,
cssProcessorPluginOptions: {
preset: ["default", { discardComments: { removeAll: true } }]
}
})
]
},
stats: { modules: false },
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.jpg','.ico'],
alias: {
"@Layouts": path.resolve(__dirname, "ClientApp/layouts/"),
"@Components": path.resolve(__dirname, "ClientApp/components/"),
"@Images": path.resolve(__dirname, "ClientApp/images/"),
"@Store": path.resolve(__dirname, "ClientApp/store/"),
"@Utils": path.resolve(__dirname, "ClientApp/utils"),
"@Styles": path.resolve(__dirname, 'ClientApp/styles/'),
"@Pages": path.resolve(__dirname, 'ClientApp/pages/'),
"@Services": path.resolve(__dirname, 'ClientApp/services/'),
"@Models": path.resolve(__dirname, 'ClientApp/models/'),
"@Core": path.resolve(__dirname, 'ClientApp/core/')
}
},
output: {
filename: '[name].js',
publicPath: 'dist/', // Webpack dev middleware, if enabled, handles requests for this URL prefix.
},
module: {
rules: [
{
test: /\.tsx?$/, include: /ClientApp/,
use: [
{
loader: 'babel-loader',
options: {
compact: true,
plugins: [
]
},
},
{
loader: 'ts-loader',
options: {
// Disable type checker - we will use it in fork plugin.
transpileOnly: true
}
},
'ts-nameof-loader'
]
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: ['file-loader']
}
]
},
plugins: [
new ForkTsCheckerWebpackPlugin(),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
].concat(isDevBuild ? [
// Development.
// Add module names to factory functions so they appear in browser profiler.
//new webpack.NamedModulesPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebookincubator/create-react-app/issues/240
new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebookincubator/create-react-app/issues/186
new WatchMissingNodeModulesPlugin(path.resolve(__dirname, '..', 'node_modules'))
] : [
// Production.
])
};
if (isDevBuild) {
// Change config for development build.
config = {
...config,
// Turn off performance hints during development because we don't do any
// splitting or minification in interest of speed. These warnings become
// cumbersome.
performance: {
hints: false,
},
//IE11 isn't a fan of the eval() code that gets inserted by webpack.
//Using webpackConfig.devtool = 'none' (or one of the alternative values) should fix it
devtool: 'eval-source-map'
//devtool: 'none'
};
config.resolve.alias = {
...config.resolve.alias,
'react-dom': '@hot-loader/react-dom'
};
}
return config;
};
// Configuration for client-side bundle suitable for running in browsers.
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig(), {
entry: { 'main-client': './ClientApp/boot-client.tsx' },
module: {
rules: [
{ test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : [MiniCssExtractPlugin.loader, 'css-loader'] },
{ test: /\.(scss|sass)$/, use: isDevBuild ? ['style-loader', 'css-loader', 'sass-loader'] : [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] }
]
},
output: { path: path.join(__dirname, clientBundleOutputDir) },
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Development.
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps.
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Production.
new MiniCssExtractPlugin({
filename: "site.css"
})
])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node.
const serverBundleConfig = merge(sharedConfig(), {
module: {
rules: [
{ test: /\.(scss|sass)$/, use: "ignore-loader" }
]
},
resolve: { mainFields: ['main'] },
entry: { 'main-server': './ClientApp/boot-server.tsx' },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./ClientApp/dist/vendor-manifest.json'),
sourceType: 'commonjs2',
name: './vendor'
})
],
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node'
});
return [clientBundleConfig, serverBundleConfig];
};any changes I need kindly suggest
github-actions[bot]
I have updated the node version form 16 to 20
npm installwas successfulhowever when I run
npm run build:devI get following output
after this when I run the code I get the following in console
what does
[emitted]mean in thenpm run build:devoutput and how to solve it so mymain-client.js,vendor.jsandvendor.cssloads?