Gulp / Webpack没有转发Vue文件

Question

当我从命令行运行Webpack时，一切都运行正常：生成的包被正确地转换/ uglified并在浏览器中正常运行。但是，当我尝试从Gulp调用Webpack时（我正在使用Gulp @ 4，FWIW），我总是收到此错误：

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
Error: bundle.js from UglifyJs
Unexpected token: name (Vue) [bundle.js:47,8]

我已经开始使用Babel和.babelrc，手动指向Webpack-stream到Webpack 2 ^ .X.X，甚至在reading this之后给了Buble一个镜头。有什么建议吗？

的package.json

"dependencies": {
  "body-parser": "^1.16.0",
  "csv-parse": "^1.2.0",
  "express": "^4.14.1",
  "express-handlebars": "^3.0.0",
  "knex": "^0.12.7",
  "marked": "^0.3.6",
  "sass": "^0.5.0",
  "sqlite3": "^3.1.8"
},
"devDependencies": {
  "browser-sync": "^2.18.8",
  "buble": "^0.15.2",
  "buble-loader": "^0.4.1",
  "css-loader": "^0.27.3",
  "eslint": "^3.14.1",
  "eslint-plugin-html": "^2.0.1",
  "eslint-plugin-vue": "^2.0.1",
  "gulp": "github:gulpjs/gulp#4.0",
  "gulp-nodemon": "^2.2.1",
  "gulp-sass": "^3.1.0",
  "gulp-uglify": "^2.1.2",
  "gulp-webpack": "^1.5.0",
  "jsdoc-to-markdown": "^3.0.0",
  "uglify-js": "^2.8.14",
  "vue": "^2.2.4",
  "vue-loader": "^11.2.0",
  "vue-template-compiler": "^2.2.4",
  "webpack": "^2.3.1",
  "webpack-stream": "^3.2.0"
}

webpack.config.js

const path = require('path');

const webpack = require('webpack');

module.exports = {
  entry: path.resolve(__dirname, 'src/views/vue.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'src/public/js')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'buble-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
};

gulpfile.js

const path        = require('path');
const browserSync = require('browser-sync');
const gulp        = require('gulp');
const nodemon     = require('gulp-nodemon');
const uglify      = require('gulp-uglify');
const webpack     = require('webpack-stream');

const BROWSER_SYNC_DELAY    = 1000;
const NODEMON_RESTART_DELAY = 5000;

gulp.task('compile-js', (done) => {
  // Use webpack to transpile, bundle, and uglify front-end JS
  gulp.src(path.resolve(__dirname, 'src/views/vue.js'))
    .pipe(webpack(require(path.resolve(__dirname, 'webpack.config.js'))))
    .pipe(gulp.dest(path.resolve(__dirname, 'src/public/js')));

  done();
});

vue.js

import Vue from 'vue';
import App from './index.vue';

new Vue({
  el: '#app',
  render: (createElement) => {
    return createElement(App);
  }
});

index.vue

<template>
  <p>{{ message }}</p>
</template>

<script>
  export default {
    data() {
      return { message: 'Hello world!' };
    }
  };
</script>

Answer 1

我对vue和webpack的了解不多，因为我本人正在学习中。也许因为要将vue组件发送到bundle.js，所以可能需要将vue-loader应用于js测试。

只是想一想，更正不应该欢迎。