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

我把webpack plugin放在一起根据最终输出大小删除额外的文件，因为我遇到了同样的问题 - 鉴于这些文件往往非常小，似乎只是检查它们有多大是和删除那些小的，无用的。

使用npm或yarn

进行安装

npm install webpack-extraneous-file-cleanup-plugin --save-dev
yarn add webpack-extraneous-file-cleanup-plugin --dev

在webpack.config.js文件中：

const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin');

module.exports = {
  ...
  plugins: [
    new ExtraneousFileCleanupPlugin({
      extensions: ['.js']
    })
  ]
}

您可以在Webpack Extraneous File Cleanup Plugin Github Page

上查看完整的选项列表

Answer 2

仅将主要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.css，其中包含你app / 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
  ]
};

有关详情，请参阅Documentation - Multiple Instances。

Answer 3

我没有任何方法可以做任何你想要做的事情，the same question has been asked on the github issue tracker，没有任何解决方案。如果问题是 html-webpack-plugin 添加空的js文件，您应该可以通过explicitly specifying what chunks to include or exclude修复它。