сценарий

Я пытаюсь использовать веб-пакет для объединения сценариев моего поставщика отдельно от сценариев приложения.

Попытка 1

index.js

var _ = require('lodash');
console.log(_)

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var config = {
  entry: {
    vendor: ['lodash'],
    app: './index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  plugins: [

    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: Infinity,
    }),

    new HtmlWebpackPlugin({
        filename: 'index.html',
        inject: true
    })
  ]
};

module.exports = config;

Результаты

                         Asset       Size  Chunks             Chunk Names
       app.3437c5da57e0c6671675.js  145 bytes       0  [emitted]  app
    vendor.72c95e21a8d7096d53bc.js     428 kB       1  [emitted]  vendor
                        index.html  232 bytes          [emitted]

Теперь, если я внесу изменения вindex.js

index.js

var _ = require('lodash');
console.log('changed index');
console.log(_)

Результаты

                Asset       Size  Chunks             Chunk Names
   app.c724350371b50a9afeb2.js  177 bytes       0  [emitted]  app
vendor.0e76f9c86cbe02606265.js     428 kB       1  [emitted]  vendor
                    index.html  232 bytes          [emitted]

Оба хэша меняются, хотя я только обновил индексный файл.

Разница между двумя файлами поставщиков

vendor.72c95e21a8d7096d53bc.js

script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"app"}[chunkId]||chunkId) + "." + {"0":"3437c5da57e0c6671675"}[chunkId] + ".js";

vendor.0e76f9c86cbe02606265.js

script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"app"}[chunkId]||chunkId) + "." + {"0":"c724350371b50a9afeb2"}[chunkId] + ".js";

Попытка 2

Проведя некоторые исследования, я обнаружил нижеприведенную статью, в которой объясняется, что webpack генерирует манифест chuck, который содержит идентификаторы chunk, которые помещаются в chunk входа Это объясняет разницу выше. Решение состоит в том, чтобы извлечь манифест патрона в отдельный файл.

https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95

index.js

var _ = require('lodash');
console.log(_)

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');

var config = {
  entry: {
    vendor: ['lodash'],
    app: './index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  plugins: [

    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: Infinity,
    }),

    new ChunkManifestPlugin({
      filename: "manifest.json",
      manifestVariable: "webpackManifest"
    }),

    new HtmlWebpackPlugin({
        filename: 'index.html',
        inject: true
    })
  ]
};

module.exports = config;

Результаты

               Asset       Size  Chunks             Chunk Names
app.3437c5da57e0c6671675.js  145 bytes       0  [emitted]  app
             manifest.json   35 bytes          [emitted]
vendor.72c95e21a8d7096d53bc.js     428 kB       1  [emitted]  vendor

Теперь, если я внесу изменения вindex.js

index.js

var _ = require('lodash');
console.log('changed index');
console.log(_)

Результаты

               Asset       Size  Chunks             Chunk Names
app.c724350371b50a9afeb2.js  177 bytes       0  [emitted]  app
             manifest.json   35 bytes          [emitted]
vendor.0e76f9c86cbe02606265.js     428 kB       1  [emitted]  vendor

И снова оба хэша меняются, хотя я только обновил индексный файл.

На этот раз, однако, нет никаких различий между двумя файлами поставщиков

Вопросы

Есть ли причина, по которой вышеприведенный сценарий не работает, или я принципиально неверно подхожу к этой проблеме.

Есть ли более простой способ с веб-пакетом добиться того, что я пытаюсь сделать, потому что даже если я получу вышеописанный шаг, мне придется прочитать манифест, а затем вставить его в мою страницу index.html?