压缩并给CSS文件添加哈希值webpack

Question

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

我的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属性只适用于组件文件夹内部的CSS，而不适用于外部文件夹。为什么会出现这种情况呢？

- Bhumi Singhal

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

- Michał Ignaszewski

Answer 2

不要在应用程序源代码中使用CopyWebpackPlugin。这会绕过Webpack的加载器并锁定您无法使用Webpack的所有功能。

只需使用ES6导入，require，require.ensure或System.import来引用样式表。或者，如Michał所建议的那样，在适当时使用ExtractTextPlugin进行生产。

- Filip Dupanović