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

Question

我将Webpack与extract-text-webpack-plugin一起使用。

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

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

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

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
  ]
}

Answer 2

不幸的是，目前设计不可能。 webpack最初是一个JavaScript捆绑器，能够处理其他＆＃34; web模块，例如CSS和HTML。选择JavaScript作为基本语言because it can host all the other languages simply as strings。 extract-text-webpack-plugin只是将这些字符串提取为独立文件（因此名称）。

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

Answer 3

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

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));
    })
});

Answer 4

在触发dist之后，您可以清理done文件夹中是否有不需要的资产。使用event-hooks-webpack-plugin

可以轻松实现

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

祝你好运...