代码之家  ›  专栏  ›  技术社区  ›  Mizlul

如何使用Webpack3缩小CSS样式

  •  0
  • Mizlul  · 技术社区  · 6 年前

    我想为生产缩小/优化我的CSS,但出于某种原因,它显示了我当前实现的错误。我的Webpack3 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'
                ]
            } ]
        }
    };
    

    multi中出错。/src/index.tsx./src/assets/css/styles.css 找不到模块:错误:无法解析“c:\users\iluli\documents\socfinder\u search\frontend”中的“样式加载程序” @多/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加载器之后,现在styles.css被生成到build中,但是build css和dev css没有区别。我希望产品有一个缩小版的CSS,为所有的CSS在一行。

    2 回复  |  直到 6 年前
        1
  •  0
  •   jordiburgos    6 年前

    将样式加载器添加到依赖项列表:

    npm install style-loader --save-dev 
    
        2
  •  0
  •   user3873265    6 年前

    尝试向CSS加载器添加“最小化”选项:

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

    here

    推荐文章