const path = require('path'); const CleanWebpackPlugin = require("clean-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const HtmlWebpackPlugin = require('html-webpack-plugin'); const autoprefixer = require('autoprefixer'); const outputDirectory = "build"; module.exports = mode => { console.log('WEBPACK MODE: ', mode); const PROD = (mode.WEBPACK_BUILD || false) console.log('EXPORTS PROD: ', PROD); return { entry: PROD ? './src/branding.js' : './src/index.js', output: { library: 'Branding', libraryTarget: 'umd', path: path.resolve(__dirname, outputDirectory), filename: 'index.js', }, devtool: 'source-map', module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: ['react'] } } ] }, { test: /\.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: "css-loader", options: { modules: false, sourceMap: true, importLoader: 2 } }, "sass-loader" ] }, { test: /\.(cur|ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, use: { loader: 'file-loader', query: { name: '[name].[hash:8].[ext]', outputPath: './assets/media/', publicPath: '/' } } }, { test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/, use: { loader: 'url-loader', query: { limit: 10000, name: '[name].[hash:8].[ext]', outputPath: './assets/media/', publicPath: '/' } } } ] }, devServer: { historyApiFallback: true, port: 3000, open: true }, plugins: [ ...(PROD ? [new CleanWebpackPlugin([outputDirectory])] : []), new HtmlWebpackPlugin({ template: './public/index.html', }), new MiniCssExtractPlugin({ filename: "style.css", chunkFilename: "[name].css" }) ] } };