如何使用 webpack 3 缩小 CSS 样式答案

【问题标题】：How to minify css styles using webpack 3如何使用 webpack 3 缩小 CSS 样式
【发布时间】：2019-04-05 02:53:58
【问题描述】：

我想缩小/优化我的 css 以用于生产，但由于某种原因，它在我当前的实现中显示错误。我的 webpack 3 config.production.js 看起来像这样：

var webpack = require("webpack");
var path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");


module.exports = {
    entry: [
        "./src/index.tsx","./src/assets/css/styles.css"
    ],

    output: {
        filename: "bundle.js",
        publicPath: "/",
        path: path.resolve(__dirname, "dist")
    },

    // Enable sourcemaps for debugging webpack's output.
    // devtool: "cheap-module-source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new ExtractTextPlugin("styles.css"),
    ],

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, use: ["awesome-typescript-loader"] },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { test: /\.js$/, enforce: "pre", use: "source-map-loader" },
            { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }
        ],
        loaders: [ {
            test: /\.js|.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
        }, {
            test: /\.(jpe?g|png|gif|svg)$/i,
            loaders: [
                'file?hash=sha512&digest=hex&name=[hash].[ext]',
                'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
            ]
        } ]
    }
};

多 ./src/index.tsx ./src/assets/css/styles.css 中的错误找不到模块：错误：无法解析“C:\Users\iluli\Documents\socfinder_search\frontend”中的“style-loader” @multi ./src/index.tsx ./src/assets/css/styles.css npm 错误！代码生命周期 npm 错误！错误号 2 npm 错误！ socfinder-search@1.0.0 构建：webpack --config webpack.prod.config.js -p npm 错误！退出状态 2 npm 错误！ npm 错误！在 socfinder-search@1.0.0 构建脚本中失败。 npm 错误！这可能不是 npm 的问题。上面可能还有额外的日志输出。

我无法在构建文件夹中看到我的 css 文件。

更新：安装 css-loader 后，style.css 会生成到 build 中，但 build css 和 dev css 之间没有区别。我希望产品有一个缩小版本的 css ，例如一行中的所有 css。

【问题讨论】：

您似乎缺少style-loader 模块：npm install style-loader --save-dev
添加了现在已经没有错误了，而且构建文件夹中也没有生成.css文件。似乎它正在生成它到 ./node_modules/css-loader!./src/assets/css/styles.css
我已经有 bundle.js 了，我还需要添加 bundle.css 和 bundle.jss 一样吗，你有什么例子吗？

标签： javascript css node.js webpack frontend

【解决方案1】：

将样式加载器添加到依赖列表中：

npm install style-loader --save-dev

【讨论】：

我已经添加了这个，我可以看到build文件夹下生成的styles.css，但是如果我想让它在一行中优化或缩小所有css怎么样。
那将是关于stackoverflow的另一个问题。
我仅限于在 2 小时内对 stackoverflow 提出问题，你介意分享一个链接或举例说明如何使用 webpack 缩小 css，如果这不是缩小我我想知道我用这个 ExtractTextPlugin 做了什么？
其实我的问题是如何使用 webpack 缩小 css，所以我想你已经可以在这里回答了！

【解决方案2】：

尝试在 css-loader 中添加“最小化”选项：

{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader", options: { minimize: true} }) }

取自here

【讨论】：