diff --git a/webpack.config.js b/webpack.config.js index 1559769..7aff01a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,21 +7,21 @@ const WorkboxWebpackPlugin = require("workbox-webpack-plugin"); const isProduction = process.env.NODE_ENV == "production"; -const stylesHandler = isProduction - ? MiniCssExtractPlugin.loader - : "style-loader"; +const minimiseCSS = isProduction ? "compressed" : "expanded"; const config = { - entry: { app: "./src/js/app.js", - style: ["./src/scss/styles.scss"] - }, + entry:{ "scripts": "./src/js/app.js", + "styles": "./src/scss/styles.scss"}, output: { path: path.resolve(__dirname, "public"), }, - devServer: { + devServer: { open: true, host: "localhost", }, + optimization: { + minimize: false, + }, plugins: [ new HtmlWebpackPlugin({ template: "src/index.html", @@ -36,13 +36,24 @@ const config = { 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"], + use: [ + { + loader: MiniCssExtractPlugin.loader + }, + { + loader: "css-loader", + }, + { + loader: 'sass-loader', + options: { + sassOptions: { + outputStyle: minimiseCSS, + } + } + }, + ], }, { test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, @@ -62,14 +73,17 @@ const config = { }; module.exports = () => { - if (isProduction) { + if (isProduction) { config.mode = "production"; - - config.plugins.push(new MiniCssExtractPlugin()); - + config.plugins.push(new MiniCssExtractPlugin({ + filename: "style.min.css", + })); config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { - config.mode = "development"; + config.plugins.push(new MiniCssExtractPlugin({ + filename: "style.css", + })); + config.mode = "development"; } return config; };