如何使用 gulp webpack-stream 生成正确命名的文件?

新手上路,请多包涵

目前我们使用 Webpack 作为我们的模块加载器, Gulp 用于其他一切(sass -> css,以及开发/生产构建过程)

我想将 webpack 的东西包装到 gulp 中,所以我所要做的就是键入 gulp 它会启动、监视并运行 webpack 以及我们的 gulp 设置要执行的其余操作。

所以我找到 了webpack-stream 并实现了它。

 gulp.task('webpack', function() {
    return gulp.src('entry.js')
        .pipe(webpack({
            watch: true,
            module: {
                loaders: [
                    { test: /\.css$/, loader: 'style!css' },
                ],
            },
        }))
        .pipe(gulp.dest('dist/bundle.js'));
});

问题是它为 .js 文件生成一个随机字符名称,我们应该如何在我们的应用程序中使用它?

从 github 回购

上面的代码将 src/entry.js 编译成 assets,webpack 编译成 dist/,输出文件名是 [hash].js(webpack 生成的构建哈希)。

你如何重命名这些文件?每次我保存编辑时,新的 gulp 任务也会生成一个新文件:

在此处输入图像描述

我不能使用 c2212af8f732662acc64.js 我需要将它命名为 bundle.js 或其他正常名称。

我们的 Webpack 配置:

 var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_DEV || '0');
// http://stackoverflow.com/questions/25956937/how-to-build-minified-and-uncompressed-bundle-with-webpack

module.exports = {
    entry: "./entry.js",
    devtool: "source-map",
    output: {
        devtoolLineToLine: true,
        sourceMapFilename: "app/assets/js/bundle.js.map",
        pathinfo: true,
        path: __dirname,
        filename: PROD ? "app/assets/js/bundle.min.js" : "app/assets/js/bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    plugins: PROD ? [
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ] : []
};

原文由 Leon Gaban 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 414
2 个回答

啊,我 进一步阅读 并弄明白了:

 gulp.task('webpack', function() {
    return gulp.src('entry.js')
    .pipe(webpack( require('./webpack.config.js') ))
    .pipe(gulp.dest('app/assets/js'));
});

^ 在这里我可以只传递我实际的 webpack.config,它将使用我已经在那里设置的路径。在我的例子中,我刚刚删除了 app/assets/js 因为我现在有那个路径 gulp 而不是。

虽然仍然没有世俗的想法,但为什么我创建的第一个任务会生成随机哈希文件名?

原文由 Leon Gaban 发布,翻译遵循 CC BY-SA 3.0 许可协议

关于他的 webpack.config.js 是什么样子,Leon Gaban 的回答有评论。我没有在评论中回答这个问题,而是在此处提供它以使其格式更好。

根据 webpack-stream 的文档,“您可以使用第一个参数传递 webpack 选项”…

因此,我执行了以下操作以强制 webpack 每次都使用相同的输出名称(对我来说,我使用的是 bundle.js):

 gulp.task('webpack', ['babelify'],
    () => {
        return gulp.src('Scripts/index-app.js')
            .pipe(webpack({output: {filename: 'bundle.js'} }))
            .pipe(debug({ title: 'webpack:' }))
            .pipe(gulp.dest('Scripts/'));

    });

关键是 webpack() 中的选项,它们是:

 {output: {filename: 'bundle.js'} }

原文由 Perry Tew 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题