Question

背景

我有办法将文件输出到目录结构中，如下所示：

|-- dist
    |-- js
    |-- css
    |-- img
    |-- index.html

目前我的webpack.config.js输出如下：

output: {
    filename: '[name]-[hash].bundle.js',
    path: path.resolve(__dirname, 'dist/js'),
  },

由于我的所有文件当前都出现在没有组织的dist文件夹中，我目前使用gulp将我的文件移动到上面更易读的目录结构中。问题是当我执行此手动移动时，它会破坏代码中的所有引用（[name] .bundle.js），因此声明不会加载。

const gulp = require('gulp');
const clean = require('gulp-clean');

gulp.task('clean-logs', () =>
  gulp.src('./logs/*.log', {
    read: false,
  }).pipe(clean()));

// Take all static files in the /dist directory
// and organize them into folders based on type
gulp.task('organize-dist-static-files', () => {
  gulp.src('./dist/*.{png,gif,jpg,jpeg,svg}')
    .pipe(gulp.dest('./dist/static/img'));
  gulp.src('./dist/*.js')
    .pipe(gulp.dest('./dist/static/js'));
  gulp.src('./dist/*.css')
    .pipe(gulp.dest('./dist/static/css'));
  gulp.src('./dist/*.{woff,woff2,eot,ttf,otf}')
    .pipe(gulp.dest('./dist/static/fonts'));
});

gulp.task('clean-original-dist-files', () => {
  // remove files from original locations
  gulp.src('./dist/*.{png,gif,jpg,jpeg,svg,js,css,woff,woff2,eot,ttf,otf}', {
    read: false,
  }).pipe(clean());
});

问题：

有没有办法可以组织webpack以与上述目录结构相匹配的方式自动配置输出文件引用，以便引用仍然有效？

Webpack用于不同静态文件类型的多个输出位置

0 个答案: