javascript - plugin - webpack html css

¿Cómo agregar una consulta a un cargador de paquetes web con múltiples cargadores?

Question

Tengo este cargador Babel que funciona

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

Pero ahora quiero un cargador CoffeeScript, pero quiero canalizarlo a través de Babel para obtener las cosas elegantes de HMR

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

Sin embargo, esto no funciona y da como resultado el siguiente error.

Error: no se puede definir ''consulta'' y múltiples cargadores en la lista de cargadores

¿Alguna idea de cómo definir la consulta solo para la parte de Babel de la cadena de cargadores? La consulta es un objeto complicado y no creo que pueda codificarlo.

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

Answer 1

En webpack 2 y 3 esto se puede configurar de manera mucho más limpia.

Los cargadores se pueden pasar en una matriz de objetos del cargador. Cada objeto del cargador puede especificar un objeto de options que actúa como la query del paquete web 1 para ese cargador en particular.

Por ejemplo, usando react-hot-loader y babel-loader , con babel-loader configurado con algunas opciones, en webpack 2 y 3

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

A modo de comparación, aquí está la misma configuración en el paquete web 1 , utilizando el método de cadena de consulta.

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

Observe los nombres de propiedad modificados en toda la cadena.

Además, tenga en cuenta que cambié el preajuste es2015 preestablecido es2015-native-modules en la configuración de babel-loader . Esto no tiene nada que ver con la especificación de options , es solo que incluir módulos es6 le permite usar la función de sacudida de árbol introducida en v2. Podría dejarse solo y seguiría funcionando, pero la respuesta se sentiría incompleta sin que se indique esa actualización obvia :-)

Answer 2

La propiedad de test es solo regex, por lo que puede ejecutar una comprobación para jsx y café al mismo tiempo: test: //.(jsx|coffee)$/

Sass / SCSS es un poco más fácil: test: //.s[ac]ss$/

Answer 3

Sokra, el creador de Webpack, da su propia opinión sobre cómo hacer esto here , pero probablemente será mejor servido con el ayudante de webpack-combine-loaders que es más similar en estilo a la definición de un solo cargador con el objeto de consulta.

Con webpack-combine-loaders , puede definir múltiples cargadores como tales:

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'',
      ],
    },
  },
]);

Answer 4

Actualización: con versiones no heredadas de Webpack , puede definir una matriz de cargadores en la configuración de Webpack .

Si necesita usar versiones anteriores de Webpack o agregar las opciones en línea, la respuesta original se encuentra a continuación.

La forma de hacerlo es establecer los parámetros de consulta en la cadena del cargador, ya que la clave del objeto de query solo funcionará para un cargador.

Suponiendo que su objeto de configuración se puede serializar a JSON, como lo indica su ejemplo, puede pasar fácilmente su objeto de configuración como una consulta JSON. Entonces solo el cargador de Babel obtendrá la configuración.

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

La característica para hacer esto está algo documentada aquí:

Uso de cargadores: parámetros de consulta

La mayoría de los cargadores aceptan parámetros en el formato de consulta normal ( ?key=value&key2=value2 ) y como objeto JSON ( ?{"key":"value","key2":"value2"} ).