web-dev-qa-db-fra.com

Avec Webpack, est-il possible de générer uniquement du CSS, à l'exclusion du fichier output.js?

J'utilise Webpack avec le extract-text-webpack-plugin .

Dans mon projet, j'ai quelques scripts de construction. L'un des scripts de construction est censé regrouper et réduire la CSS uniquement. Comme j'utilise Webpack pour les autres scripts, j'ai trouvé que c'était une bonne idée d'utiliser Webpack même lorsque je veux seulement regrouper et minimiser CSS .

Ça marche bien, sauf que je ne peux pas me débarrasser du output.js fichier. Je ne veux pas du fichier de sortie du webpack résultant. Je veux juste le CSS pour ce script particulier.

Existe-t-il un moyen de se débarrasser du JS résultant? Sinon, proposez-vous un autre outil spécifique pour la gestion des CSS? Merci.

cssnode.jsnpmbundling-and-minificationwebpack
26
André Pena

Il existe un moyen simple, aucun outil supplémentaire n'est requis.

Il existe un moyen simple et vous n'avez pas besoin de bibliothèques supplémentaires, sauf celles que vous utilisez déjà: webpack avec extract-text-webpack-plugin .

En bref:

Assurez-vous que les fichiers js et css de sortie ont un nom identique, puis le fichier css remplacera le fichier js.

Un exemple réel (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

Malheureusement, cela n'est actuellement pas possible par conception. webpack a commencé comme un bundle JavaScript qui est capable de gérer d'autres "modules web", tels que CSS et HTML. JavaScript est choisi comme langue de base, car il peut héberger toutes les autres langues simplement sous forme de chaînes . L'extrait-text-webpack-plugin extrait simplement ces chaînes en tant que fichier autonome (d'où le nom).

Vous êtes probablement mieux avec PostCSS qui fournit divers plugins pour post-traiter efficacement CSS.

4
Johannes Ewald

Une solution consiste à exécuter le webpack avec l'API Node et à contrôler la sortie avec l'option memory-fs . Dites-lui simplement d'ignorer le fichier js résultant. output.path vers "/" dans 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));
    })
});
3
Tobias Teleman