Skip to content

Commit 101ccce

Browse files
committed
Upgrade webpack configuration to webpack v5
1 parent 3478b0b commit 101ccce

File tree

4 files changed

+196
-600
lines changed

4 files changed

+196
-600
lines changed

examples/webpack.config.js

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22

33
const webpack = require('webpack');
44
const path = require('path');
5-
const Extract = require('extract-text-webpack-plugin');
5+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
66
const HtmlWebpackPlugin = require('html-webpack-plugin');
7-
const MinifyPlugin = require("babel-minify-webpack-plugin");
87

98
const PROD = process.env.NODE_ENV === 'production';
109
const DEV = !PROD;
1110

1211
const config = {
12+
mode: PROD ? "production" : "development",
1313
entry: ['./examples/index.js'],
1414
output: {
1515
filename: DEV ? 'bundle.js' : 'bundle.[hash].js',
@@ -50,19 +50,16 @@ const config = {
5050
},
5151
{
5252
test: /\.css$/,
53-
use: Extract.extract({
54-
fallback: 'style-loader',
55-
use: [{
56-
loader: 'css-loader'
57-
}]
58-
}),
53+
use: [
54+
DEV ? "style-loader": MiniCssExtractPlugin.loader,
55+
"css-loader"
56+
],
5957
}
6058
]
6159
},
6260
plugins: [
63-
new Extract({
61+
new MiniCssExtractPlugin({
6462
filename: DEV ? 'styles.css' : 'styles.[contenthash:6].css',
65-
allChunks: true
6663
}),
6764
new HtmlWebpackPlugin({
6865
template: 'examples/index.html',
@@ -74,21 +71,4 @@ const config = {
7471

7572
!PROD && (config.devtool = 'source-map');
7673

77-
PROD && config.plugins.push(
78-
new webpack.optimize.UglifyJsPlugin({
79-
compressor: {
80-
warnings: false,
81-
}
82-
})
83-
);
84-
85-
PROD && config.plugins.push(
86-
new webpack.DefinePlugin({
87-
'process.env': {
88-
'NODE_ENV': JSON.stringify('production')
89-
}
90-
}),
91-
new MinifyPlugin()
92-
);
93-
9474
module.exports = config;

package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@
2626
"clean": "rimraf ./dist && rimraf ./modules && rimraf ./es6",
2727
"clean:examples": "rimraf ./public",
2828
"build": "yarn clean && yarn test && yarn build:dist && yarn build:es5 && yarn build:es6",
29-
"build:dist": "webpack --progress --profile --colors",
29+
"build:dist": "webpack --progress --profile",
3030
"build:es5": "cross-env BABEL_ENV=es5 babel src --out-dir modules",
3131
"build:es6": "cross-env BABEL_ENV=es6 babel src --out-dir es6",
3232
"build:examples": "yarn clean:examples && yarn build:dev",
33-
"build:dev": "cross-env BABEL_ENV=es6 webpack --config examples/webpack.config.js --progress --profile --colors",
33+
"build:dev": "cross-env BABEL_ENV=es6 webpack --config examples/webpack.config.js --progress --profile",
3434
"start": "yarn build:examples && yarn start:server",
3535
"start:server": "http-server public -p 3000",
3636
"prepublishOnly": "yarn build"
@@ -64,7 +64,6 @@
6464
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
6565
"babel-jest": "~27.3.1",
6666
"babel-loader": "~8.2.3",
67-
"babel-minify-webpack-plugin": "~0.3.1",
6867
"coveralls": "~3.1.1",
6968
"cross-env": "~7.0.3",
7069
"css-loader": "~6.5.1",
@@ -75,19 +74,20 @@
7574
"eslint-import-resolver-webpack": "~0.13.2",
7675
"eslint-plugin-import": "~2.25.3",
7776
"eslint-plugin-react": "~7.27.0",
78-
"extract-text-webpack-plugin": "~3.0.2",
7977
"history": "~5.1.0",
8078
"html-webpack-plugin": "~5.5.0",
8179
"http-server": "~14.0.0",
8280
"jest": "~27.3.1",
81+
"mini-css-extract-plugin": "^2.4.5",
8382
"prop-types": "~15.7.2",
8483
"react": "~17.0.2",
8584
"react-dom": "~17.0.2",
8685
"react-router-dom": "~6.0.2",
8786
"react-test-renderer": "~17.0.2",
8887
"rimraf": "~3.0.0",
8988
"style-loader": "~3.3.1",
90-
"webpack": "~5.64.1"
89+
"webpack": "5.64.4",
90+
"webpack-cli": "^4.9.1"
9191
},
9292
"jest": {
9393
"setupFiles": [

webpack.config.js

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ const webpack = require('webpack');
33
const path = require('path');
44

55
module.exports = {
6-
entry: "./src/index.js",
6+
mode: "production",
77
output: {
8-
filename: "dist/react-contextmenu.js",
8+
filename: "react-contextmenu.js",
99
libraryTarget: 'umd',
1010
library: 'ReactContextMenu'
1111
},
@@ -46,16 +46,4 @@ module.exports = {
4646
amd: "react-dom"
4747
}
4848
}],
49-
plugins: [
50-
new webpack.DefinePlugin({
51-
"process.env": {
52-
"NODE_ENV": JSON.stringify("production")
53-
}
54-
}),
55-
new webpack.optimize.UglifyJsPlugin({
56-
compressor: {
57-
warnings: false
58-
}
59-
})
60-
]
6149
};

0 commit comments

Comments
 (0)