From 77549ea84f48ab0d254e63f861bae9d223b6f515 Mon Sep 17 00:00:00 2001 From: Dooglet Date: Sun, 23 Jan 2022 19:12:32 +0000 Subject: [PATCH] webpack configurations --- webpack.config.js | 75 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 webpack.config.js diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..1559769 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,75 @@ +// Generated using webpack-cli https://github.com/webpack/webpack-cli + +const path = require("path"); +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const WorkboxWebpackPlugin = require("workbox-webpack-plugin"); + +const isProduction = process.env.NODE_ENV == "production"; + +const stylesHandler = isProduction + ? MiniCssExtractPlugin.loader + : "style-loader"; + +const config = { + entry: { app: "./src/js/app.js", + style: ["./src/scss/styles.scss"] + }, + output: { + path: path.resolve(__dirname, "public"), + }, + devServer: { + open: true, + host: "localhost", + }, + plugins: [ + new HtmlWebpackPlugin({ + template: "src/index.html", + }), + + // Add your plugins here + // Learn more about plugins from https://webpack.js.org/configuration/plugins/ + ], + module: { + rules: [ + { + test: /\.(js|jsx)$/i, + loader: "babel-loader", + }, + { + test: /\.css$/i, + use: [stylesHandler, "css-loader"], + }, + { + test: /\.s[ac]ss$/i, + use: [stylesHandler, "css-loader", "sass-loader"], + }, + { + test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, + use: { + loader: "file-loader", + options: { + name: "[name].[ext]", + outputPath: "assets", + }, + }, + }, + + // Add your rules for custom modules here + // Learn more about loaders from https://webpack.js.org/loaders/ + ], + }, +}; + +module.exports = () => { + if (isProduction) { + config.mode = "production"; + + config.plugins.push(new MiniCssExtractPlugin()); + + config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); + } else { + config.mode = "development"; + } + return config; +};