试图在webpack中使用css-loader来尽量减少我们的css

我试过了十几个不同的搜索，并阅读了css-loader上的文档，但我相信它们并不是最新的。试图在webpack中使用css-loader来尽量减少我们的css

我也试图从前端JavaScript/jquery中学习我们的反应代码和约定，所以这对我来说是新的。

我想要做的就是把我们的css和使用css-loader最小化，但我不知道如何从我读过的。

一块我们当前的代码看起来是这样的 - prod.config.js：

import webpack from 'webpack'; 
import ExtractTextPlugin from 'extract-text-webpack-plugin'; 
import PurifyCSSPlugin from 'purifycss-webpack-plugin'; 

import baseConfig from './base.config'; 

const PUBLIC_PATH = '//d1yepz0pwej23y.cloudfront.net/assets/' + process.env.TRAVIS_BUILD_NUMBER + '/'; 

export default { 
    ...baseConfig, 
    output: {...baseConfig.output, publicPath: PUBLIC_PATH }, 
    module: { 
     loaders: [ 
    ...baseConfig.module.loaders, { 
     test: /\.(woff|woff2|eot|ttf|otf|svg)(\?v=[0-9].[0-9].[0-9])?$/, 
     loader: 'file?name=[sha512:hash:base64:7].[ext]', 
     exclude: /node_modules\/(?!font-awesome)/ 
    }, { 
     test: /\.(jpe?g|png|gif|svg)$/, 
     loader: 'file?name=[sha512:hash:base64:7].[ext]!image?optimizationLevel=7&progressive&interlaced', 
     exclude: /node_modules\/(?!font-awesome)/ 
    }, { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss'), 
     exclude: /node_modules/ 
    } 
    ] 
}, 
plugins: [ 
    // extract css 
    new ExtractTextPlugin('[name]-[chunkhash].css'), 

    // set env 
    new webpack.DefinePlugin({ 
    'process.env': { 
     BROWSER: JSON.stringify(true), 
     NODE_ENV: JSON.stringify('production') 
    } 
    }), ... 

    ...baseConfig.plugins 
] 
};

这是足以让我如何使这项工作有何建议？或者建议我可以在哪里获得更多信息？

文档说，我应该需要这样的CSS：要求（“CSS-装载机减少./ file.css？！”）

，但我不知道如何实现。

谢谢！

更新：

想什么@Brandon后述所以，我其实在我们已经进入需要的CSS文件中看到代码。

if (process.env.BROWSER) { 
    require('styles/app.css'); 
}

我更新了到：要求（ 'CSS-装载机最小化风格/ app.css？！'）; 但最终与此错误：

ERROR in ./~/css-loader?minimize!./app/styles/app.css 
Module build failed: CssSyntaxError: /css-loader!/Users/homeImac/workspace/node_modules/style-loader/index.js!/Users/homeImac/workspace/node_modules/css-loader/index.js?sourceMap!/Users/homeImac/workspace/node_modules/postcss-loader/index.js!/Users/homeImac/workspace/app/styles/app.css:5:1: Unknown word

，但这个词是@import，这是否有道理？如果你们可以启发我为什么出现这个错误，我会很感激。

再次感谢！

来源

2016-07-08 nyhunter77

试图找到解决装载机解决问题的方法后于是，我决定寻找另一种解决方案。一个名为Purify CSS Plugin的插件最终成为了答案。

new PurifyCSSPlugin({ 
    purifyOptions: { info: true, minify: true } 
})

使用加载程序带来'未知单词'错误。我所尝试过的每一件事情都会转移未知的词语，或者没有做任何改变的情况网上所有的人似乎都无法克服这个问题。

只是证明了通常有不止一种方法来解决问题的事实。

来源

2016-07-13 03:08:10 nyhunter77

-1

将需要声明的语句放在您应用程序的JavaScript源文件之一中。如果它是一个“全局”CSS文件，那么你的应用程序的主要条目JS文件是一个很好的候选人。

例如在app.js：

require("css-loader?minimize!./file.css"); // tell webpack about your css dependency so it can load and minimize it

来源

2016-07-08 21:07:31 Brandon

到目前为止，感谢您的帮助，我更新了上面的问题，因为我最终发现了一个我不明白的错误。希望能尽快解决这个问题。如果你能帮忙，再次感谢！ – nyhunter77

试图在webpack中使用css-loader来尽量减少我们的css

回答

相关问题