gulp 用webpack-stream报错,但是使用webpack打包就不会报错,为什么?

877 阅读1分钟

如题 同一个webpack.config.js 文件,用webpack编译就没问题,但是换成用gulp就会报错,但是gulp也是用webpack-stream 调用的是同一个webpack.config.js 看下图。为啥?为啥?

代码地址

目录结构

package.json

{
  "name": "webpack-babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "babel-loader": "^8.1.0",
    "gulp": "^4.0.2",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-stream": "^5.2.1"
  }
}

gulpfile.js

var gulp = require('gulp');
var webpackStream = require('webpack-stream')
var config = require('./webpack.config.js')
gulp.task('default', function (done) {
    gulp.src('./src/index.js')
      .pipe(webpackStream(config))
      .pipe(gulp.dest('tmp/'));
      done()
  });

src/index.js

class test {
    imageList = []
    constructor() {

    }
}

webpack.config.js

const path = require('path')
exports = module.exports = function (road) {
    return {
        entry:{
            index:'./src/index.js'
        },
        mode:"development",
        output: {
            filename: '[name]-[chunkhash].js'
        },
        module: {
            rules: [   {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options:{
                            plugins: ["@babel/plugin-proposal-class-properties"] 
                       }
                    }
                ]
            }]
        },
        resolveLoader: {
            moduleExtensions: ['-loader'],
            modules: [
                path.resolve(__dirname, './node_modules')
            ]
        }
    }
}

执行webpack和gulp后的结果

折腾了3个小时。。。

知道原因了 webpack-stream 源码中传的是对象,我传了个方法。

改下就可以了