gulp & webpack：找不到入口模块中的错误

Question

我使用webpack 处理JavaScript（捆绑ES6 模块、转换为ES5 等）和gulp - 用于其他任务（jade、sass 等）。我想将webpack 配置保留在webpack.config.js 中，但要通过gulp 任务执行webpack。

---

项目结构

???? 发展　

　???? es6 - 源代码

　　　​​​​main.js

　???? js - 输出 JS 用于开发

　　　​​​​index.js

???? 生产

???? webpack.config.js

???? gulpfile.js

---

gulpfile.js

var  gulp = require('gulp'), 
        //...
     gulpwebpack = require('gulp-webpack')
        
        
gulp.task('gulpwebpack', function(){ 
   
    return gulp.src('development/03_es6/main.js')
        .pipe(gulpwebpack(require('./webpack.config.js')))
        .pipe(gulp.dest('development/js/'));
  
});

// ...

gulp.task('watch', ['browser-sync', 'jade', 'sass'], function() {
    // ...
    gulp.watch('development/03_es6/*.js', ['test']);
});

gulp.task('default', ['watch']);
    

---

webpack.config.js

const NODE_ENV = process.env.NODE_ENV || 'development';

module.exports = {
    
    context: __dirname + '/development',
    
    entry: './03_es6/main.js',
    
    output: {
        path: __dirname + '/development/js/',
        filename: 'index.js'
    },
        
    module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    use: ['babel-loader']
                }
            ]
        }
    
    //watch: NODE_ENV === 'development'
};

---

问题

如果只是从控制台执行webpack（这意味着独立于gulp执行webpack），一切都会正确。但是如果执行gulp gulpwebpack，就会出现错误信息：

 ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./development/03_es6/main.js in C:\...\projectFrolder/development

我知道错误的根源在这里：

// ...

context: __dirname + '/development',

entry: './03_es6/main.js',

output: {

// ...

但是development/03_es6/main.js 和./development/03_es6/main.js 也不起作用。 Gulp 无法正确读取webpack.config.js，不是吗？

Answer 1

我认为，你应该切换到

'use strict';

const gulp = require('gulp'),
      named = require('vinyl-named'),
      webpack = require('webpack-stream');

gulp.task('webpack', function () {
  gulp.src('development/03_es6/main.js')
      .pipe(named())
      .pipe(webpack(require('./webpack.config.js')))
      .pipe(gulp.dest('./build'))
});

从 webpack.config.js 中删除条目：

module.exports = {

context: __dirname + '/development',

output: {
    path: __dirname + '/development/js/',
    filename: 'index.js'
},

module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    }
};