Webpack 2缩小了css

这是我的第一个webpack配置。我正在使用webpack 2，但我无法生成main.min.css。

main.css文件包含一个普通的css（没有sass / scss / less等...）。

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

这是我的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')
    }
};

当我运行webpack时，我收到了这条消息：

..\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

我无法理解什么是错的。我已经准备好了关于webpack的文档，但我认为配置中有些东西不起作用。

请尝试这样做

将您的webpack.config.js更改为此代码

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"},
        ]
    }

};

不要忘记从main.js中删除require('./public/assets/css/main.css');

Webpack 2缩小了css

这是我的第一个webpack配置。我正在使用webpack 2，但我无法生成main.min.css。

main.css文件包含一个普通的css（没有sass / scss / less等...）。

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

这是我的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')
    }
};

当我运行webpack时，我收到了这条消息：

..\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

我无法理解什么是错的。我已经准备好了关于webpack的文档，但我认为配置中有些东西不起作用。

请尝试这样做

将您的webpack.config.js更改为此代码

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"},
        ]
    }

};

不要忘记从main.js中删除require('./public/assets/css/main.css');