Verwenden von gulp, webpack und dem babel-loader: Fehler beim Kompilieren von jsx

Question

UPDATE: vue-tables-2 wird jetzt vorkompiliert geliefert, sodass keine Loader benötigt werden. Für die Option templates empfiehlt es sich, Scoped-Slots zu verwenden, die auch keine speziellen Einstellungen benötigen.

Ich benutze Schluck, Webpack und den Babel-Loader, um einige Dateien zu erstellen (vue-tables-2):

gulp.task('scripts-vue-tables', function() { 
    gulp.src('node_modules/vue-tables-2/index.js') 
     .pipe(webpackstream({ 
       output: { 
        path: __dirname, 
        filename: "vue-tables-2.js", 
        library: 'VueTables2', 
        libraryTarget: 'var' 
       } 
      } 
     )) 
     .pipe(gulp.dest('public/vendor/vue-tables-2/js/')); 
} 

in webpack.config.js ich habe eingeschlossen:

loaders: [ 
     { 
      test: /\.jsx?$/, 
      loader: 'babel-loader', 
      query: { 
       presets: ["latest", "react", "stage-0"], 
       plugins: ["transform-vue-jsx"] 
      } 
     }, 
    ] 

Und waren die gleichen in .babelrc:

{ 
    "presets": ["latest", "react", "stage-0"], 
    "plugins": ["transform-vue-jsx"] 
} 

Aber die scripts-vue-tables Aufgabe läuft ergibt den Fehler:

Module parse failed: \node_modules\vue-tables-2\lib\template.jsx Unexpected token (15:7) 
You may need an appropriate loader to handle this file type. 

Hinweis: In der Regel habe ich here skizziert die Schritte zu folgen versucht.

Answer 1

webpack.config.js wird die Datei gelesen, wenn Sie die webpack CLI-Schnittstelle verwenden, aber in Ihrem Gulp-Beispiel usecase wird sie nicht verwendet. Sie würden wahrscheinlich so etwas wie

.pipe(webpackstream(Object.assign({ 
     output: { 
      path: __dirname, 
      filename: "vue-tables-2.js", 
      library: 'VueTables2', 
      libraryTarget: 'var' 
     }, 
    }, require('./webpack.config'))) 

sowohl die Webpack Konfiguration und die spezielle output Logik laden möchten.