Webpack 2 缩小 css

Question

这是我的第一个 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! personalwebsite@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the personalwebsite@1.0.0 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\_logs17-12-24T11_04_39_704Z-debug.log

我不明白哪里出了问题。我已经准备好有关 webpack 的文档，但我认为配置中的某些内容不起作用。

Answer 1

请尝试这样做

将您的 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 2 minify css

css

node.js

webpack-2