8

我有几个 CSS 入口点：

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

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

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

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

4

3 回答 3

3

我整理了一个webpack 插件来根据它们的最终输出大小删除额外的文件，因为我遇到了同样的问题 - 鉴于这些文件往往非常小，这似乎只是检查它们有多大并删除小的情况，没用的。

使用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 页面上查看完整的选项列表

于 2017-06-16T16:51:00.233 回答
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.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
  ]
};

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

于 2017-03-13T18:24:08.813 回答
1

我认为没有任何方法可以做你想做的事情，在 github issue tracker 上已经提出了同样的问题，但没有任何解决方案。如果问题在于html-webpack-plugin添加空的 js 文件，您应该能够通过明确指定要包含或排除的块来解决该问题。

于 2017-03-20T13:48:35.963 回答