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

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

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

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

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

Solutions Collecting From Web of "使用Webpack,是否可以仅生成CSS,不包括output.js?"

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

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

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

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

一种解决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)); }) });