使用Webpack，是否可以只生成CSS文件而不包括output.js文件？

Question

我正在使用Webpack 和extract-text-webpack-plugin。

在我的项目中，我有一些构建脚本。其中之一的构建脚本只是用来打包和压缩CSS。由于我在其他脚本中使用Webpack，所以我认为即使在只需要打包和压缩CSS时也使用Webpack是个好主意。

它运行得很好，但是我无法摆脱output.js文件。我不想要生成的Webpack输出文件。我只想要用于此特定脚本的CSS。

是否有方法可以摆脱生成的JS？如果没有，您是否建议使用其他专门处理CSS的工具？谢谢。

- Andre Pena

Answer 1

有一种简单的方法，不需要额外的工具。

有一种简单的方法，您不需要额外的库，除非您已经在使用: webpack和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
  ]
}

- Tyler Liu

---

使用 mini-css-extract-plugin 似乎不可能实现这一点。有没有其他替代方案？ - Jinto

mini-css-extract-plugin 对我来说很好用，如文档所述 https://webpack.js.org/loaders/sass-loader/#extracts-css-into-separate-files 和 https://www.robinwieruch.de/webpack-css/。 - James McKinney

Answer 2

很遗憾，由于设计原因，目前这是不可能的。webpack最初是一个JavaScript打包工具，可以处理其他“web模块”，如CSS和HTML。选择JavaScript作为基础语言，因为它可以将所有其他语言简单地作为字符串来托管。extract-text-webpack-plugin只是将这些字符串提取为独立的文件（因此得名）。

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

- Johannes Ewald

---

鉴于这不是选定的答案，有人可以确认这个回答是错误的吗？ - dhwang

Answer 3

一种解决方案是使用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));
    })
});

- Tobias Teleman

Answer 4

你可以使用event-hooks-webpack-plugin，在done触发后，轻松清理dist文件夹中的不需要的文件。

//
plugins: [
        new EventHooksPlugin({
            'done': () => {
                // delete unwanted assets 
            }
        })
    ]

祝你好运...

- Aakash