Webpack 生成空包文件答案

【问题标题】：Webpack generating empty bundle fileWebpack 生成空包文件
【发布时间】：2021-11-24 12:33:29
【问题描述】：

我正在尝试使用 webpack/webpack-stream 来捆绑一些 javascript 文件。我遇到的挑战是 webpack 生成 bundle.js 文件，但它是空的。我在这里包含了文件的全部详细信息，因为我不确定我错过了什么。我正在使用 webpack 5。这在我将模式设置为开发时有效。

import filepath from 'path';
import gulp, { parallel } from 'gulp';
import yargs from 'yargs';
import cleanCss from 'gulp-clean-css';
import gulpif from 'gulp-if';
import sourcemaps from 'gulp-sourcemaps';
import imagemin from 'gulp-imagemin';
import del from 'del';
import webpackStream from 'webpack-stream';
import webpack from 'webpack';

const sass = require('gulp-sass')(require('sass'));
const PRODUCTION = yargs.argv.prod;

const path = {
  styles: {
    src: ['src/assets/scss/bundle.scss', 'src/assets/scss/admin.scss'],
    dest: 'dist/assets/css/',
  },
  images: {
    src: 'src/assets/images/**/*.{jpg,png,gif,svg,jpeg}',
    dest: 'dist/assets/images/',
  },
  scripts: {
    src: 'src/assets/js/bundle.js',
    dest: 'dist/assets/js',
  },
  others: {
    src: [
      'src/assets/**/*',
      'src/assets/{js,scss,images}',
      'src/assets/{js,scss,images}/**/*',
    ],
    dest: 'dist/assets/',
  },
};

const webpackConfig = {
  entry: {
    main: filepath.resolve(__dirname, './src/assets/js/bundle.js'),
  },
  output: {
    path: filepath.resolve(__dirname, './dist/assets/js/'),
    filename: 'bundle.js',
  },
  mode: "production",
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          },
        },
      }
    ]
  }
}

export const clean = () => del(['dist']);

export const styles = (cb) => {
  return gulp
    .src(path.styles.src)
    .pipe(gulpif(!PRODUCTION, sourcemaps.init()))
    .pipe(sass().on('error', sass.logError))
    .pipe(gulpif(PRODUCTION, cleanCss({ compatibility: 'ie8' })))
    .pipe(gulpif(!PRODUCTION, sourcemaps.write()))
    .pipe(gulp.dest(path.styles.dest));
  cb();
};

export const images = (cb) => {
  return gulp
    .src(path.images.src)
    .pipe(gulpif(PRODUCTION, imagemin()))
    .pipe(gulp.dest(path.images.dest));
  cb();
};

export const watch = () => {
  gulp.watch('src/assets/scss/**/*.scss', styles);
  gulp.watch(path.images.src, images);
  gulp.watch(path.others.src, copy);
};

export const copy = () => {
  return gulp.src(path.others.src).pipe(gulp.dest(path.others.dest));
};

export const scripts = () => {
  return gulp.src(path.scripts.src)
    .pipe(webpackStream(webpackConfig, webpack))
    .pipe(gulp.dest(path.scripts.dest));
};

export const build = gulp.series(clean, gulp.parallel(styles, images, copy));
export const build_dev = gulp.series(
  clean,
  gulp.parallel(styles, images, copy),
  watch
);

exports.default = build_dev;

【问题讨论】：

标签： javascript node.js webpack gulp webpack-stream

【解决方案1】：

所以我发现了问题所在。我没有导出我的功能。在 webpack 5 中，只有导出的函数会被转译

不是这个

const testFunc = () => {
  console.log("we tested")
}

这样做

export const testFunc = () => {
  console.log("we tested")
}

【讨论】：