如何使用 gulp webpack-stream 生成正确的命名文件? [英] How to use gulp webpack-stream to generate a proper named file?

问题描述

目前我们使用

我不能使用 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模块.exports = {条目:./entry.js"，开发工具:源地图"，输出: {devtoolLineToLine:真，sourceMapFilename: "app/assets/js/bundle.js.map",路径信息:真，路径:__dirname，文件名:产品?app/assets/js/bundle.min.js":app/assets/js/bundle.js"},模块: {装载机:[{测试:/.css$/，加载器:style！css"}]},插件:产品?[新的 webpack.optimize.UglifyJsPlugin({minimize: true})]:[]};

解决方案

啊，我继续阅读 并想通了:

gulp.task('webpack', function() {返回 gulp.src('entry.js').pipe(webpack( 需要('./webpack.config.js') )).pipe(gulp.dest('app/assets/js'));});

^ 在这里我可以传入我的实际 webpack.config，它会使用我已经在那里设置的路径.在我的情况下，我刚刚删除了 app/assets/js 因为我现在 gulp 中有该路径.

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

Currently we're using Webpack for our Module loader, and Gulp for everything else (sass -> css, and the dev/production build process)

I want to wrap the webpack stuff into gulp, so all I have to do is type gulp and it starts, watches and runs webpack and the rest of what our gulp is setup to do.

So I found webpack-stream and implemented it.

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'));
});

The problem is that it generates a random character name for the .js file, how are we suppose to use that in our app?

From the github repo:

The above will compile src/entry.js into assets with webpack into dist/ with the output filename of [hash].js (webpack generated hash of the build).

How do you rename these files? Also the new gulp task generates a new file everytime I save an edit:

I can't use c2212af8f732662acc64.js I need it to be named bundle.js or something else normal.

Our Webpack config:

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})
    ] : []
};

解决方案

Ah I read on a bit further and figured it out:

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

^ here I can just pass in my actual webpack.config and it will use the paths I have already set in there. In my case I just removed app/assets/js since I have that path in now gulp instead.

Still no earthly idea though, why with the first task I created, it generates random hash filenames?

这篇关于如何使用 gulp webpack-stream 生成正确的命名文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！