Question

我正在使用webpack作为我的Angular 2项目。在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，而不适用于外部文件夹。这是为什么？

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

Answer 2

不要将import { Events } from 'ionic/angular';用于应用程序源。这将绕过Webpack的加载器并锁定Webpack的所有功能。

只需使用ES6导入，CopyWebpackPlugin，require或require.ensure即可使用样式表。正如Michał建议的那样，在适用的情况下，在生产中使用System.import。

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

2 个答案: