const path = require('path'); const merge = require('webpack-merge'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const parts = require('./webpack.parts'); const TARGET = process.env.npm_lifecycle_event; process.env.BABEL_ENV = TARGET; const PATHS = { app: path.join(__dirname, 'src'), build: path.join(__dirname, 'build'), style: path.join(__dirname, 'styles', 'style.scss'), }; const common = { entry: { style: PATHS.style, app: PATHS.app, }, output: { path: PATHS.build, filename: '[name].js', }, plugins: [ new HtmlWebpackPlugin({ title: 'AudioIgniter', template: `${PATHS.app}/index.ejs`, }), ], devServer: { static: { directory: path.resolve('assets'), }, }, resolve: { extensions: ['.js', '.jsx'], }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', }, ], }, }; let config; // Detect how npm is run and branch based on that switch (TARGET) { case 'build': { config = merge( common, { mode: 'production', resolve: { modules: [path.resolve(__dirname), 'node_modules'], extensions: ['.js', '.jsx'], }, }, parts.minify(), parts.extractCSS(PATHS.style), parts.setFreeVariable('process.env.NODE_ENV', 'production'), ); break; } default: { config = merge( common, { mode: 'development', devtool: 'eval-source-map', }, parts.setupSass(PATHS.style), parts.devServer({ host: process.env.HOST, port: process.env.PORT, }), ); } } module.exports = config;