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

Question

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

我的 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']})
       }
   ]
}