web-dev-qa-db-fra.com

Comment ajouter une requête à un chargeur Webpack avec plusieurs chargeurs?

J'ai ce chargeur Babel qui fonctionne

{ test: /\.jsx?$/, loader: 'babel', query: babelSettings, exclude: /node_modules/ },

Mais maintenant, je veux un chargeur CoffeeScript, mais je veux le faire passer par Babel pour obtenir les trucs HMR sophistiqués.

{ test: /\.coffee$/, loader: 'babel!coffee', query: babelSettings, exclude: /node_modules/ },

Cela ne fonctionne pas et entraîne l'erreur suivante.

Erreur: Impossible de définir "requête" et plusieurs chargeurs dans la liste des chargeurs

Avez-vous une idée de la manière de définir la requête uniquement pour la partie Babel de la chaîne de chargement? La requête est un objet compliqué et je ne pense pas pouvoir la coder.

var babelSettings = { stage: 0 };

if (process.env.NODE_ENV !== 'production') {
  babelSettings.plugins = ['react-transform'];
  babelSettings.extra = {
    'react-transform': {
      transforms: [{
        transform: 'react-transform-hmr',
        imports: ['react'],
        locals: ['module']
      }, {
        transform: 'react-transform-catch-errors',
        imports: ['react', 'redbox-react']
      }]
      // redbox-react is breaking the line numbers :-(
      // you might want to disable it
    }
  };
}
javascriptcoffeescriptwebpackbabeljs
54
Chet

Mise à jour: avec les versions non héritées de Webpack vous pouvez définir un tableau de chargeurs dans la configuration de Webpack .

Si vous devez utiliser une ancienne version de Webpack ou ajouter les options en ligne, la réponse d'origine est ci-dessous.

Pour ce faire, vous devez définir les paramètres de requête dans la chaîne du chargeur, car la clé d'objet query ne fonctionnera que pour un seul chargeur.

En supposant que votre objet paramètres puisse être sérialisé en JSON, comme votre exemple l'indique, vous pouvez facilement transmettre votre objet paramètres en tant que requête JSON. Ensuite, seul le chargeur Babel recevra les paramètres.

{ test: /\.coffee$/, loader: 'babel?'+JSON.stringify(babelSettings)+'!coffee', exclude: /node_modules/ }

La fonctionnalité permettant de faire cela est quelque peu documentée ici:

tilisation de chargeurs: paramètres de requête

La plupart des chargeurs acceptent les paramètres dans le format de requête normal (?key=value&key2=value2) et en tant qu’objet JSON (?{"key":"value","key2":"value2"}).

31
Alexander O'Mara

Sokra, le créateur de Webpack, donne son propre point de vue sur la façon de procéder ici , mais vous serez probablement mieux servi avec le webpack-combine-loaders helper qui est plus complet style similaire à la définition d’un chargeur unique avec l’objet de requête.

Avec webpack-combine-loaders, vous pouvez définir plusieurs chargeurs en tant que tels:

combineLoaders([
  {
    loader: 'css-loader',
    query: {
      modules: true,
      sourceMap: true,
      localIdentName: '[name]__[local]--[hash:base64:5]',
    },
  },
  {
    loader: 'sass-loader',
    query: {
      sourceMap: true,
      includePaths: [
        'app/assets/stylesheets',
        'app/assets/stylesheets/legacy',
      ],
    },
  },
]);
14
Brett Sun

Dans webpack 2 & cela peut être configuré beaucoup plus proprement.

Les chargeurs peuvent être passés dans un tableau d'objets de chargeur. Chaque objet de chargeur peut spécifier un objet options qui agit comme le pack Web 1 query de ce chargeur particulier.

Par exemple, en utilisant les deux react-hot-loader et babel-loader, avec babel-loader configuré avec certaines options, dans webpack 2 &

module: {
  rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    use: [{
      loader: 'react-hot-loader'
    }, {
      loader: 'babel-loader',
      options: {
        babelrc: false,
        presets: [
          'es2015-native-modules',
          'stage-0',
          'react'
        ]
      }
    }]
  }] 
}

Pour comparaison, voici la même configuration dans webpack 1, en utilisant la méthode de la chaîne de requête.

module: {
  loaders: [{
    test: /\.js$/,
    exclude: /node_modules/,
    loaders: [
      'react-hot',
      'babel-loader?' +
        'babelrc=false,' +
        'presets[]=es2015,' +
        'presets[]=stage-0,' +
        'presets[]=react'
      ]
  }] 
}

Notez que la propriété modifiée se nomme tout au long de la chaîne.

Notez également que j'ai changé le es2015 préréglé sur es2015-native-modules prédéfini dans le babel-loader configuration. Cela n'a rien à voir avec la spécification de options, c'est simplement que l'inclusion de modules es6 vous permet d'utiliser la fonctionnalité d'arborescence introduite dans la v2. Cela pourrait être laissé seul et cela fonctionnerait toujours, mais la réponse semblerait incomplète sans cette mise à niveau évidente: -)

13
davnicwil

La propriété test est juste une regex, vous pouvez donc lancer une vérification simultanée de jsx et de coffee: test: /\.(jsx|coffee)$/

Sass/SCSS est un peu plus facile: test: /\.s[ac]ss$/

2
Brandon Aaskov