Myujth

const webpack = require('webpack');
const combineLoaders = require('webpack-combine-loaders');
const ImageMinPlugin = require('imagemin-webpack-plugin').default;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebappWebpackPlugin = require('webapp-webpack-plugin');
const path = require('path');

const NODE_ENV = process.env.NODE_ENV || 'development';
const DEV_MODE = NODE_ENV !== 'production';
const PORT = process.env.PORT || 3000;
const FAVICON_DIR = './src/assets/favicon/favicon.png';
const ENTRY_CSS = path.resolve(__dirname, 'src/scss');
const NODE_MODULE_PATH = path.resolve(__dirname, 'node_modules')
console.log('ENTRY_CSS: ', ENTRY_CSS);
console.log('NODE_MODULE_PATH: ', NODE_MODULE_PATH);
const styleRules = () => [
 
 test: /.scss$/,
 exclude: [
 ENTRY_CSS,
 NODE_MODULE_PATH
 ],
 loader: combineLoaders([
 
 loader: 'style-loader',
 ,
 
 loader: 'css-loader',
 query: 
 modules: true,
 importLoaders: 1,
 localIdentName: '[local]--[hash:base64:5]',
 ,
 ,
 
 loader: 'postcss-loader',
 options: 
 plugins: function () 
 return [
 require('precss'),
 require('autoprefixer')
 ];
 
 
 ,
 
 loader: 'sass-loader',
 query: 
 includePaths: ['./src'],
 ,
 ,
 ]),
 ,
 
 test: /.css$/,
 include: [
 path.resolve(__dirname, 'src')
 ],
 loader: combineLoaders([
 
 loader: 'style-loader',
 ,
 
 loader: 'css-loader',
 query: 
 modules: true,
 importLoaders: 1,
 localIdentName: '[local]--[hash:base64:5]',
 ,
 ,
 ]),
 ,
 /**
 * for global style, import libs, no CSS module applied for those files imported here.
 */
 
 test: /.scss$/,
 include: [
 ENTRY_CSS,
 NODE_MODULE_PATH
 ],
 loader: combineLoaders([
 
 loader: 'style-loader',
 ,
 
 loader: 'css-loader',
 query: 
 modules: false,
 ,
 ,
 
 loader: 'postcss-loader',
 options: 
 plugins: function () 
 return [
 require('precss'),
 require('autoprefixer')
 ];
 
 
 ,
 
 loader: 'sass-loader',
 query: 
 includePaths: ['./src'],
 ,
 ,
 ]),
 ,
];

module.exports = 
 entry: ['./src/index.tsx'],
 mode: DEV_MODE ? 'development' : 'production',
 devtool: DEV_MODE ? 'source-map' : '',
 module: 
 rules: [
 
 test: /.tsx?$/,
 exclude: /node_modules/,
 use: [
 
 loader: 'babel-loader'
 ,
 
 loader: 'ts-loader',
 options: 
 configFile: DEV_MODE ? 'tsconfig.json' : 'tsconfig.deploy.json',
 ,
 ,

 ],
 ,
 ...styleRules(),
 svg)$/,
 use: [
 
 loader: 'file-loader',
 options: ,
 ,
 ],
 ,
 
 test: /.(ttf,
 ],
 ,
 resolve: 
 extensions: ['.tsx', '.ts', '.js', '.json'],
 ,
 output: 
 path: __dirname + '/dist',
 publicPath: '/',
 filename: 'bundle.[hash].js',
 ,
 devServer: 
 contentBase: './dist',
 compress: true,
 port: PORT,
 historyApiFallback: true,
 open: true,
 ,
 plugins: [
 new webpack.DefinePlugin(
 'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
 'process.env.PORT': JSON.stringify(PORT),
 ),
 new HtmlWebpackPlugin(
 template: './src/index.html',
 filename: 'index.html',
 ),
 ...(FAVICON_DIR ? [new WebappWebpackPlugin(FAVICON_DIR)] : ),
 new ImageMinPlugin(
 disable: DEV_MODE,
 pngquant: 
 quality: '95-100',
 ,
 test: /.(jpe?g),
 ],
;