尝试使用 css-loader 和 webpack 来最小化我们的 css

Question

我尝试了十几个不同的搜索并阅读了 css-loader 上的文档，但我相信它们不是最新的。

我也在尝试学习我们的反应代码和来自前端的约定 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-loader?minimize!./file.css"）

但我不确定如何实施。

谢谢！

更新：

因此，在尝试了@Brandon 提到的内容之后，我实际上已经在我们的条目中看到了需要 css 文件的代码。

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

我将其更新为：要求（'css-loader?minimize!styles/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，这有意义吗？如果你们能启发我为什么会出现此错误，我将不胜感激。

再次感谢！

Answer 1

将该 require 语句放入您应用的 JavaScript 源文件之一。如果它是 "global" css 文件，那么您的应用程序的主要入口 JS 文件是一个不错的选择。

例如在 app.js:

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

Answer 2

所以在尝试找到解决加载程序问题的解决方案之后，我决定寻找另一种解决方案。一个名为 Purify CSS 的插件最终成为了答案。

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

使用加载程序导致 'unknown word' 错误。我尝试的所有方法要么转移了未知词，要么没有采取任何措施来改变这种情况。网上的各位好像也解决不了这个问题

恰恰证明了解决问题的方法通常不止一种。

尝试使用 css-loader 和 webpack 来最小化我们的 css

Trying to use css-loader with webpack to minimize our css

reactjs

webpack

css-loader