I am upgrading a legacy node/angular application (10 years old!) and have got everything compiled without error messages, etc. I am using an index.html folder at the server root to start off the application, through this code:
<body>
<tc-app>Loading...</tc-app>
</body>
is a piece of Angular code. This invokes an appcomponent module, with the selector ‘tc-app’. This in turn loads a template in the file “app.html”, which in turn invokes yet further component modules, each with its own templates, and so it goes.
In the legacy application, using Webpack 1.15.0, the webpack generates three files for the /dist folder: app.bundle.js, app.css, vendor.bundle.js. The new application, using Webpack 5.94.0, happily generates app.bundle.js. However, it does NOT generate app.css. That is to be expected: the legacy application uses ExtractTextPlugin, now deprecated. However, my attempts to figure out how the replacement MiniCssExtractPlugin can be used to generate the app.css file in /dist have so far failed. Including tbe line
new MiniCssExtractPlugin("app.css"),
in the rules section of webpack.config.js generates an error. Omitting the parameter, thus new MiniCssExtractPlugin(), allows webpack to finish, but does not generate anything in /dist.
The second problem is generating the bundle for all the angular components, output in vendor.bundle.js by the legacy application. I have tried multiple different attempts, based on the documentation at https://webpack.js.org/guides/code-splitting/ and elsewhere but nothing is working. In the legacy file, the vendor.bundle.js was generated by this code, in the plug-ins array:
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor', filename: 'vendor.bundle.js',
chunks: ['app'],
minChunks: function(module, count) {
return module.resource && module.resource.indexOf(clientRoot) === -1;
}
However, in the new application this returns errors:
at Module._compile (node:internal/modules/cjs/loader:1469:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
at Module.load (node:internal/modules/cjs/loader:1288:32)
at Module._load (node:internal/modules/cjs/loader:1104:12)
TypeError: webpack.optimize.CommonsChunkPlugin is not a constructor
at Object.<anonymous (/Users/pmr906_1/venv/TCangular/tc/public/webpack.js:125:5)
Here is my current webpack.config.js:
var _ = require('lodash')
, webpack = require('webpack')
, ResolverPlugin = webpack.ResolverPlugin
, ProvidePlugin = webpack.ProvidePlugin
, IgnorePlugin = webpack.IgnorePlugin
// , ExtractTextPlugin = require("extract-text-webpack-plugin")
, path = require('path')
, clientRoot = path.resolve(__dirname)
, bowerRoot = path.resolve(clientRoot, '..', 'bower_components')
, nodeRoot = path.resolve(clientRoot, '..', 'node_modules')
, devtool = 'eval-source-map'
, debug = true
, MiniCssExtractPlugin = require("mini-css-extract-plugin")
;
switch (process.env.NODE_ENV) {
case 'production':
devtool = '#source-map';
debug = false;
break;
case 'development':
devtool = 'eval-source-map';
debug = true;
break;
}
var config = {
context: clientRoot,
mode: "development",
entry: {
app: path.join(clientRoot, 'app/boot.js'),
t: path.join(clientRoot, 'app/t.js'),
},
output: {
path: path.join(clientRoot, 'dist'),
filename: '[name].bundle.js',
devtoolModuleFilenameTemplate(info) {
return `file:///${info.absoluteResourcePath.replace(/\/g, '/')}`;
},
},
externals: {
jquery: 'jQuery',
rxjs: 'Rx',
lodash: '_',
bson: 'bson',
'codemirror/lib/codemirror': 'CodeMirror',
'codemirror/mode/xml/xml': false,
},
module: {
rules: [
{
test: /.png(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=image/jpg&prefix=dist/"
}, {
test: /.jpg(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=image/jpg&prefix=dist/"
}, {
test: /.woff(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
}, {
test: /.woff2(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
}, {
test: /.ttf(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=application/octet-stream&prefix=dist/"
}, {
test: /.eot(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=application/vnd.ms-fontobject&prefix=dist/"
}, {
test: /.svg(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=image/svg+xml&prefix=dist/"
},
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /.less$/,
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
lessOptions: {
// javascriptEnabled: true,
},
},
},
],
},
], /*,
noParse: [
] */
},
resolve: {
/* root: [clientRoot], */
modules: [clientRoot, 'web_modules', 'node_modules', 'bower_components', ],
fallback: {
"fs": false,
"tls": false,
"net": false,
"path": false,
"zlib": false,
"http": false,
"https": false,
"stream": false,
"crypto": false,
"crypto-browserify": false, //if you want to use this module also don't forget npm i crypto-browserify
},
alias: {
bower: bowerRoot,
node: nodeRoot,
},
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor', filename: 'vendor.bundle.js',
chunks: ['app'],
minChunks: function(module, count) {
return module.resource && module.resource.indexOf(clientRoot) === -1;
}
}),
new MiniCssExtractPlugin(),
],
devtool: devtool,
};
var compiler = webpack(config);
if (process.env.NODE_ENV === 'development') {
compiler.watch({
aggregateTimeout: 300,
poll: 1000,
}, handleError);
} else {
compiler.watch({
aggregateTimeout: 300,
poll: 1000,
}, handleError);
//compiler.run(handleError);
}
Help..
