Skip to content

Commit dae57a9

Browse files
MacKentochMacKentoch
committed
migration
1 parent 7d5995f commit dae57a9

File tree

4 files changed

+430
-0
lines changed

4 files changed

+430
-0
lines changed

‎front/webpack.analyze.config.js‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
const webpack = require('webpack');
2+
const path = require('path');
3+
const HtmlWebpackPlugin = require('html-webpack-plugin');
4+
const CompressionWebpackPlugin = require('compression-webpack-plugin');
5+
const TerserPlugin = require('terser-webpack-plugin');
6+
const workboxPlugin = require('workbox-webpack-plugin');
7+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
8+
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
9+
const ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
10+
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
11+
.BundleAnalyzerPlugin;
12+
13+
// #region constants
14+
const nodeModulesDir = path.join(__dirname, 'node_modules');
15+
const indexFile = path.join(__dirname, 'src/index.tsx');
16+
// #endregion
17+
18+
const config = {
19+
target: 'web',
20+
mode: 'production',
21+
entry: { app: indexFile },
22+
output: {
23+
path: path.join(__dirname, '/../docs/assets'),
24+
publicPath: '/assets/',
25+
filename: '[name].[hash].js',
26+
chunkFilename: '[name].[hash].js',
27+
},
28+
resolve: {
29+
modules: ['src', 'node_modules'],
30+
extensions: ['.css', '.json', '.js', '.jsx', '.ts', '.tsx'],
31+
},
32+
module: {
33+
rules: [
34+
{
35+
test: /\.ts(x)?$/,
36+
use: ['awesome-typescript-loader'],
37+
exclude: [nodeModulesDir],
38+
},
39+
{
40+
test: /\.css$/,
41+
use: ['style-loader', 'css-loader'],
42+
},
43+
{
44+
test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
45+
use: [
46+
{
47+
loader: 'url-loader',
48+
options: {
49+
limit: 100000,
50+
name: '[name].[ext]',
51+
},
52+
},
53+
],
54+
},
55+
],
56+
},
57+
optimization: {
58+
runtimeChunk: false,
59+
splitChunks: {
60+
cacheGroups: {
61+
commons: {
62+
test: /[\\/]node_modules[\\/]/,
63+
name: 'vendors',
64+
chunks: 'all',
65+
},
66+
styles: {
67+
name: 'styles',
68+
test: /\.css$/,
69+
chunks: 'all',
70+
enforce: true,
71+
},
72+
},
73+
},
74+
minimizer: [
75+
new MiniCssExtractPlugin({
76+
filename: '[name].[hash].css',
77+
chunkFilename: '[id].[hash].css',
78+
}),
79+
new TerserPlugin({
80+
cache: true,
81+
parallel: true,
82+
sourceMap: true,
83+
}),
84+
new OptimizeCSSAssetsPlugin({}),
85+
],
86+
},
87+
plugins: [
88+
new HtmlWebpackPlugin({
89+
template: 'src/index.html',
90+
filename: '../index.html', // hack since outPut path would place in '/dist/assets/' in place of '/dist/'
91+
}),
92+
new webpack.DefinePlugin({
93+
'process.env': {
94+
NODE_ENV: JSON.stringify('production'),
95+
},
96+
}),
97+
new ModernizrWebpackPlugin({
98+
htmlWebpackPlugin: true,
99+
}),
100+
new MiniCssExtractPlugin({
101+
filename: '[name].[hash].css',
102+
chunkFilename: '[id].[hash].css',
103+
}),
104+
new CompressionWebpackPlugin({
105+
filename: '[path].gz[query]',
106+
algorithm: 'gzip',
107+
test: new RegExp('\\.(js|css)$'),
108+
threshold: 10240,
109+
minRatio: 0.8,
110+
}),
111+
new workboxPlugin.GenerateSW({
112+
swDest: 'sw.js',
113+
clientsClaim: true,
114+
skipWaiting: true,
115+
}),
116+
new BundleAnalyzerPlugin(),
117+
],
118+
};
119+
120+
module.exports = config;

‎front/webpack.dev.config.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
const webpack = require('webpack');
2+
const path = require('path');
3+
const HtmlWebpackPlugin = require('html-webpack-plugin');
4+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5+
const workboxPlugin = require('workbox-webpack-plugin');
6+
const ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
7+
8+
// #region constants`
9+
const nodeModulesDir = path.join(__dirname, 'node_modules');
10+
const indexFile = path.join(__dirname, 'src/index.tsx');
11+
// #endregion
12+
13+
const config = {
14+
target: 'web',
15+
mode: 'development',
16+
devtool: 'source-map',
17+
entry: {
18+
app: [indexFile],
19+
},
20+
output: {
21+
path: path.join(__dirname, '/../docs/assets'),
22+
publicPath: '/assets/',
23+
filename: '[name].[hash].js',
24+
chunkFilename: '[name].[hash].js',
25+
},
26+
resolve: {
27+
modules: ['node_modules'],
28+
extensions: ['.css', '.json', '.js', '.jsx', '.ts', '.tsx'],
29+
},
30+
module: {
31+
rules: [
32+
{
33+
test: /\.ts(x)?$/,
34+
use: ['awesome-typescript-loader'],
35+
exclude: [nodeModulesDir],
36+
},
37+
{
38+
test: /\.css$/,
39+
use: ['style-loader', 'css-loader'],
40+
},
41+
{
42+
test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
43+
use: [
44+
{
45+
loader: 'url-loader',
46+
options: {
47+
limit: 100000,
48+
name: '[name].[ext]',
49+
},
50+
},
51+
],
52+
},
53+
],
54+
},
55+
optimization: {
56+
runtimeChunk: false,
57+
splitChunks: {
58+
cacheGroups: {
59+
commons: {
60+
test: /[\\/]node_modules[\\/]/,
61+
name: 'vendors',
62+
chunks: 'all',
63+
},
64+
styles: {
65+
name: 'styles',
66+
test: /\.css$/,
67+
chunks: 'all',
68+
enforce: true,
69+
},
70+
},
71+
},
72+
},
73+
plugins: [
74+
new HtmlWebpackPlugin({
75+
template: 'src/index.html',
76+
filename: '../index.html', // hack since outPut path would place in '/dist/assets/' in place of '/dist/'
77+
}),
78+
new webpack.DefinePlugin({
79+
'process.env': {
80+
NODE_ENV: JSON.stringify('dev'),
81+
},
82+
}),
83+
new ModernizrWebpackPlugin({
84+
htmlWebpackPlugin: true,
85+
}),
86+
new MiniCssExtractPlugin({
87+
filename: '[name].[hash].css',
88+
chunkFilename: '[id].[hash].css',
89+
}),
90+
new workboxPlugin.GenerateSW({
91+
swDest: 'sw.js',
92+
clientsClaim: true,
93+
skipWaiting: true,
94+
}),
95+
],
96+
};
97+
98+
module.exports = config;

‎front/webpack.hot.reload.config.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
const webpack = require('webpack');
2+
const path = require('path');
3+
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
4+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5+
const HtmlWebpackPlugin = require('html-webpack-plugin');
6+
7+
// #region constants
8+
const nodeModulesDir = path.join(__dirname, 'node_modules');
9+
const srcInclude = path.join(__dirname, 'src');
10+
const srcExclude = path.join(__dirname, 'test');
11+
const indexFile = path.join(__dirname, 'src/index.tsx');
12+
// #endregion
13+
14+
const config = {
15+
mode: 'development',
16+
target: 'web',
17+
devtool: 'eval-source-map',
18+
entry: {
19+
app: [indexFile],
20+
},
21+
output: {
22+
path: path.join(__dirname, 'docs'),
23+
filename: '[name].js',
24+
chunkFilename: '[name].js',
25+
},
26+
resolve: {
27+
modules: ['node_modules'],
28+
extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.json'],
29+
},
30+
module: {
31+
rules: [
32+
{
33+
test: /\.ts(x)?$/,
34+
use: ['awesome-typescript-loader'],
35+
exclude: [nodeModulesDir],
36+
},
37+
{
38+
test: /\.css$/,
39+
use: ['style-loader', 'css-loader'],
40+
},
41+
{
42+
test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
43+
use: [
44+
{
45+
loader: 'url-loader',
46+
options: {
47+
limit: 100000,
48+
name: '[name].[ext]',
49+
},
50+
},
51+
],
52+
},
53+
],
54+
},
55+
optimization: {
56+
runtimeChunk: false,
57+
splitChunks: {
58+
cacheGroups: {
59+
commons: {
60+
test: /[\\/]node_modules[\\/]/,
61+
name: 'vendors',
62+
chunks: 'all',
63+
},
64+
styles: {
65+
name: 'styles',
66+
test: /\.css$/,
67+
chunks: 'all',
68+
enforce: true,
69+
},
70+
},
71+
},
72+
},
73+
devServer: {
74+
host: 'localhost',
75+
port: 3001,
76+
historyApiFallback: true,
77+
contentBase: path.join(__dirname, 'temp'),
78+
headers: { 'Access-Control-Allow-Origin': '*' },
79+
},
80+
plugins: [
81+
new webpack.HotModuleReplacementPlugin(),
82+
new HtmlWebpackPlugin({
83+
template: 'index.html',
84+
}),
85+
new webpack.NamedModulesPlugin(),
86+
new webpack.DefinePlugin({
87+
'process.env': {
88+
NODE_ENV: JSON.stringify('dev'),
89+
},
90+
}),
91+
new ProgressBarPlugin({
92+
format: 'Build [:bar] :percent (:elapsed seconds)',
93+
clear: false,
94+
}),
95+
],
96+
};
97+
98+
module.exports = config;

0 commit comments

Comments
 (0)