Skip to content

Commit

Permalink
Webpack upgrade (#4914)
Browse files Browse the repository at this point in the history 
* Upgrade webpack 4

* Latest webpack 4 deps

* Change properties

* Failing pdfjs-dist css chunks

* Upgrade mini css webpack plugin

* webpack 5 splitchunks style

* css optimizer new plugin

* nodejs global Buffer webpack build

Co-authored-by: Daneryl <[email protected]>
  • Loading branch information
@daneryl
Sergio Revilla and daneryl authored Jul 25, 2022
1 parent becf01d commit 3793e48
Show file tree
Hide file tree
Showing 7 changed files with 931 additions and 1,309 deletions.
8 changes: 1 addition & 7 deletions app/react/App/Root.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,19 @@ import { availableLanguages as languagesList } from 'shared/languagesList';

const determineHotAssets = query => ({
JS: [
'http://localhost:8080/pdfjs-dist.js',
'http://localhost:8080/nprogress.js',
'http://localhost:8080/main.js',
'http://localhost:8080/vendor.js',
],
CSS: [
`http://localhost:8080/CSS/vendor.css${query}`,
`http://localhost:8080/CSS/main.css${query}`,
'http://localhost:8080/pdfjs-dist.css',
],
});

const determineAssets = (assets, languageData) => ({
JS: [assets.nprogress.js, assets.vendor.js, assets.main.js],
CSS: [
assets.vendor.css[languageData.rtl ? 1 : 0],
assets.main.css[languageData.rtl ? 1 : 0],
assets['pdfjs-dist'].css[0],
],
CSS: [assets.vendor.css[languageData.rtl ? 1 : 0], assets.main.css[languageData.rtl ? 1 : 0]],
});

const googelFonts = (
Expand Down
15 changes: 8 additions & 7 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,14 +274,15 @@
"@types/yauzl": "^2.9.2",
"@typescript-eslint/eslint-plugin": "4.33.0",
"@typescript-eslint/parser": "4.33.0",
"assets-webpack-plugin": "6.1.2",
"assets-webpack-plugin": "7.1.1",
"babel-loader": "8.2.5",
"babel-plugin-module-resolver": "4.1.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
"canvas": "^2.9.0",
"clean-webpack-plugin": "4.0.0",
"copy-webpack-plugin": "6.4.1",
"copy-webpack-plugin": "11.0.0",
"css-loader": "^5.2.7",
"css-minimizer-webpack-plugin": "^4.0.0",
"enzyme": "3.11.0",
"enzyme-to-json": "^3.6.2",
"eslint": "v7.32.0",
Expand All @@ -300,29 +301,29 @@
"jest-extended": "2.0.0",
"jest-image-snapshot": "^5.1.0",
"jest-puppeteer": "6.1.0",
"mini-css-extract-plugin": "^1.6.2",
"mini-css-extract-plugin": "^2.6.1",
"mongodb-memory-server": "^8.7.2",
"mutationobserver-shim": "^0.3.7",
"nightmare": "2.10.0",
"nightmare-real-mouse": "^1.1.0",
"nightmare-upload": "^0.1.1",
"node-polyfill-webpack-plugin": "^2.0.0",
"node-sass": "4.14.1",
"nodemon": "^2.0.19",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"plop": "^2.7.6",
"prettier": "2.5.1",
"puppeteer": "^13.5.2",
"react-dnd-test-backend": "15.1.1",
"redux-mock-store": "^1.5.4",
"rtlcss-webpack-plugin": "4.0.6",
"rtlcss-webpack-plugin": "4.0.7",
"sass-loader": "10.0.2",
"sharp": "^0.30.6",
"stream-mock": "^2.0.5",
"supertest": "6.2.3",
"terser-webpack-plugin": "^4.2.3",
"terser-webpack-plugin": "^5.3.3",
"ts-node": "^10.8.1",
"wait-for-expect": "^3.0.2",
"webpack": "4.44.1",
"webpack": "^5.73.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "4.10.0",
"webpack-dev-middleware": "5.3.3",
Expand Down
7 changes: 2 additions & 5 deletions webpack.production.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
process.env.NODE_ENV = 'production';
const webpack = require('webpack');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');

const production = true;
Expand All @@ -11,9 +11,6 @@ config.context = __dirname;
config.mode = 'production';

config.plugins = config.plugins.concat([
new webpack.optimize.OccurrenceOrderPlugin(),
new OptimizeCssAssetsPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
Expand All @@ -23,8 +20,8 @@ config.plugins = config.plugins.concat([

config.optimization.minimize = true;
config.optimization.minimizer = [
new CssMinimizerPlugin(),
new TerserWebpackPlugin({
cache: true,
parallel: true,
}),
];
Expand Down
42 changes: 20 additions & 22 deletions webpack/config.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
const path = require('path');
const webpack = require('webpack');
const AssetsPlugin = require('assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RtlCssPlugin = require('rtlcss-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

Expand All @@ -19,7 +21,7 @@ module.exports = production => {
if (production) {
outputPath = path.join(rootPath, 'prod/dist');
stylesName = '[name].[chunkhash].css';
rtlStylesName = 'rtl-[name].[hash].css';
rtlStylesName = 'rtl-[name].[fullhash].css';
jsChunkHashName = '.[chunkhash]';
}

Expand Down Expand Up @@ -48,23 +50,11 @@ module.exports = production => {
optimization: {
splitChunks: {
cacheGroups: {
default: false,
vendors: false,
vendor: {
chunks: 'all',
test: /node_modules/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

if (
packageName.match(
/qrcode.react|pdfjs-dist|recharts|react-map-gl|leaflet|mapbox-gl|LazyLoad/
)
) {
return packageName;
}

return 'vendor';
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks(chunk) {
return !chunk.name.match(/LazyLoad/);
},
},
},
Expand All @@ -74,12 +64,16 @@ module.exports = production => {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
loader: 'babel-loader?cacheDirectory',
include: path.join(rootPath, 'app'),
exclude: /node_modules/,
options: {
sourceMap: process.env.BABEL_ENV === 'debug',
},
use: [
{
loader: 'babel-loader?cacheDirectory',
options: {
sourceMap: process.env.BABEL_ENV === 'debug',
},
},
],
},
{
test: /\.s?[ac]ss$/,
Expand All @@ -96,6 +90,10 @@ module.exports = production => {
],
},
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
new NodePolyfillPlugin({ includeAliases: ['path', 'url', 'util', 'Buffer'] }),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: stylesName,
Expand Down
9 changes: 3 additions & 6 deletions webpack/webpack.config.hot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,12 @@ config.plugins = config.plugins.filter(plugin => !(plugin instanceof RtlCssPlugi
config.plugins = config.plugins.concat([
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally

new webpack.NamedModulesPlugin(),
// prints more readable module names in the browser console on HMR updates

new webpack.NoEmitOnErrorsPlugin(),
// do not emit compiled assets that include errors
new webpack.DefinePlugin({ 'process.env': { HOT: true } }),
]);

config.optimization.moduleIds = 'named';
config.optimization.emitOnErrors = false;

config.output = {
publicPath: 'http://localhost:8080/',
filename: '[name].js',
Expand Down
52 changes: 28 additions & 24 deletions webpack/webpack.server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,34 +16,38 @@ const webpackConfig = require('./webpack.config.hot');

const compiler = webpack(webpackConfig);


app.use(require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
headers: { 'Access-Control-Allow-Origin': '*' },
stats: 'errors-warnings'
}));
app.use(
require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
headers: { 'Access-Control-Allow-Origin': '*' },
stats: 'errors-warnings',
})
);

app.use(require('webpack-hot-middleware')(compiler));

app.get('/CSS/:file', (req, res) => {
const request = httpRequest.request({ host: 'localhost', port: 8080, path: `/${req.params.file}` }, (response) => {
let data = '';
response.on('data', (chunk) => {
data += chunk;
});
response.on('end', () => {
if (req.query.rtl === 'true') {
process.stdout.write('Processing RTL...\r\n');
data = rtlcss.process(data);
process.stdout.write('Done!\r\n');
} else {
process.stdout.write('Using standard CSS.\r\n');
}
res.end(data);
});
});

request.on('error', (e) => {
const request = httpRequest.request(
{ host: 'localhost', port: 8080, path: `/${req.params.file}` },
response => {
let data = '';
response.on('data', chunk => {
data += chunk;
});
response.on('end', () => {
if (req.query.rtl === 'true') {
process.stdout.write('Processing RTL...\r\n');
data = rtlcss.process(data);
process.stdout.write('Done!\r\n');
} else {
process.stdout.write('Using standard CSS.\r\n');
}
res.end(data);
});
}
);

request.on('error', e => {
process.stdout.write(`${e.message}\r\n`);
});

Expand Down
Loading

0 comments on commit 3793e48

Please sign in to comment.