web-dev-qa-db-ja.com

Webpackを使用すると、output.jsを除いてCSSのみを生成できますか？

Webpack と extract-text-webpack-plugin を使用しています。

私のプロジェクトでは、いくつかのビルドスクリプトを使用しています。ビルドスクリプトの1つは、CSSのみをバンドルおよび縮小することになっています。他のスクリプトにWebpackを使用しているので、CSSのみをバンドルして縮小したい場合でも、Webpackを使用することをお勧めします。

output.jsファイルを削除できないことを除いて、問題なく動作しています。結果のWebpack出力ファイルが不要です。この特定のスクリプトのCSSが欲しいだけです。

結果のJSを取り除く方法はありますか？そうでない場合、CSSの処理に固有のその他のツールを提案しますか？ありがとう。

cssnode.jsnpmbundling-and-minificationwebpack
26
André Pena

簡単な方法があり、追加のツールは必要ありません。

簡単な方法があり、すでに使用しているものを除いて、追加のライブラリは必要ありません。 webpack with 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
  ]
}
27
Tyler Long

残念ながら、現在のところこれは設計上不可能です。 Webpackは、CSSやHTMLなどの他の「Webモジュール」を処理できるJavaScriptバンドルとして開始されました。 JavaScriptがベース言語として選択されます 他のすべての言語を単に文字列としてホストできるため 。 extract-text-webpack-pluginは、これらの文字列をスタンドアロンファイル（したがって名前）として抽出するだけです。

おそらく、CSSを効果的に後処理するためのさまざまなプラグインを提供する PostCSS のほうがよいでしょう。

4
Johannes Ewald

1つの解決策は、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));
    })
});
3
Tobias Teleman