Javascript 如何使用GulpWebpack流生成正确的命名文件？_Javascript_Gulp_Webpack_Webpack Dev Server

Javascript 如何使用GulpWebpack流生成正确的命名文件？

javascript gulp webpack

Javascript 如何使用GulpWebpack流生成正确的命名文件？,javascript,gulp,webpack,webpack-dev-server,Javascript,Gulp,Webpack,Webpack Dev Server,目前，我们将用于模块加载器，将用于其他一切（sass->css和开发/生产构建过程）我想把webpack的东西打包成gulp，所以我所要做的就是键入gulp，然后它启动、监视并运行webpack，剩下的就是gulp的设置所以我找到并实现了它 gulp.task('webpack', function() { return gulp.src('entry.js') .pipe(webpack({ watch: true,

目前，我们将用于模块加载器，将用于其他一切（sass->css和开发/生产构建过程）

我想把webpack的东西打包成gulp，所以我所要做的就是键入

gulp

，然后它启动、监视并运行webpack，剩下的就是gulp的设置

所以我找到并实现了它

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-into-dist/，输出文件名为[hash].js（生成的webpack-generated hash）

如何重命名这些文件？此外，每次我保存编辑时，“new gulp”任务都会生成一个新文件：

我不能使用

c2212af8f732662acc64.js

我需要将其命名为bundle.js或其他正常名称

我们的网页配置：

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

啊，我想起来了：

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

，因为我现在有了这个路径

但是仍然不知道为什么在我创建的第一个任务中，它会生成随机散列文件名？

正如文档中建议的那样，您应该在

网页包流之前在管道上使用名为的乙烯基文件包。这样，您可以使用更干净的网页包配置。以下是我自己使用的任务定义：
'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
有人对Leon Gaban关于他的webpack.config.js是什么样子的回答发表了评论。我不是在评论中回答这个问题，而是在这里提供它，这样它的格式会更好
根据文档中的“您可以通过第一个参数传入webpack选项”
因此，我执行了以下操作，以强制webpack每次使用相同的输出名称（对我来说，我使用bundle.js）：
密钥是webpack（）中的选项，这些选项是：
{output: {filename: 'bundle.js'} }

与其给javascript一个固定的文件名，更好的解决方案是使用gulpinject
并将生成的哈希文件名插入到脚本标记中。这意味着您不必担心已编译javascript上的缓存过期（这就是为什么要首先使用哈希文件名）
当然，您需要src/index.html
中的inject部分：
<!DOCTYPE html>
<html>
<head>
  <title>index page</title>
</head>
<body>

  <!-- inject:js -->
  <!-- endinject -->
</body>
</html>


索引页
如果未指定任何入口点（在相反的情况下，文件名将为'[name].js'
）@leon gabam您的webpack.config.js
文件看起来像什么？Paul，请参阅下面我的答案，其中显示了每次强制使用相同文件名所需的webpack.config.js选项示例。随机哈希文件名可确保您在更新生产服务器时选择正确版本的脚本，并且您已告诉所有人他们可以将旧包缓存一年。这不应被接受回答，它是模糊和不完整的。我喜欢这个解决方案，因为我不必键入两次我的文件名，乙烯基命名的软件包会为我这样做。如果有人还在读这个，您可以使用vinyl named with path来保存子文件夹+1以链接到vinyl named，这在我的情况下帮助我允许多个入口点，而无需在webpack config obj中指定它们经过大量的切齿和web搜索，传递这个简单的配置对象是我找到的最简单的解决方案。
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/'));
});

<!DOCTYPE html>
<html>
<head>
  <title>index page</title>
</head>
<body>

  <!-- inject:js -->
  <!-- endinject -->
</body>
</html>