const { HotModuleReplacementPlugin, SourceMapDevToolPlugin } = require('webpack') const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const TerserPlugin = require('terser-webpack-plugin') const path = require('path') const lessLoader = { loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true, }, }, } module.exports = { cache: true, performance: false, mode: 'development', devtool: 'source-map', optimization: { minimizer: [ new CssMinimizerPlugin(), new TerserPlugin(), ], flagIncludedChunks: false, usedExports: false, sideEffects: false, concatenateModules: false, emitOnErrors: true, nodeEnv: 'development', minimize: false, }, output: { path: path.resolve(__dirname, 'dev_build'), pathinfo: true, }, stats: 'errors-warnings', module: { unsafeCache: true, rules: [ { test: /\.css$/i, use: [ MiniCssExtractPlugin.loader, 'css-loader' ], }, { test: /\.less$/i, exclude: path.resolve(__dirname, 'src/styles/include/'), use: [ MiniCssExtractPlugin.loader, 'css-loader', lessLoader, ], }, { test: /\.less$/i, include: path.resolve(__dirname, 'src/styles/include/'), use: [ 'style-loader', 'css-loader', lessLoader, ] }, ] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].[contenthash:8].css', }), new HotModuleReplacementPlugin(), new SourceMapDevToolPlugin({ filename: 'maps/[file].map' }), ], }