如何使用 gulp webpack-stream 生成正确的命名文件？
Posted
技术标签:
【中文标题】如何使用 gulp webpack-stream 生成正确的命名文件？【英文标题】：How to use gulp webpack-stream to generate a proper named file? 【发布时间】：2016-07-04 15:40:06 【问题描述】：目前我们将 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 文件生成一个随机字符名称，我们应该如何在我们的应用程序中使用它？
From the github repo:
上面会将 src/entry.js 编译成资产，用 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://***.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)
] : []
;
【问题讨论】：
【参考方案1】：与其给你的 javascript 一个固定的文件名，更好的解决方案是使用gulp-inject 并将生成的哈希文件名插入到脚本标签中。这意味着您不必担心已编译的 javascript 上的缓存过期（这就是首先使用哈希文件名的原因）。
const inject = require('gulp-inject');
gulp.task('webpack', function()
const index = './src/index.html';
const scripts = gulp.src('entry.js')
.pipe(webpack( require('./webpack.config.js') ))
.pipe(gulp.dest('dist/js'));
return target
.pipe(inject(scripts))
.pipe(gulp.dest('dist/'));
);
当然，您需要 src/index.html 中的注入部分：
<!DOCTYPE html>
<html>
<head>
<title>index page</title>
</head>
<body>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
【讨论】：
【参考方案2】：对于 Leon Gaban 的回答，关于他的 webpack.config.js 的外观有一个评论。我没有在评论中回答这个问题，而是在这里提供它，以便格式更好。
根据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'
【讨论】：
经过大量的咬牙切齿和网络搜索，传递这个简单的配置对象是我找到的最简单的解决方案。【参考方案3】：按照文档中的建议，您应该在 webpack-stream 之前在管道上使用 vinyl-named 包。这样你就可以使用更干净的 Webpack 配置。以下是我自己使用的任务定义：
'use strict';
const gulp = require('gulp'),
named = require('vinyl-named'),
webpack = require('webpack-stream');
gulp.task('webpack', function ()
gulp.src(['./src/vendor.js', './src/bootstrap.js', './src/**/*.spec.js'])
.pipe(named())
.pipe(webpack(
module:
loaders: [
test: /\.js$/,
loader: 'babel',
query:
presets: ['es2015', 'angular2']
]
))
.pipe(gulp.dest('./build'))
);
我在使用此任务定义时面临的唯一问题是子文件夹已松动。例如./src/components/application.spec.js 将产生./build/application.spec.js 而不是./build/components/application.spec.js。
【讨论】：
我喜欢这个解决方案，因为我不必输入两次文件名，乙烯基命名的包会为我完成。 如果有人还在读这个，你可以使用vinyl-named-with-path来保存子文件夹
+1 用于链接到vinyl-named，这在我的情况下帮助我允许多个入口点，而无需在 webpack config obj 中指定它们【参考方案4】：
啊，我read on a bit further 想通了：
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 中有这条路径。
但仍然没有世俗的想法，为什么在我创建的第一个任务中，它会生成随机哈希文件名？
【讨论】：
如果没有指定入口点，则默认值（'[hash].js'）（相反情况下文件名将是'[name].js'）github.com/shama/webpack-stream/blob/master/index.js#L98
@leon gabam 你的webpack.config.js 文件是什么样的？
Paul，请在下面查看我的答案，其中显示了每次强制使用相同文件名所需的 webpack.config.js 选项示例。
随机哈希文件名可确保您在更新生产服务器时选择正确版本的脚本，并且您已告诉所有人他们可以将旧包缓存一年。
这不应该是公认的答案，它是模糊和不完整的。以上是关于如何使用 gulp webpack-stream 生成正确的命名文件？的主要内容，如果未能解决你的问题，请参考以下文章
迁移到 Webpack 2 后，gulp 或 webpack-stream 导致 webpack 构建失败
需要帮助了解 gulp 和 webpack-stream 的工作原理