Webpack 2 minify css

Question

this is my first webpack configuration. I'm using webpack 2 but I cannot generate a main.min.css.

The file main.css contain a plain css (no sass/scss/less etc..).

//main.css
body {
    width: 100% !important;
    height: 100% !important;
}

This is my webpack.config.js:

const style = require('./public/assets/css/main.css');
const path = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                        options: {
                             minimize: true
                        }
                    }
                ]
            }
        ]
    },
    entry: './public/assets/js/main.js',
    output: {
        filename: 'main.min.js',
        path: path.resolve(__dirname, 'dist')
    }
};

When I run webpack, I got this message:

..\PersonalWebsite\public\assets\css\main.css:1
(function (exports, require, module, __filename, __dirname) { body {
                                                                   ^

SyntaxError: Unexpected token {
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\PersonalProjects\PersonalWebsite\webpack.config.js:1:77)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Bock\AppData\Roaming\npm-cache\_logs\2017-12-24T11_04_39_704Z-debug.log

I'm not able to understand what is wrong. I'm ready the documentation about webpack but I think there is something in the configuration that not work.

Answer 1

Please try to do this

change your webpack.config.js to this code

var path = require("path");
module.exports = {
  entry: {
    app: ['./public/assets/js/main.js','./public/assets/css/main.css']

  },
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist/",
    filename: "main.min.js"
  },
  watch:true,
    module:{
        loaders:[
            {test: /\.css$/,loader: "style-loader!css-loader"},
        ]
    }

};

Don't forget to remove the require('./public/assets/css/main.css'); from your main.js