yacd/webpack.config.js

197 lines
5.3 KiB
JavaScript
Raw Normal View History

2018-10-20 20:32:02 +08:00
'use strict';
const path = require('path');
const webpack = require('webpack');
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');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2019-12-20 23:02:10 +08:00
const ReactRefreshWebpackPlugin = require('@hsjs/react-refresh-webpack-plugin');
// const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
2019-08-29 22:51:22 +08:00
const pkg = require('./package.json');
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',
inject: false,
filename: 'index.html'
});
const definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(isDev),
2019-08-29 22:51:22 +08:00
__VERSION__: JSON.stringify(pkg.version),
'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')(),
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)',
'--breakpoint-large': 'screen and (min-width: 60em)'
}
}
]
}),
require('postcss-nested')(),
require('autoprefixer')(),
require('postcss-extend-rule')(),
isDev ? false : require('cssnano')()
].filter(Boolean);
const cssExtractPlugin = new MiniCssExtractPlugin({
2019-11-26 23:25:06 +08:00
filename: isDev ? '[name].css' : '[name].[contenthash].css'
});
const bundleAnalyzerPlugin = new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: 'report.html',
openAnalyzer: false
});
const plugins = [
html,
definePlugin,
new CopyPlugin([{ from: 'assets/*', flatten: true }]),
new CleanWebpackPlugin(),
// 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(),
isDev ? false : cssExtractPlugin,
isDev ? false : bundleAnalyzerPlugin
].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']
app: ['./src/app.js']
2019-11-19 23:53:25 +08:00
},
output: {
path: path.resolve(__dirname, 'public'),
// use contenthash instead of chunkhash to take advantage of caching
filename: isDev ? '[name].bundle.js' : '[name].[contenthash].js',
publicPath: ''
},
2019-11-26 23:25:06 +08:00
mode: isDev ? 'development' : 'production',
2018-10-20 20:32:02 +08:00
module: {
rules: [
2019-11-26 23:25:06 +08:00
{
test: /\.svg$/,
use: ['svg-sprite-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
2019-09-02 23:25:41 +08:00
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
},
{
test: /\.(ttf|eot|woff|woff2)(\?.+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
]
},
2019-11-26 23:25:06 +08:00
{
test: /\.css$/,
exclude: /\.module\.css$/,
use: [
isDev
? {
loader: 'style-loader'
}
: MiniCssExtractPlugin.loader,
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins: postcssPlugins
}
}
].filter(Boolean)
},
{
test: /\.module\.css$/,
use: [
isDev
? {
loader: 'style-loader'
}
: MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
localIdentName: isDev
? '[path]_[name]_[local]_[hash:base64:5]'
: '[hash:base64:10]'
}
}
},
{
loader: 'postcss-loader',
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
);
}
},
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)
);
}
2018-10-20 20:32:02 +08:00
}
}
},
2019-09-02 23:25:41 +08:00
minimizer: [new TerserPlugin()]
2018-10-20 20:32:02 +08:00
},
plugins
};