缩小并添加哈希到 css 文件 webpack

Question

我正在为我的 Angular 2 项目使用 webpack。在 src 文件夹中，我有一个全局css folder和组件以及其他文件夹。

我的 webpack.config.js 在 src 文件夹之外。

我正在使用 CopyWebpackPlugin 将 css 文件夹复制到 dist 文件夹：

new CopyWebpackPlugin([
      { from: 'src/css', to: 'css'}
  ]),

我也在 css 中使用以下加载器：

exports.css = {
  test: /\.css$/,
  loader: 'to-string!css?-minimize!postcss',

};

但问题是我想为每个 css 文件名添加一个哈希值，然后更改 index.html 中的 css 文件名，因为这些是包含在 index.html 中的全局文件。实现这一目标的最佳方法是什么？

编辑：在更改代码时，我意识到 loader 属性仅适用于 components 文件夹内的 css，而不适用于外部文件夹。为什么是这样？

Answer 1

使用https://github.com/webpack/extract-text-webpack-plugin。

webpack.config.js中的示例

config.plugins.push(
    new ExtractTextPlugin({filename: 'css/[name].[hash].css'})
);
...
config.module = {
   rules: [
       {
          test: /\.css$/,
          exclude: root('src', 'app'),
          loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css', 'postcss']})
       }
   ]
}