Bao gồm liên kết trực tiếp đến các điểm nhập webpack trong ứng dụng HTML?

Question

điểm vào webpack của tôi bao gồm một [hash] trong tên:

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

Làm thế nào tôi có thể liên kết trực tiếp đến điểm đó nhập từ HTML ứng dụng của tôi không?

Ví dụ, tôi muốn HTML được gửi đến khách hàng bao gồm:

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

Làm thế nào tôi có thể làm điều này? Có một plugin có thể tạo ra một biểu hiện điểm nhập cảnh mà ứng dụng của tôi có thể đọc và phát ra các tên tệp thích hợp không?

Answer 1

Các html-webpack-plugin (Tôi là tác giả) sẽ tạo ra một index.html để bạn tham chiếu tên tệp bó băm đúng.

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

này sẽ sản xuất build/index.html bao gồm bó của bạn với một thẻ <script>.

Answer 2

Tôi vừa mới bắt đầu chơi với webpack và thấy rằng gulp phù hợp để viết các tệp js mới băm vào index.html. Nếu bạn không muốn dùng gulp, this discussion regarding doing something similar with a plugin có thể giúp ích một chút. Dưới đây là một đoạn gulpfile có thể giúp một chút cũng như:

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

Dưới đây là tập tin webpack.config.js tôi cũng cho một chút về bối cảnh:

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