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

I'm using Webpack with the extract-text-webpack-plugin.

我正在使用带有extract-text-webpack-plugin的Webpack。

In my project, I have some build scripts. One of the build scripts is supposed to bundle and minify CSS only. As I'm using Webpack for the other scripts, I found it a good idea to use Webpack even when I only want to bundle and minify CSS.

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

It's working fine, except that I can't get rid of the output.js file. I don't want the resulting webpack output file. I just want the CSS for this particular script.

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

Is there a way to get rid of the resulting JS? If not, do you suggest any other tool specific for handling CSS? Thanks.

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

3 个解决方案

#1

There is an easy way, no extra tool is required.

There is an easy way and you don't need extra libraries except which you are already using: webpack with the extract-text-webpack-plugin.

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

In short:

Make the output js and css file have identical name, then the css file will override js file.

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

A real example (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
  ]
}

#2

Unfortunately, that is currently not possible by design. webpack started as a JavaScript bundler which is capable of handling other "web modules", such as CSS and HTML. JavaScript is chosen as base language, because it can host all the other languages simply as strings. The extract-text-webpack-plugin is just extracting these strings as standalone file (thus the name).

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

You're probably better off with PostCSS which provides various plugins to post-process CSS effectively.

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

#3

One solution is to execute webpack with the Node API and control the output with the memory-fs option. Just tell it to ignore the resulting js-file. Set the output.path to "/" in webpackConfig.

一种解决方案是使用Node API执行webpack并使用memory-fs选项控制输出。只是告诉它忽略生成的js文件。在webpackConfig中将output.path设置为“/”。

var compiler = webpack(webpackConfig);
var mfs = new MemoryFS();
compiler.outputFileSystem = mfs;
compiler.run(function(err, stats) {
    if(stats.hasErrors()) { throw(stats.toString()); }
    mfs.readdirSync("/").forEach(function (f) {
        if(f === ("app.js")) { return; } // ignore js-file
        fs.writeFileSync(destination + f, mfs.readFileSync("/" + f));
    })
});