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

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

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

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

有没有办法摆脱由此产生的JS？ 如果没有，你是否build议其他特定的工具来处理CSS？ 谢谢。

Answer 1

不幸的是，这是目前不可能的devise。 webpack最初是作为一个能够处理其他“web模块”（比如CSS和HTML）的JavaScript打包程序而开始的。 JavaScript被选为基本语言， 因为它可以将所有其他语言简单地作为string 。 extract-text-webpack-plugin只是将这些string作为独立文件（即名称）提取出来。

PostCSS可能更好，它提供了各种插件来有效地后处理CSS。

Answer 2

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

有一个简单的方法，你不需要额外的库，除了你已经使用： 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 ] } 

Answer 3

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