node框架下，主流用gulp，想用webpack处理vue文件，但是始终抱错

Question

    gulp.task('vue',function () {
    
      const config = {
        output: {
          filename: "[name].bundle.js"
        },
        resolve: {
          extensions: ['.js', '.vue', '.json'],
          alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('views'),
            'components': resolve('views/components')
          },
        },
        module: {
          rules: [
            {
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              enforce: 'pre',
              include: [resolve('views'), resolve('test')],
              options: {
                formatter: require('eslint-friendly-formatter')
              }
            },
            {
              test: /\.js$/,
              loader: 'babel-loader',
              include: [resolve('views')]
            },
            {
              test: /\.vue$/,
              loader: 'vue-loader',
              options: {
                loaders: {
                  css: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'vue-style-loader' 
                  })
                }
    
              }
            },
    
            {
              test: /\.css$/,
              use: ['style-loader', 'css-loader']
            },
            {
              test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
              loader: 'url-loader',
              options: {
                limit: 10000,
                name:  'img/[name]_[hash:7].[ext]'
              }
            },
            {
              test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
              loader: 'url-loader',
              options: {
                limit: 10000,
                name:  'font/[name]_[hash:7].[ext]'
              }
            }
          ]
        },
        devtool: 'source-map',
        plugins: [
          // 自动注入引入文件
          new HtmlWebpackPlugin({
            filename: 'ui.html',
            template: 'views/ui.html',
            inject: true
          })
        ]
      };
    
      if (!dev) {
        //生产环境不声称sourcemap
        delete config.devtool;
      }
    
    
      let result = gulp.src('views/scripts/es6/ui.js')
        .pipe(named())
        .pipe(webpackStream(config),webpack);
    
      return result
        .pipe(gulp.dest('public/js/'));
    })
    

Answer 1

gulp.task('vue', function () {

    const config = {

        output: {
            filename: "[name].bundle.js"
        },
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                'vue
: 'vue/dist/vue.esm.js',
                '@': resolve('views'),
            }
        },
        module: {
            rules: [
                // ...(dev ? [createLintingRule()] : []),
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    options: {

                    }
                },
                  {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                  },
                  {
                    test: /\.less$/,
                    use: 'less-loader'
                  },

                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    include: [resolve('views')],
                },
                {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: resolveAssets('img/[name].[hash:7].[ext]')
                    }
                },
                {
                    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: resolveAssets('media/[name].[hash:7].[ext]')
                    }
                },
                {
                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: resolveAssets('fonts/[name].[hash:7].[ext]')
                    }
                }
            ]

        },
        devtool: 'source-map',
        plugins: [
            // 自动注入引入文件
            new HtmlWebpackPlugin({
                filename: 'ui.html',
                template: resolve('views/ui.html'),
                inject: true
            })

          
        ]
    };

  

    let result = gulp.src('views/scripts/es6/ui.js')
        .pipe(named())
        .pipe(webpackStream(config, webpack));

    return result
        .pipe(gulp.dest('public/js/'));
});

Answer 2

文件不存在，是你那个gulp.src('views/scripts/es6/ui.js')这个路径不对