如何将这个 gulp.js 任务重写为 webpack

Question

我试图弄清楚是否值得迁移到webpack，我倾向于说不 - 认为我有更重要的事情要做 - 但我想看到一些如何使webpack工作的实际例子。

因此，如果我有以下 Gulp.js 任务，我将如何将它们作为 webpack 任务执行？

    gulp.task('subpaths', ['clean_subpaths'],function() {
      //Minify and copy all JavaScript (except vendor scripts)
      gulp.src(paths.subpath_scripts)
        .pipe(fileinclude({
                prefix: '@@',
                basepath: '@file'
            }))
        .pipe(contextswitch())
        .pipe(uglify())
        .pipe(strip())
        .pipe(rename(function (path) {
                path.basename += timestamp;
         }))
        .pipe(gulp.dest('public/longcache/javascripts/subpath'));
    });

所以上面的任务做——

将文件包含在其他文件中进行处理。

通过我自己定义的代码运行管道内容 - 我猜在 webpack 中那会运行我自己的插件吗？

丑陋

删除控制台语句

重命名输出文件，使其具有版本。

写出到特定位置

Answer 1

第一项 - 将文件包含在其他文件中 - 是 webpack 的最大好处之一，作为一个来自 grunt/gulp 工作流程的人说话。与其在外部管理依赖项（在您的构建工具中），并且必须确保根据其运行时依赖项正确组合文件，使用 webpack，您的依赖项是代码库的一部分，作为require()表达式。您将应用程序编写为 js 模块的集合，每个模块加载它所依赖的模块;webpack 相应地理解这些依赖关系和捆绑包。如果你还没有以模块化的方式编写你的js，这是一个很大的转变，但值得付出努力。这也反映了 webpack 的用途——它在概念上是围绕构建一个 js 应用程序，而不是捆绑你的网站使用的一些 js。

您的第二项更有可能是自定义加载器，它比自定义插件更容易编写。Webpack 自始至终都非常可扩展，但编写自定义集成的文档很少。

Webpack的Uglify插件也将删除console.logs，超级简单。

指定输出详细信息是基本 webpack 配置的一部分，只需填写几个选项即可。