|
|
|
|
@ -10,6 +10,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
|
|
|
|
|
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
|
|
|
|
import CopyPlugin from 'copy-webpack-plugin';
|
|
|
|
|
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
|
|
|
|
|
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
|
|
|
|
|
import fs from 'fs';
|
|
|
|
|
import WorkboxPlugin from 'workbox-webpack-plugin';
|
|
|
|
|
import { workboxPluginPattern } from './utils';
|
|
|
|
|
@ -26,6 +27,7 @@ const ROOT_PATH = path.resolve(__dirname, '../');
|
|
|
|
|
const DIST_PATH = path.resolve(ROOT_PATH, './dist');
|
|
|
|
|
const ASSET_PATH = process.env.ASSET_PATH || '/';
|
|
|
|
|
const PORT = Number(process.env.PORT || 11011);
|
|
|
|
|
const ANALYSIS = process.env.ANALYSIS === 'true';
|
|
|
|
|
|
|
|
|
|
declare module 'webpack' {
|
|
|
|
|
interface Configuration {
|
|
|
|
|
@ -38,87 +40,7 @@ const NODE_ENV = process.env.NODE_ENV ?? 'production';
|
|
|
|
|
const isDev = NODE_ENV === 'development';
|
|
|
|
|
const mode = isDev ? 'development' : 'production';
|
|
|
|
|
|
|
|
|
|
const config: Configuration = {
|
|
|
|
|
mode,
|
|
|
|
|
entry: {
|
|
|
|
|
app: path.resolve(ROOT_PATH, './src/index.tsx'),
|
|
|
|
|
},
|
|
|
|
|
output: {
|
|
|
|
|
path: DIST_PATH,
|
|
|
|
|
filename: '[name].[contenthash].js',
|
|
|
|
|
publicPath: ASSET_PATH,
|
|
|
|
|
},
|
|
|
|
|
devServer: {
|
|
|
|
|
port: PORT,
|
|
|
|
|
historyApiFallback: true,
|
|
|
|
|
static: {
|
|
|
|
|
directory: path.resolve(ROOT_PATH, './dist'),
|
|
|
|
|
},
|
|
|
|
|
client: {
|
|
|
|
|
overlay: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
module: {
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
test: /\.tsx?$/,
|
|
|
|
|
exclude: /node_modules/,
|
|
|
|
|
loader: 'esbuild-loader',
|
|
|
|
|
options: {
|
|
|
|
|
loader: 'tsx',
|
|
|
|
|
target: 'es2015',
|
|
|
|
|
tsconfigRaw: require('../tsconfig.json'),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
test: /\.(less|css)$/,
|
|
|
|
|
use: [
|
|
|
|
|
{
|
|
|
|
|
loader: MiniCssExtractPlugin.loader,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
loader: 'css-loader',
|
|
|
|
|
options: {
|
|
|
|
|
// https://github.com/webpack-contrib/css-loader#auto
|
|
|
|
|
modules: {
|
|
|
|
|
auto: /\.module\.\w+$/i,
|
|
|
|
|
localIdentName: '[path][name]__[local]--[hash:base64:5]',
|
|
|
|
|
},
|
|
|
|
|
sourceMap: process.env.NODE_ENV !== 'production',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
loader: 'postcss-loader',
|
|
|
|
|
options: {
|
|
|
|
|
postcssOptions: {
|
|
|
|
|
config: path.resolve(ROOT_PATH, 'postcss.config.js'),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
loader: 'less-loader',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
test: /\.(png|jpg|gif|woff|woff2|svg|eot|ttf)$/,
|
|
|
|
|
loader: 'url-loader',
|
|
|
|
|
options: {
|
|
|
|
|
limit: 8192,
|
|
|
|
|
name: 'assets/[name].[hash:7].[ext]',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
resolve: {
|
|
|
|
|
extensions: ['.tsx', '.ts', '.js', '.css'],
|
|
|
|
|
plugins: [
|
|
|
|
|
new TsconfigPathsPlugin({
|
|
|
|
|
configFile: path.resolve(ROOT_PATH, './tsconfig.json'),
|
|
|
|
|
}),
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
plugins: [
|
|
|
|
|
const plugins: Configuration['plugins'] = [
|
|
|
|
|
new DefinePlugin({
|
|
|
|
|
'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
|
|
|
|
|
'process.env.SERVICE_URL': JSON.stringify(process.env.SERVICE_URL),
|
|
|
|
|
@ -205,7 +127,93 @@ const config: Configuration = {
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
}),
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
if (ANALYSIS) {
|
|
|
|
|
plugins.push(new BundleAnalyzerPlugin() as any);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const config: Configuration = {
|
|
|
|
|
mode,
|
|
|
|
|
entry: {
|
|
|
|
|
app: path.resolve(ROOT_PATH, './src/index.tsx'),
|
|
|
|
|
},
|
|
|
|
|
output: {
|
|
|
|
|
path: DIST_PATH,
|
|
|
|
|
filename: '[name].[contenthash].js',
|
|
|
|
|
publicPath: ASSET_PATH,
|
|
|
|
|
},
|
|
|
|
|
devServer: {
|
|
|
|
|
port: PORT,
|
|
|
|
|
historyApiFallback: true,
|
|
|
|
|
static: {
|
|
|
|
|
directory: path.resolve(ROOT_PATH, './dist'),
|
|
|
|
|
},
|
|
|
|
|
client: {
|
|
|
|
|
overlay: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
module: {
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
test: /\.tsx?$/,
|
|
|
|
|
exclude: /node_modules/,
|
|
|
|
|
loader: 'esbuild-loader',
|
|
|
|
|
options: {
|
|
|
|
|
loader: 'tsx',
|
|
|
|
|
target: 'es2015',
|
|
|
|
|
tsconfigRaw: require('../tsconfig.json'),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
test: /\.(less|css)$/,
|
|
|
|
|
use: [
|
|
|
|
|
{
|
|
|
|
|
loader: MiniCssExtractPlugin.loader,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
loader: 'css-loader',
|
|
|
|
|
options: {
|
|
|
|
|
// https://github.com/webpack-contrib/css-loader#auto
|
|
|
|
|
modules: {
|
|
|
|
|
auto: /\.module\.\w+$/i,
|
|
|
|
|
localIdentName: '[path][name]__[local]--[hash:base64:5]',
|
|
|
|
|
},
|
|
|
|
|
sourceMap: process.env.NODE_ENV !== 'production',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
loader: 'postcss-loader',
|
|
|
|
|
options: {
|
|
|
|
|
postcssOptions: {
|
|
|
|
|
config: path.resolve(ROOT_PATH, 'postcss.config.js'),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
loader: 'less-loader',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
test: /\.(png|jpg|gif|woff|woff2|svg|eot|ttf)$/,
|
|
|
|
|
loader: 'url-loader',
|
|
|
|
|
options: {
|
|
|
|
|
limit: 8192,
|
|
|
|
|
name: 'assets/[name].[hash:7].[ext]',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
resolve: {
|
|
|
|
|
extensions: ['.tsx', '.ts', '.js', '.css'],
|
|
|
|
|
plugins: [
|
|
|
|
|
new TsconfigPathsPlugin({
|
|
|
|
|
configFile: path.resolve(ROOT_PATH, './tsconfig.json'),
|
|
|
|
|
}),
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
plugins,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default config;
|
|
|
|
|
|
moonrailgun
4 years ago