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

Posted 2023-03-07

【中文标题】使用 Webpack，是不是可以只生成 CSS，不包括 output.js？

【英文标题】：With Webpack, is it possible to generate CSS only, excluding the output.js?使用 Webpack，是否可以只生成 CSS，不包括 output.js？

【发布时间】：2015-06-27 22:42:47

【问题描述】：

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

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

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

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

【参考方案1】：

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

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

祝你好运……

【参考方案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
  ]

【讨论】：

似乎在使用 mini-css-extract-plugin 时这是不可能的。 mini-css-extract-plugin 有什么替代方案吗？

【参考方案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));
    )
);

【参考方案4】：

不幸的是，目前这在设计上是不可能的。 webpack 最初是一个 javascript 捆绑器，它能够处理其他“网络模块”，例如 CSS 和 html。 JavaScript 被选为基础语言because it can host all the other languages simply as strings。 extract-text-webpack-plugin 只是将这些字符串提取为独立文件（因此得名）。

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