152 lines
3.6 KiB
TypeScript
152 lines
3.6 KiB
TypeScript
import path from 'path';
|
|
|
|
// FIXME:
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';
|
|
import type { Configuration } from 'webpack';
|
|
|
|
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
|
import CopyWebpackPlugin from 'copy-webpack-plugin';
|
|
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
|
import ESLintPlugin from 'eslint-webpack-plugin';
|
|
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
|
|
import WebpackNotifierPlugin from 'webpack-notifier';
|
|
|
|
// FIXME: type of any
|
|
const config = (env: Record<string, any>, argv: Record<string, any>): Configuration => {
|
|
const devServerPort = process.env?.['SERVER_PORT'];
|
|
const isProd = argv.mode === 'production';
|
|
const getFilename = (ext: string): string => `[name]${isProd ? '-[fullhash]' : ''}.${ext}`;
|
|
const getSourceMap = () => (isProd ? false : 'cheap-source-map');
|
|
const getNotifyTitle = () => {
|
|
return !isProd ? `Start dev server on ${devServerPort} port` : 'Start building in production'
|
|
}
|
|
|
|
const extensions = ['.ts', '.tsx', '.js', '.jsx', '.json', '.scss'];
|
|
|
|
const getPluginList = (): any[] => {
|
|
const basePluginList = [
|
|
new WebpackNotifierPlugin({
|
|
emoji: true,
|
|
title: getNotifyTitle()
|
|
}),
|
|
|
|
new HtmlWebpackPlugin({
|
|
minify: isProd,
|
|
template: './index.html',
|
|
}),
|
|
|
|
new CopyWebpackPlugin({
|
|
patterns: [
|
|
{ from: 'assets', to: './assets' },
|
|
],
|
|
}),
|
|
|
|
new MiniCssExtractPlugin({
|
|
filename: getFilename('css'),
|
|
}),
|
|
];
|
|
|
|
if (!isProd) {
|
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
|
|
return [...basePluginList, new ESLintPlugin({
|
|
extensions: ['ts'],
|
|
failOnError: true,
|
|
})];
|
|
}
|
|
|
|
return basePluginList;
|
|
};
|
|
|
|
return {
|
|
context: path.resolve(__dirname, 'src'),
|
|
|
|
entry: [
|
|
// 'core-js/actual',
|
|
// 'regenerator-runtime/runtime',
|
|
'./polyfills.ts',
|
|
'./index.ts',
|
|
],
|
|
|
|
devtool: getSourceMap(),
|
|
|
|
output: {
|
|
path: path.resolve(__dirname, 'dist'),
|
|
filename: getFilename('js'),
|
|
clean: true,
|
|
},
|
|
|
|
resolve: {
|
|
extensions,
|
|
plugins: [new TsconfigPathsPlugin({})],
|
|
},
|
|
|
|
plugins: getPluginList(),
|
|
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.s[ac]ss$/i,
|
|
use: [
|
|
MiniCssExtractPlugin.loader,
|
|
{
|
|
loader: 'css-loader',
|
|
options: {
|
|
sourceMap: !isProd,
|
|
},
|
|
},
|
|
{
|
|
loader: 'sass-loader',
|
|
options: {
|
|
sourceMap: !isProd,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
|
|
{
|
|
test: /\.?ts$/,
|
|
exclude: /(node_modules|bower_components)/,
|
|
use: [
|
|
{
|
|
loader: 'babel-loader',
|
|
options: {
|
|
presets: [
|
|
[
|
|
'@babel/preset-env',
|
|
{
|
|
useBuiltIns: 'usage',
|
|
corejs: { version: "3.8", proposals: true }
|
|
}
|
|
],
|
|
],
|
|
}
|
|
},
|
|
{
|
|
loader: 'ts-loader',
|
|
options: {
|
|
transpileOnly: true,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
|
|
devServer: {
|
|
static: {
|
|
directory: path.join(__dirname, 'static'),
|
|
},
|
|
compress: true,
|
|
port: devServerPort || 80,
|
|
watchFiles: './src',
|
|
},
|
|
|
|
performance: {
|
|
maxAssetSize: 600000,
|
|
},
|
|
};
|
|
};
|
|
|
|
export default config;
|