使用Webpack,是否可以仅生成CSS,不包括output.js？

Question

我使用的WebPack与提取-文本的WebPack-插件.

在我的项目中,我有一些构建脚本.其中一个构建脚本应该只捆绑和缩小CSS.当我在其他脚本中使用Webpack时,我发现使用Webpack是一个好主意,即使我只想捆绑和缩小CSS.

它工作正常,除了我无法摆脱output.js文件.我不想要生成的webpack输出文件.我只想要这个特定脚本的CSS.

有没有办法摆脱最终的JS？如果没有,你是否建议任何其他专门用于处理CSS的工具？谢谢.

Answer 1

有一种简单的方法,不需要额外的工具.

有一种简单的方法,你不需要额外的库,除了你已经使用的:webpack with extract-text-webpack-plugin.

简而言之:

使输出js和css文件具有相同的名称,然后css文件将覆盖js文件.

一个真实的例子(webpack 2.x):

import path from 'path'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

const config = {
  target: 'web',
  entry: {
    'one': './src/one.css',
    'two': './src/two.css'
  },
  output: {
    path: path.join(__dirname, './dist/'),
    filename: '[name].css' // output js file name is identical to css file name
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].css') // css file will override generated js file
  ]
}

Answer 2

不幸的是，目前设计上不可能做到这一点。webpack 最初是一个 JavaScript 捆绑器，能够处理其他“Web 模块”，例如 CSS 和 HTML。选择 JavaScript 作为基础语言，因为它可以简单地将所有其他语言作为字符串托管。extract-text-webpack-plugin 只是将这些字符串提取为独立文件（因此得名）。

您可能更适合使用PostCSS，它提供了各种插件来有效地后处理 CSS。