試圖在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

回答

相關問題