Webpack:ExtractTextPlugin:当有几个css入口点时,不生成单独的空JS文件？

Question

我有几个CSS入口点:

entry: {
  ...
  styles: [
    ...
  ],
  fonts: [
    ...
  ]
},

我正在使用ExtractTextPlugin分别捆绑CSS:

  new ExtractTextPlugin({
    filename: `[name].bundle.css`
  }),

所以像输出我有2个CSS文件:styles.css和fonts.css是正确的但也是空的styles.js和fonts.js.有没有办法不生成空JS文件？

Answer 1

仅添加主要 javascript 文件作为条目，并通过以下方式需要所有字体和样式require('./style.css')

webpack.config.js：

entry: {
  'main': 'app/main',
},
output: {
  path: 'static',
  publicPath: '/static/',
  filename: '[name].bundle.js',
  chunkFilename: '[chunkhash].bundle.js',
},
module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader'
      }),
    }]
},
plugins: [
  new ExtractTextPlugin('[name].bundle.css'),
],

这将为您提供/static/main.bundle.cssapp/main.js 中包含的所有 css（传递性）。

字体相同，但您需要第二个 ExtractTextPlugin 实例，例如：

const extractCSS = new ExtractTextPlugin('stylesheets/[name].bundle.css');
const extractFonts = new ExtractTextPlugin('stylesheets/[name].bundle.woff');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      },
      {
        test: /\.woff$/i,
        use: extractFonts.extract([ 'url-loader' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractFonts
  ]
};

有关详细信息，请参阅文档 - 多个实例。