使用Webpack，是否可以仅生成CSS，但不包括output.js？ [英] With Webpack, is it possible to generate CSS only, excluding the output.js?

问题描述

我正在将 Webpack 与提取文本-webpack-plugin 。

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

In my project, I have some build scripts. One of the build scripts is supposed to bundle and minify CSS only. As I'm using Webpack for the other scripts, I found it a good idea to use Webpack even when I only want to bundle and minify CSS.

一切正常，只是我无法摆脱 output.js 文件。我不需要生成的Webpack输出文件。我只想要该特定脚本的CSS。

It's working fine, except that I can't get rid of the output.js file. I don't want the resulting webpack output file. I just want the CSS for this particular script.

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

Is there a way to get rid of the resulting JS? If not, do you suggest any other tool specific for handling CSS? Thanks.

推荐答案

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

有一个简单的方法，除了已经在使用的库之外，您不需要其他库： webpack 与 extract-text-webpack-plugin 。

使输出js和css文件具有相同的名称，然后css文件将覆盖js文件。

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

这篇关于使用Webpack，是否可以仅生成CSS，但不包括output.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！