2018-10-20 20:32:02 +08:00
|
|
|
const path = require('path');
|
|
|
|
const webpack = require('webpack');
|
2018-10-30 16:36:51 +08:00
|
|
|
const TerserPlugin = require('terser-webpack-plugin');
|
2019-12-27 22:53:00 +08:00
|
|
|
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
|
|
|
|
const HTMLPlugin = require('html-webpack-plugin');
|
2019-01-05 23:03:41 +08:00
|
|
|
const CopyPlugin = require('copy-webpack-plugin');
|
2019-05-27 23:03:21 +08:00
|
|
|
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
2020-04-26 17:35:03 +08:00
|
|
|
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
|
|
|
|
const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');
|
2019-04-12 23:34:50 +08:00
|
|
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
2019-12-20 23:02:10 +08:00
|
|
|
const ReactRefreshWebpackPlugin = require('@hsjs/react-refresh-webpack-plugin');
|
|
|
|
|
2019-08-29 22:51:22 +08:00
|
|
|
const pkg = require('./package.json');
|
2019-04-12 23:34:50 +08:00
|
|
|
|
|
|
|
process.env.BABEL_ENV = process.env.NODE_ENV;
|
2018-10-20 20:32:02 +08:00
|
|
|
const isDev = process.env.NODE_ENV !== 'production';
|
|
|
|
|
|
|
|
const html = new HTMLPlugin({
|
|
|
|
title: 'yacd - Yet Another Clash Dashboard',
|
|
|
|
template: 'src/index.template.ejs',
|
2020-04-16 15:18:28 +08:00
|
|
|
scriptLoading: 'defer',
|
|
|
|
filename: 'index.html',
|
2018-10-20 20:32:02 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
const definePlugin = new webpack.DefinePlugin({
|
|
|
|
__DEV__: JSON.stringify(isDev),
|
2019-08-29 22:51:22 +08:00
|
|
|
__VERSION__: JSON.stringify(pkg.version),
|
2020-04-16 15:18:28 +08:00
|
|
|
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
|
2018-10-20 20:32:02 +08:00
|
|
|
});
|
|
|
|
|
2019-11-26 23:25:06 +08:00
|
|
|
const postcssPlugins = () =>
|
|
|
|
[
|
|
|
|
require('postcss-import')(),
|
2019-12-27 16:29:10 +08:00
|
|
|
require('postcss-simple-vars')(),
|
2019-11-26 23:25:06 +08:00
|
|
|
require('postcss-custom-media')({
|
|
|
|
importFrom: [
|
|
|
|
{
|
|
|
|
customMedia: {
|
|
|
|
'--breakpoint-not-small': 'screen and (min-width: 30em)',
|
|
|
|
'--breakpoint-medium':
|
|
|
|
'screen and (min-width: 30em) and (max-width: 60em)',
|
2020-04-16 15:18:28 +08:00
|
|
|
'--breakpoint-large': 'screen and (min-width: 60em)',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
2019-11-26 23:25:06 +08:00
|
|
|
}),
|
|
|
|
require('postcss-nested')(),
|
|
|
|
require('autoprefixer')(),
|
|
|
|
require('postcss-extend-rule')(),
|
2020-04-16 15:18:28 +08:00
|
|
|
isDev ? false : require('cssnano')(),
|
2019-11-26 23:25:06 +08:00
|
|
|
].filter(Boolean);
|
2019-04-12 23:34:50 +08:00
|
|
|
|
|
|
|
const cssExtractPlugin = new MiniCssExtractPlugin({
|
2020-04-16 15:18:28 +08:00
|
|
|
filename: isDev ? '[name].css' : '[name].[contenthash].css',
|
2019-04-12 23:34:50 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
const bundleAnalyzerPlugin = new BundleAnalyzerPlugin({
|
|
|
|
analyzerMode: 'static',
|
|
|
|
reportFilename: 'report.html',
|
2020-04-16 15:18:28 +08:00
|
|
|
openAnalyzer: false,
|
2019-04-12 23:34:50 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
const plugins = [
|
|
|
|
html,
|
|
|
|
definePlugin,
|
2020-04-26 17:35:03 +08:00
|
|
|
new ForkTsCheckerWebpackPlugin({ eslint: false }),
|
|
|
|
new ForkTsCheckerNotifierWebpackPlugin({
|
|
|
|
title: 'TypeScript',
|
|
|
|
excludeWarnings: false,
|
|
|
|
}),
|
2020-05-24 19:26:59 +08:00
|
|
|
new CopyPlugin({ patterns: [{ from: 'assets/*', flatten: true }] }),
|
2019-05-27 23:03:21 +08:00
|
|
|
new CleanWebpackPlugin(),
|
2019-06-12 19:49:11 +08:00
|
|
|
// chart.js requires moment
|
|
|
|
// and we don't need locale stuff in moment
|
|
|
|
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
|
2019-12-20 23:02:10 +08:00
|
|
|
// https://github.com/pmmmwh/react-refresh-webpack-plugin
|
|
|
|
isDev ? new ReactRefreshWebpackPlugin({ disableRefreshCheck: true }) : false,
|
2019-12-27 22:53:00 +08:00
|
|
|
// isDev ? false : new webpack.HashedModuleIdsPlugin(),
|
2019-04-12 23:34:50 +08:00
|
|
|
isDev ? false : cssExtractPlugin,
|
2020-04-16 15:18:28 +08:00
|
|
|
isDev ? false : bundleAnalyzerPlugin,
|
2019-04-12 23:34:50 +08:00
|
|
|
].filter(Boolean);
|
|
|
|
|
2018-10-20 20:32:02 +08:00
|
|
|
module.exports = {
|
2019-11-19 23:53:25 +08:00
|
|
|
// https://webpack.js.org/configuration/devtool/
|
|
|
|
devtool: isDev ? 'eval-source-map' : false,
|
|
|
|
entry: {
|
2019-12-20 23:02:10 +08:00
|
|
|
// app: ['react-hot-loader/patch', './src/app.js']
|
2020-04-16 15:18:28 +08:00
|
|
|
app: ['./src/app.js'],
|
2019-11-19 23:53:25 +08:00
|
|
|
},
|
2020-04-26 17:35:03 +08:00
|
|
|
context: __dirname,
|
2019-11-19 23:53:25 +08:00
|
|
|
output: {
|
|
|
|
path: path.resolve(__dirname, 'public'),
|
2020-01-04 14:34:44 +08:00
|
|
|
filename: isDev ? '[name].js' : '[name].[contenthash].js',
|
2020-04-16 15:18:28 +08:00
|
|
|
publicPath: '',
|
2019-11-19 23:53:25 +08:00
|
|
|
},
|
2019-11-26 23:25:06 +08:00
|
|
|
mode: isDev ? 'development' : 'production',
|
2020-04-26 17:35:03 +08:00
|
|
|
resolve: {
|
|
|
|
extensions: ['.ts', '.tsx', '.js'],
|
|
|
|
},
|
2018-10-20 20:32:02 +08:00
|
|
|
module: {
|
|
|
|
rules: [
|
2020-04-26 17:35:03 +08:00
|
|
|
{
|
|
|
|
test: /\.tsx?$/,
|
|
|
|
loader: 'ts-loader',
|
|
|
|
options: {
|
|
|
|
// disable type checker - we will use it in fork plugin
|
|
|
|
transpileOnly: true,
|
|
|
|
},
|
|
|
|
},
|
2019-04-12 23:34:50 +08:00
|
|
|
{
|
|
|
|
test: /\.js$/,
|
|
|
|
exclude: /node_modules/,
|
2020-04-16 15:18:28 +08:00
|
|
|
use: { loader: 'babel-loader', options: { cacheDirectory: true } },
|
2019-04-12 23:34:50 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
test: /\.(ttf|eot|woff|woff2)(\?.+)?$/,
|
2020-04-16 15:18:28 +08:00
|
|
|
use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }],
|
2019-04-12 23:34:50 +08:00
|
|
|
},
|
2019-11-26 23:25:06 +08:00
|
|
|
{
|
|
|
|
test: /\.css$/,
|
|
|
|
exclude: /\.module\.css$/,
|
|
|
|
use: [
|
2020-01-04 14:34:44 +08:00
|
|
|
isDev ? { loader: 'style-loader' } : MiniCssExtractPlugin.loader,
|
2019-11-26 23:25:06 +08:00
|
|
|
{ loader: 'css-loader' },
|
2020-04-16 15:18:28 +08:00
|
|
|
{ loader: 'postcss-loader', options: { plugins: postcssPlugins } },
|
|
|
|
].filter(Boolean),
|
2019-11-26 23:25:06 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
test: /\.module\.css$/,
|
|
|
|
use: [
|
2020-01-04 14:34:44 +08:00
|
|
|
isDev ? { loader: 'style-loader' } : MiniCssExtractPlugin.loader,
|
2019-11-26 23:25:06 +08:00
|
|
|
{
|
|
|
|
loader: 'css-loader',
|
|
|
|
options: {
|
|
|
|
modules: {
|
|
|
|
localIdentName: isDev
|
|
|
|
? '[path]_[name]_[local]_[hash:base64:5]'
|
2020-04-16 15:18:28 +08:00
|
|
|
: '[hash:base64:10]',
|
|
|
|
},
|
|
|
|
},
|
2019-11-26 23:25:06 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
loader: 'postcss-loader',
|
2020-04-16 15:18:28 +08:00
|
|
|
options: { plugins: postcssPlugins },
|
|
|
|
},
|
|
|
|
].filter(Boolean),
|
|
|
|
},
|
|
|
|
],
|
2018-10-20 20:32:02 +08:00
|
|
|
},
|
|
|
|
optimization: {
|
2019-12-27 22:53:00 +08:00
|
|
|
moduleIds: isDev ? 'named' : 'hashed',
|
2019-11-26 23:25:06 +08:00
|
|
|
runtimeChunk: 'single',
|
2018-10-20 20:32:02 +08:00
|
|
|
splitChunks: {
|
|
|
|
chunks: 'all',
|
|
|
|
cacheGroups: {
|
2019-06-22 00:10:21 +08:00
|
|
|
'core-js': {
|
2019-12-27 22:53:00 +08:00
|
|
|
test(module, _chunks) {
|
2019-06-22 00:10:21 +08:00
|
|
|
return (
|
|
|
|
module.resource &&
|
|
|
|
module.resource.indexOf('node_modules/core-js/') >= 0
|
|
|
|
);
|
2020-04-16 15:18:28 +08:00
|
|
|
},
|
2019-06-22 00:10:21 +08:00
|
|
|
},
|
2018-10-21 15:24:38 +08:00
|
|
|
react: {
|
2019-12-27 22:53:00 +08:00
|
|
|
test(module, _chunks) {
|
2019-06-22 00:10:21 +08:00
|
|
|
return (
|
|
|
|
module.resource &&
|
|
|
|
(module.resource.indexOf('node_modules/@hot-loader/react-dom/') >=
|
|
|
|
0 ||
|
|
|
|
module.resource.indexOf('node_modules/react-dom/') >= 0 ||
|
|
|
|
module.resource.indexOf('node_modules/react/') >= 0)
|
|
|
|
);
|
2020-04-16 15:18:28 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2018-10-20 20:32:02 +08:00
|
|
|
},
|
2020-04-16 15:18:28 +08:00
|
|
|
minimizer: [new TerserPlugin()],
|
2018-10-20 20:32:02 +08:00
|
|
|
},
|
2020-04-16 15:18:28 +08:00
|
|
|
plugins,
|
2018-10-20 20:32:02 +08:00
|
|
|
};
|