ruby-on-rails - webpack-bundle-analyzer 不显示报告

Question

我尝试使用webpack-bundle-analyzer进行分析，但它没有向我显示报告。

development.js:

const environment = require('./environment');
const config = environment.toWebpackConfig();
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

environment.plugins.append(
  'BundleAnalyzer',
  new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    openAnalyzer: true
  }),
);


// For more information, see https://webpack.js.org/configuration/devtool/#devtool
config.devtool = 'eval-source-map';

module.exports = config;

bin/webpack-dev-server:

#!/usr/bin/env ruby
$stdout.sync = true

require "shellwords"
require "yaml"
require "socket"

ENV["RAILS_ENV"] ||= "development"
RAILS_ENV = ENV["RAILS_ENV"]

ENV["NODE_ENV"] ||= RAILS_ENV
NODE_ENV = ENV["NODE_ENV"]

APP_PATH          = File.expand_path("../", __dir__)
CONFIG_FILE       = File.join(APP_PATH, "config/webpacker.yml")
NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js")
puts "ОКРУЖЕНИЕ #{NODE_ENV}"

DEFAULT_LISTEN_HOST_ADDR = NODE_ENV == "development" ? "localhost" : "0.0.0.0"

def args(key)
  index = ARGV.index(key)
  index ? ARGV[index + 1] : nil
end

begin
  dev_server = YAML.load_file(CONFIG_FILE)[RAILS_ENV]["dev_server"]

  HOSTNAME          = args("--host") || dev_server["host"]
  PORT              = args("--port") || dev_server["port"]
  HTTPS             = ARGV.include?("--https") || dev_server["https"]
  DEV_SERVER_ADDR   = "http#{'s' if HTTPS}://#{HOSTNAME}:#{PORT}".freeze
  LISTEN_HOST_ADDR  = args("--listen-host") || DEFAULT_LISTEN_HOST_ADDR
rescue Errno::ENOENT, NoMethodError
  $stdout.puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
  $stdout.puts "Please run bundle exec rails webpacker:install to install webpacker"
  exit!
end

begin
  server = TCPServer.new(LISTEN_HOST_ADDR, PORT)
  server.close
rescue Errno::EADDRINUSE
  $stdout.puts "Another program is running on port #{PORT}. Set a new port in #{CONFIG_FILE} for dev_server"
  exit!
end

# Delete supplied host, port and listen-host CLI arguments
["--host", "--port", "--listen-host"].each do |arg|
  ARGV.delete(args(arg))
  ARGV.delete(arg)
end

env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }

cmd = [
  "#{NODE_MODULES_PATH}/.bin/webpack-dev-server", "--progress", "--color",
  "--config", WEBPACK_CONFIG,
  "--host", LISTEN_HOST_ADDR,
  "--public", "#{HOSTNAME}:#{PORT}",
  "--port", PORT.to_s
] + ARGV

Dir.chdir(APP_PATH) do
  exec env, *cmd
end

但是当我在控制台 bin/webpack-dev-server 中运行时，我看到了输出:

ОКРУЖЕНИЕ development
 10% building modules 8/8 modules 0 active
Project is running at http://localhost:3035/
webpack output is served from /packs/
Content not from webpack is served from /Users/ruslan/thinknetica/rails-optimization-task6/public/packs
404s will fallback to /index.html
Hash: 421b017977dc2d3d74ff
Version: webpack 3.12.0
Time: 4021ms
                                                                        Asset       Size  Chunks                    Chunk Names
              _/assets/images/three-dots-764ab825bf011bdd1a2d150bb072d6ef.svg    1.04 kB          [emitted]
      _/assets/images/external-link-logo-254d1da590fb2398e4c000573add6ac1.svg    2.13 kB          [emitted]
            _/assets/images/image-upload-5eb4cd5a742522be043418dc028917b5.svg    1.42 kB          [emitted]
            _/assets/images/organization-3b55af0077e044d0743cf401c945ca6c.svg    2.79 kB          [emitted]
            _/assets/images/twitter-logo-47512ccc81cfc8d586cb772f68dd4809.svg  843 bytes          [emitted]
             _/assets/images/github-logo-df260fd254a319e41da3fa114ff9bce1.svg    2.17 kB          [emitted]
   _/assets/images/emoji/emoji-one-heart-91d91f1a6370e9f85cb6bfb1e1f41781.png    1.88 kB          [emitted]
 _/assets/images/emoji/emoji-one-unicorn-0e52fa31127c0320cee698a285d396ec.png    4.04 kB          [emitted]
_/assets/images/emoji/emoji-one-bookmark-fc95a4d81304523847723cf0be354d4a.png    21.4 kB          [emitted]
                  _/assets/images/cancel-7de6f7366a36ea5032b1ed278ece1cdc.svg  716 bytes          [emitted]
                                              0-bb75ac3bac7739c3890d.chunk.js     739 kB       0  [emitted]  [big]
                                              1-6b6e1c18d112ff986432.chunk.js    3.37 MB       1  [emitted]  [big]
                                              2-2f6f2d0fa33054583227.chunk.js     106 kB       2  [emitted]
                                              3-05d83a0309e85f5c1e50.chunk.js    1.04 MB       3  [emitted]  [big]
                                               vendor-d1a8aec146d7f4ae49ab.js    4.04 MB       4  [emitted]  [big]  vendor
                                                 Chat-b6ee5cd11d0ddb513015.js     362 kB       5  [emitted]  [big]  Chat
                                          articleForm-fc4980d94009a6c9e42d.js     198 kB       6  [emitted]         articleForm
                                               Search-36810dbe39b14d9d705b.js    35.7 kB       7  [emitted]         Search
                                           Onboarding-2b583a8e3033511c7f18.js    67.7 kB       8  [emitted]         Onboarding
                                        sidebarWidget-478ea2a7da559f0bf29d.js    28.7 kB       9  [emitted]         sidebarWidget
                                          githubRepos-86e6d1db34f196535a9a.js    25.7 kB      10  [emitted]         githubRepos
                                             webShare-43c40d73f6c227f1eceb.js     2.1 kB      11  [emitted]         webShare
                                            proCharts-373203c3ff7af9a55e82.js    9.77 kB      12  [emitted]         proCharts
                                             manifest-5c77023fd443cc7a8b4f.js    5.93 kB      13  [emitted]         manifest
                                                                manifest.json    2.13 kB          [emitted]
   [6] (webpack)-dev-server/client?http://localhost:3035 7.93 kB {4} [built]
 [163] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/articleForm.jsx 40 bytes {6} [built]
 [183] ./app/javascript/packs/articleForm.jsx 1.1 kB {6} [built]
 [202] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/Chat.jsx 40 bytes {5} [built]
 [203] ./app/javascript/packs/Chat.jsx 1.09 kB {5} [built]
 [225] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/githubRepos.jsx 40 bytes {10} [built]
 [226] ./app/javascript/packs/githubRepos.jsx 352 bytes {10} [built]
 [229] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/Onboarding.jsx 40 bytes {8} [built]
 [230] ./app/javascript/packs/Onboarding.jsx 1.49 kB {8} [built]
 [232] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/proCharts.js 40 bytes {12} [built]
 [233] ./app/javascript/packs/proCharts.js 1.99 kB {12} [built]
 [277] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/Search.jsx 40 bytes {7} [built]
 [278] ./app/javascript/packs/Search.jsx 271 bytes {7} [built]
 [282] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/sidebarWidget.jsx 40 bytes {9} [built]
 [287] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/webShare.js 40 bytes {11} [built]
    + 460 hidden modules
webpack: Compiled successfully.

正如我所料，没有任何带有 webpack-bundle-analyzer 报告的窗口。我做错了什么？

Answer 1

更新您的development.js。常量config应该位于environment.plugins.append之后。例如:

const environment = require('./environment');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

environment.plugins.append(
  'BundleAnalyzer',
  new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    openAnalyzer: true
  }),
);

const config = environment.toWebpackConfig();

// For more information, see https://webpack.js.org/configuration/devtool/#devtool
config.devtool = 'eval-source-map';

module.exports = config;