如题 同一个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 源码中传的是对象,我传了个方法。
改下就可以了