Skip to content

Commit 0dcd688

Browse files
committed
Use common webpack 5 config
1 parent 44930b5 commit 0dcd688

File tree

8 files changed

+233
-542
lines changed

8 files changed

+233
-542
lines changed
Lines changed: 24 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,43 @@
1-
const TerserPlugin = require('terser-webpack-plugin');
21
const HtmlWebPackPlugin = require('html-webpack-plugin');
3-
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
42
const resolve = require('path').resolve;
5-
const merge = require('webpack-merge');
6-
7-
const commonConfig = {
8-
module: {
9-
rules: [{
10-
test: /\.(js|jsx)$/,
11-
exclude: /node_modules/,
12-
use: {
13-
loader: 'babel-loader',
14-
},
15-
}, {
16-
test: /\.(sa|sc|c)ss$/,
17-
use: [ 'style-loader', 'css-loader', 'sass-loader', 'resolve-url-loader' ],
18-
}, {
19-
test: /\.(png|jpg|gif|svg|woff|ttf|eot)/,
20-
loader: 'url-loader',
21-
},
22-
],
23-
},
24-
};
3+
const webpack = require('webpack');
254

265
const htmlPlugin = new HtmlWebPackPlugin({
276
template: './demo/index.html',
28-
filename: './index.html',
7+
filename: './index.html'
298
});
309

3110
const devConfig = {
3211
mode: 'development',
33-
entry: './demo/index.js',
12+
entry: { app: resolve('./demo/index.js') },
3413
output: {
3514
path: resolve('../dist'),
36-
filename: '[name].[hash].js',
37-
},
38-
devtool: 'source-map',
39-
plugins: [ htmlPlugin ],
40-
};
41-
42-
const externals = [{
43-
react: {
44-
root: 'React',
45-
commonjs2: 'react',
46-
commonjs: [ 'react' ],
47-
amd: 'react',
48-
},
49-
},
50-
/@material-ui\/core\/.*/,
51-
];
52-
53-
const prodConfig = {
54-
mode: 'production',
55-
entry: './src/index.js',
56-
output: {
57-
path: resolve('./dist'),
58-
library: '[name]',
59-
libraryTarget: 'umd',
60-
filename: 'index.js',
61-
},
62-
optimization: {
63-
minimizer: [
64-
new TerserPlugin({
65-
cache: true,
66-
parallel: true,
67-
terserOptions: {
68-
keep_classnames: true,
69-
keep_fnames: true,
70-
},
71-
}),
72-
],
73-
},
74-
externals,
75-
};
76-
77-
const vendorConfig = {
78-
mode: 'production',
79-
entry: './src/vendor.js',
80-
output: {
81-
path: resolve('./vendor'),
82-
filename: 'vendor.js',
15+
filename: '[name].[hash].js'
8316
},
17+
devtool: 'eval-source-map',
18+
plugins: [
19+
htmlPlugin,
20+
new webpack.ProvidePlugin({
21+
process: 'process/browser'
22+
})
23+
],
8424
module: {
8525
rules: [
26+
{
27+
test: /\.js$/,
28+
exclude: /(node_modules)/i,
29+
use: ['babel-loader']
30+
},
8631
{
8732
test: /\.(sa|sc|c)ss$/,
88-
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'resolve-url-loader' ],
89-
}, {
90-
test: /\.(png|jpg|gif|svg|woff|ttf|eot)/,
91-
loader: 'url-loader',
33+
use: ['style-loader', 'css-loader', 'sass-loader']
9234
},
93-
],
94-
},
95-
plugins: [ new MiniCssExtractPlugin({ filename: 'vendor.css' }) ],
35+
{
36+
test: /\.(png|jpg|gif|svg|woff|ttf|eot)/,
37+
type: 'asset/resource'
38+
}
39+
]
40+
}
9641
};
9742

98-
module.exports = prodConfig;
99-
100-
module.exports = env => ({
101-
dev: merge(commonConfig, devConfig),
102-
prod: merge(commonConfig, prodConfig),
103-
vendor: vendorConfig,
104-
})[env];
105-
43+
module.exports = devConfig;
Lines changed: 29 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,43 @@
1-
const TerserPlugin = require('terser-webpack-plugin');
21
const HtmlWebPackPlugin = require('html-webpack-plugin');
32
const resolve = require('path').resolve;
4-
const merge = require('webpack-merge');
5-
6-
const commonConfig = {
7-
devtool: "source-map",
8-
module: {
9-
rules: [{
10-
test: /\.(js|jsx)$/,
11-
exclude: /node_modules/,
12-
use: {
13-
loader: 'babel-loader',
14-
},
15-
}, {
16-
test: /\.(ts|tsx)$/,
17-
exclude: /node_modules/,
18-
use: {
19-
loader: 'ts-loader',
20-
},
21-
}, {
22-
test: /\.(sa|sc|c)ss$/,
23-
use: [ 'style-loader', 'css-loader', 'sass-loader', 'resolve-url-loader' ],
24-
}, {
25-
test: /\.(png|jpg|gif|svg|woff|ttf|eot)/,
26-
loader: 'url-loader',
27-
},
28-
],
29-
},
30-
};
3+
const webpack = require('webpack');
314

325
const htmlPlugin = new HtmlWebPackPlugin({
336
template: './demo/index.html',
34-
filename: './index.html',
7+
filename: './index.html'
358
});
369

3710
const devConfig = {
3811
mode: 'development',
39-
entry: './demo/index.js',
12+
entry: { app: resolve('./demo/index.js') },
4013
output: {
4114
path: resolve('../dist'),
42-
filename: '[name].[hash].js',
43-
},
44-
devtool: 'source-map',
45-
plugins: [ htmlPlugin ],
46-
};
47-
48-
const prodConfig = {
49-
mode: 'development',
50-
entry: './src/index.js',
51-
optimization: {
52-
minimizer: [
53-
new TerserPlugin({
54-
cache: true,
55-
parallel: true,
56-
terserOptions: {
57-
keep_classnames: true,
58-
keep_fnames: true,
59-
},
60-
}),
61-
],
62-
},
63-
output: {
64-
path: resolve('./dist'),
65-
library: '[name]',
66-
libraryTarget: 'umd',
67-
filename: 'index.js',
68-
umdNamedDefine: true,
69-
globalObject: 'this',
15+
filename: '[name].[hash].js'
7016
},
17+
devtool: 'eval-source-map',
18+
plugins: [
19+
htmlPlugin,
20+
new webpack.ProvidePlugin({
21+
process: 'process/browser'
22+
})
23+
],
24+
module: {
25+
rules: [
26+
{
27+
test: /\.js$/,
28+
exclude: /(node_modules)/i,
29+
use: ['babel-loader']
30+
},
31+
{
32+
test: /\.(sa|sc|c)ss$/,
33+
use: ['style-loader', 'css-loader', 'sass-loader']
34+
},
35+
{
36+
test: /\.(png|jpg|gif|svg|woff|ttf|eot)/,
37+
type: 'asset/resource'
38+
}
39+
]
40+
}
7141
};
7242

73-
module.exports = env => ({
74-
dev: merge(commonConfig, devConfig),
75-
prod: merge(commonConfig, prodConfig),
76-
})[env];
77-
43+
module.exports = devConfig;
Lines changed: 29 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,43 @@
1-
const TerserPlugin = require('terser-webpack-plugin');
21
const HtmlWebPackPlugin = require('html-webpack-plugin');
32
const resolve = require('path').resolve;
4-
const merge = require('webpack-merge');
5-
6-
const commonConfig = {
7-
devtool: "source-map",
8-
module: {
9-
rules: [{
10-
test: /\.(js|jsx)$/,
11-
exclude: /node_modules/,
12-
use: {
13-
loader: 'babel-loader',
14-
},
15-
}, {
16-
test: /\.(ts|tsx)$/,
17-
exclude: /node_modules/,
18-
use: {
19-
loader: 'ts-loader',
20-
},
21-
}, {
22-
test: /\.(sa|sc|c)ss$/,
23-
use: [ 'style-loader', 'css-loader', 'sass-loader', 'resolve-url-loader' ],
24-
}, {
25-
test: /\.(png|jpg|gif|svg|woff|ttf|eot)/,
26-
loader: 'url-loader',
27-
},
28-
],
29-
},
30-
};
3+
const webpack = require('webpack');
314

325
const htmlPlugin = new HtmlWebPackPlugin({
336
template: './demo/index.html',
34-
filename: './index.html',
7+
filename: './index.html'
358
});
369

3710
const devConfig = {
3811
mode: 'development',
39-
entry: './demo/index.js',
12+
entry: { app: resolve('./demo/index.js') },
4013
output: {
4114
path: resolve('../dist'),
42-
filename: '[name].[hash].js',
43-
},
44-
devtool: 'source-map',
45-
plugins: [ htmlPlugin ],
46-
};
47-
48-
const package = {
49-
commonjs: 'package',
50-
commonjs2: 'package',
51-
amd: 'package',
52-
root: 'package',
53-
};
54-
55-
const externals = {
56-
'package': package,
57-
};
58-
59-
const prodConfig = {
60-
mode: 'development',
61-
entry: './src/index.js',
62-
optimization: {
63-
minimizer: [
64-
new TerserPlugin({
65-
cache: true,
66-
parallel: true,
67-
terserOptions: {
68-
keep_classnames: true,
69-
keep_fnames: true,
70-
},
71-
}),
72-
],
73-
},
74-
output: {
75-
path: resolve('./dist'),
76-
library: '[name]',
77-
libraryTarget: 'umd',
78-
filename: 'index.js',
79-
umdNamedDefine: true,
80-
globalObject: 'this',
15+
filename: '[name].[hash].js'
8116
},
82-
externals,
17+
devtool: 'eval-source-map',
18+
plugins: [
19+
htmlPlugin,
20+
new webpack.ProvidePlugin({
21+
process: 'process/browser'
22+
})
23+
],
24+
module: {
25+
rules: [
26+
{
27+
test: /\.js$/,
28+
exclude: /(node_modules)/i,
29+
use: ['babel-loader']
30+
},
31+
{
32+
test: /\.(sa|sc|c)ss$/,
33+
use: ['style-loader', 'css-loader', 'sass-loader']
34+
},
35+
{
36+
test: /\.(png|jpg|gif|svg|woff|ttf|eot)/,
37+
type: 'asset/resource'
38+
}
39+
]
40+
}
8341
};
8442

85-
module.exports = env => ({
86-
dev: merge(commonConfig, devConfig),
87-
prod: merge(commonConfig, prodConfig),
88-
})[env];
89-
43+
module.exports = devConfig;
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const HtmlWebPackPlugin = require('html-webpack-plugin');
2+
const resolve = require('path').resolve;
3+
const webpack = require('webpack');
4+
5+
const htmlPlugin = new HtmlWebPackPlugin({
6+
template: './demo/index.html',
7+
filename: './index.html'
8+
});
9+
10+
const devConfig = {
11+
mode: 'development',
12+
entry: { app: resolve('./demo/index.js') },
13+
output: {
14+
path: resolve('../dist'),
15+
filename: '[name].[hash].js'
16+
},
17+
devtool: 'eval-source-map',
18+
plugins: [
19+
htmlPlugin,
20+
new webpack.ProvidePlugin({
21+
process: 'process/browser'
22+
})
23+
],
24+
module: {
25+
rules: [
26+
{
27+
test: /\.js$/,
28+
exclude: /(node_modules)/i,
29+
use: ['babel-loader']
30+
},
31+
{
32+
test: /\.(sa|sc|c)ss$/,
33+
use: ['style-loader', 'css-loader', 'sass-loader']
34+
},
35+
{
36+
test: /\.(png|jpg|gif|svg|woff|ttf|eot)/,
37+
type: 'asset/resource'
38+
}
39+
]
40+
}
41+
};
42+
43+
module.exports = devConfig;

0 commit comments

Comments
 (0)