एप्लिकेशन एचटीएमएल में वेबपैक एंट्री पॉइंट्स का सीधा लिंक शामिल करें?

Question

मेरे webpack प्रवेश बिंदु नाम पर एक [hash] में शामिल हैं:

entry: "index.js", 
output: { 
    path: "build/", 
    filename: "index-[hash].js", 
} 

मैं अपने आवेदन के एचटीएमएल से कि प्रवेश बिंदु से सीधे लिंक कर सकते हैं?

<script src="build/index-41d40fe7b20ba1dce81f.js"></script> 

मैं यह कैसे कर सकते हैं:

उदाहरण के लिए, मैं HTML है कि ग्राहक को भेजी जाने वाली शामिल करना चाहते हैं? क्या कोई प्लगइन है जो एक एंट्री पॉइंट मैनिफेस्ट उत्पन्न कर सकता है जो मेरा एप्लिकेशन उचित फ़ाइल नामों को पढ़ और निकाल सकता है?

Answer 1

html-webpack-plugin (मैं लेखक हूँ) एक उत्पन्न करेगा: संदर्भ का एक सा के लिए भी

var util = require('util'); 
var path = require('path'); 
var gulp = require('gulp'); 
var runSequence = require('run-sequence'); 
var rimraf = require('rimraf'); 
var gzip = require('gulp-gzip'); 
var notify = require('gulp-notify'); 
var gutil = require('gulp-util'); 
var webpack = require('webpack'); 
var webpackConfig = require('./client/webpack.config'); 
var through2 = require('through2'); 

gulp.task("webpack", function (cb) { 
    webpack(webpackConfig, function (err, stats) { 
     if (err) throw new gutil.PluginError("webpack", err); 

     var jsFilename = stats.toJson().assetsByChunkName['app']; 
     console.log('>>>>', jsFilename); 
     // if source-maps are turned on, you'll get [ 'somefile.js', 'somefile.js.map' ] 
     if (util.isArray(jsFilename)) { 
      jsFilename = jsFilename.filter(function (filename) { 
       return path.extname(filename).toLowerCase() === '.js' 
      }).shift(); 
     } 

     // write the hashed main.js to /dist/index.html 
     gulp.src('./client/index.html') 
      .on('error', handleErrors) 
      .pipe(through2.obj(function (vinylFile, enc, tCb) { 
       vinylFile.contents = new Buffer(String(vinylFile.contents) 
        .replace('main.js', jsFilename)); 
       this.push(vinylFile); 
       tCb(); 
      })) 
      .pipe(gulp.dest('./dist/')); 

     cb(); 
    }); 
}); 

function handleErrors() { 
    var args = Array.prototype.slice.call(arguments); 
    notify.onError({ title: 'Error', message: '<%= error.message %>'}).apply(this, args); 
    this.emit('end'); 
} 

gulp.task('gzip-deploy', function() { 
    return gulp.src('./dist/**/*') 
     .on('error', handleErrors) 
     .pipe(gzip()) 
     .pipe(gulp.dest('./dist/')); 
}); 

gulp.task('clean', function (cb) { 
    return rimraf('./dist', cb); 
}); 

gulp.task('default', function (cb) { 
    runSequence('clean', 'webpack', cb); 
}); 

gulp.task('deploy', function (cb) { 
    webpackConfig.plugins = webpackConfig.plugins = [ 
     new webpack.optimize.UglifyJsPlugin(), 
     new webpack.DefinePlugin({ 
      "process.env": { 
       NODE_ENV: JSON.stringify("production") 
      } 
     }) 
    ]; 
    webpackConfig.watch = false; 
    webpackConfig.devtool = null; 
    webpackConfig.output.filename = "main-[hash].js"; 

    runSequence('clean', 'webpack', 'gzip-deploy', cb); 
}); 

यहाँ मेरी webpack.config.js फ़ाइल है: यहाँ एक gulpfile स्निपेट होता है, साथ ही साथ एक सा मदद कर सकता है है index.html सही हैश बंडल फ़ाइल नाम का संदर्भ देने के लिए।

var HtmlWebpackPlugin = require("html-webpack-plugin"); 
var webpackConfig = { 
    entry: "index.js", 
    output: { 
     path: "build/", 
     filename: "index-[hash].js", 
    }, 
    plugins: [new HtmlWebpackPlugin()] 
} 

यह build/index.html कि एक <script> टैग के साथ अपने बंडल में शामिल हैं का उत्पादन करेगा।

Answer 2

मैंने अभी वेबपैक के साथ खेलना शुरू कर दिया है, और पाया है कि gulp नई हैश जेएस फाइलों को index.html पर लिखने के लिए एक अच्छा फिट है। यदि आप गल्प का उपयोग नहीं करना चाहते हैं, तो this discussion regarding doing something similar with a plugin थोड़ा सा मदद कर सकता है।

var path = require('path'); 

module.exports = { 
    context: __dirname, 
    devtool: 'source-map', 
    entry: { 
     app: './main.js' 
    }, 
    watch: true, 
    output: { 
     path: path.join(__dirname, "/../dist"), 
     filename: "main.js" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js$/, loader: 'jsx-loader?harmony' }, 
      { test: /\.css$/, loader: "style-loader!css-loader" }, 
      { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }, 
      { test: /\.png$/, loader: "url-loader?prefix=img/&limit=8192" }, 
      { test: /\.jpg$/, loader: "url-loader?prefix=img/&limit=8192" }, 
      { test: /\.gif$/, loader: "url-loader?prefix=img/&limit=8192" }, 
      { test: /\.woff$/, loader: "url-loader?prefix=font/&limit=8192" }, 
      { test: /\.eot$/, loader: "file-loader?prefix=font/" }, 
      { test: /\.ttf$/, loader: "file-loader?prefix=font/" }, 
      { test: /\.svg$/, loader: "file-loader?prefix=font/" } 
     ] 
    }, 
    resolve: { 
     extensions: ['', '.js', '.json'], 
     modulesDirectories: ['node_modules'] 
    }, 
    plugins: [] 
};