目前我们正在使用 Webpack 作为我们的模块加载器,而 Gulp 用于其他一切(sass - > css和dev / production构建过程)
我想将webpack的东西包装成gulp,所以我要做的就是键入 gulp
然后启动,监视并运行webpack以及我们设置的其余部分 .
所以我找到了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文件生成一个随机字符名称,我们如何在我们的应用程序中使用它?
上面将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://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})
] : []
};
4 回答
Leon Gaban回答了他的webpack.config.js的样子 . 而不是在评论中回答,我在这里提供它,以便更好地格式化 .
根据webpack-stream的文档,"You can pass webpack options in with the first argument" ...
所以,我做了以下强制webpack每次都使用相同的输出名称(对我来说,我使用了bundle.js):
关键是webpack()中的选项,它们是:
啊我read on a bit further并弄清楚了:
^这里我可以传入我的实际webpack.config,它将使用我已经在那里设置的路径 . 在我的情况下,我刚刚删除了
app/assets/js
,因为我现在已经改变了这条路径 .尽管如此,仍然没有世俗的想法,为什么我创建的第一个任务,它生成随机哈希文件名?
按照文档中的建议,您应该在
webpack-stream
之前使用管道上的vinyl-named
包 . 这样您就可以使用更清晰的Webpack配置 . 以下是我自己使用的任务定义:我面对这个任务定义的唯一问题是子文件夹是松散的 . 例如
./src/components/application.spec.js
将生成./build/application.spec.js
而不是./build/components/application.spec.js
.不是给你的javascript一个固定的文件名,更好的解决方案是使用
gulp-inject
并将生成的哈希文件名插入到脚本标记中 . 这意味着您不必担心已编译的javascript上的缓存过期(这就是首先使用哈希文件名的原因) .当然你需要
src/index.html
中的注入部分: