Is there some error in my code as files aren't compiling

Question

Webpack 4 isn't working for me. I mainly want it to compile SCSS to CSS here is the config file. Also, it does not throw any error just shows that it has been compiled. I'm sure it's lying :)

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
      App: './public/javascript/index.js'
  },
  devtool: "source-map",
  output: {
    path: path.resolve(__dirname, 'public', 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(scss|css)$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: "css-loader"
                // options: {
                //     minimize: {
                //         safe: true
                //     }
                // }
            },
            {
                loader: "postcss-loader",
                options: {
                    autoprefixer: {
                        browsers: ["last 2 versions"]
                    },
                    plugins: () => [
                        autoprefixer
                    ]
                },
            },
            {
                loader: "sass-loader",
                options: {}
            }
        ]
    },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "./public/dist/style.css",
      chunkFilename: "./public/dist/[id].css"
    })
  ]
};

Also here is are the scrips that I'm running

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "nodemon ./start.js --ignore /public",
    "dev": "concurrently \"npm run watch\" \"npm run assets\" --names \",\" --prefix name",
    "assets": "webpack-dev-server --mode development"
},

So it isn't compiling, throws no error, and tells that the code has been compiled but no file can be seen in the destination folder.

`webpack-dev-server` compiles in memory and opens a webserver for local development. You won't get a destination folder. To do that, use just `webpack --mode development` — lukas-reineke, Apr 02 '18 at 09:31
Thanks but even with `webpack --mode development`, it isn't giving me a separate css file. — Aditya Raj, Apr 02 '18 at 10:07
Where are you importing the css files? The webpack config should work. — lukas-reineke, Apr 02 '18 at 13:50
I'm importing them in projectFolder/public/dist I'm importing from projectFolder/public/javascript — Aditya Raj, Apr 02 '18 at 22:39
Sorry, yes I am getting the files but they were in a different folder. It created a public folder inside the dist folder because of the path mentioned in MiniCssExtractPlugin. Anyways...thanks for your time and help — Aditya Raj, Apr 02 '18 at 23:35

score 0 · Answer 1 · answered Apr 05 '18 at 15:15

0

Please refer to the link below. This is part of my config file for webpack 4. It extracts SASS to CSS. Though my problem is that I still haven't figured out a way to remove redundant CSS in webpack 4.

How to remove unused CSS using webpack 4?

answered Apr 05 '18 at 15:15

Hamed

1,351
9
23

Is there some error in my code as files aren't compiling

1 Answers1