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

Question

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

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

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

有没有办法摆脱生成的 JS？如果没有，您是否建议任何其他专门用于处理 CSS 的工具？谢谢

Answer 1

遗憾的是，目前无法通过设计做到这一点。 webpack 最初是一个 JavaScript 打包器，它能够处理其他 "web modules"，例如 CSS 和 HTML。 JavaScript 被选为基础语言，because it can host all the other languages simply as strings。 extract-text-webpack-plugin 只是将这些字符串提取为独立文件（因此得名）。

您最好使用 PostCSS，它提供各种插件以有效地 post-process CSS。

Answer 2

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

Answer 3

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

有一个简单的方法，您不需要额外的库，除非您已经在使用：webpack with the 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 4

您可以在 done 触发后清理 dist 文件夹中的任何不需要的资产。这可以通过 event-hooks-webpack-plugin

轻松实现

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

祝你好运...

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

With Webpack, is it possible to generate CSS only, excluding the output.js?

css

node.js

npm

bundling-and-minification

webpack

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

简而言之：

一个真实的例子（webpack 2.x）：