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

Posted 2023-03-06

【中文标题】缩小并将哈希添加到 css 文件 webpack

【英文标题】：Minify and add hash to css files webpack

【发布时间】：2017-05-06 18:35:58

【问题描述】：

我正在为我的 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 属性仅适用于组件文件夹内的 css，而不适用于外部文件夹。这是为什么？

【参考方案1】：

不要将CopyWebpackPlugin 用于应用程序源。这将绕过 Webpack 的加载程序，并将您锁定在 Webpack 的所有功能之外。

只需使用 ES6 导入，require、require.ensure 或 System.import 来要求您的样式表。或者，正如 Michał 建议的那样，在适用时在生产环境中使用 ExtractTextPlugin。

【参考方案2】：

使用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'])
       
   ]