目前我们使用 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 文件生成一个随机字符名称,我们应该如何在我们的应用程序中使用它?
上面的代码将 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 许可协议
啊,我 进一步阅读 并弄明白了:
^ 在这里我可以只传递我实际的 webpack.config,它将使用我已经在那里设置的路径。在我的例子中,我刚刚删除了
app/assets/js
因为我现在有那个路径 gulp 而不是。虽然仍然没有世俗的想法,但为什么我创建的第一个任务会生成随机哈希文件名?