我的应用程序设置是Rails 5.2.2 + Capistrano + Webpacker。
根据官方建议，我已将webpacker从版本4.0.0-pre.2升级到4.0.0-rc3，将javascript_pack_tag替换为javascript_packs_with_chunks_tag。
当我尝试在生产环境中加载应用程序页面时（开发很好），出现以下错误：
ActionView::Template::Error (Webpacker can't find application-bundle in /var/www/my_app/releases/20190118230511/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
"application-bundle.js": "/packs/application-bundle-d19ff417e51c4d079a26.chunk.js",
"application-bundle.js.map": "/packs/application-bundle-d19ff417e51c4d079a26.chunk.js.map",
"entrypoints": {
"application-bundle": {
"js": [
"/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js",
"/packs/2-f1a3e0883ed274e2b148.chunk.js",
"/packs/application-bundle-d19ff417e51c4d079a26.chunk.js"
],
"js.map": [
"/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js.map",
"/packs/2-f1a3e0883ed274e2b148.chunk.js.map",
"/packs/application-bundle-d19ff417e51c4d079a26.chunk.js.map"
],
"css": [
"/packs/2-b55ead47.chunk.css"
]
}
},
"runtime~application-bundle.js": "/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js",
"runtime~application-bundle.js.map": "/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js.map"
}
):
所有有问题的文件都显示在服务器上：
$ cd /var/www/my_app/releases/20190118232112/public/packs
$ ls -la
total 7248
drwxrwxr-x 2 my_app my_app 36864 Jan 18 23:23 .
drwxrwxr-x 6 my_app my_app 4096 Jan 11 10:39 ..
-rw-rw-r-- 1 my_app my_app 424506 Jan 18 23:23 2-b55ead47.chunk.css
-rw-rw-r-- 1 my_app my_app 52743 Jan 18 23:23 2-b55ead47.chunk.css.gz
-rw-rw-r-- 1 my_app my_app 3156323 Jan 18 23:23 2-f1a3e0883ed274e2b148.chunk.js
-rw-rw-r-- 1 my_app my_app 838813 Jan 18 23:23 2-f1a3e0883ed274e2b148.chunk.js.gz
-rw-rw-r-- 1 my_app my_app 2498292 Jan 18 23:23 2-f1a3e0883ed274e2b148.chunk.js.map
-rw-rw-r-- 1 my_app my_app 216512 Jan 18 23:23 application-bundle-d19ff417e51c4d079a26.chunk.js
-rw-rw-r-- 1 my_app my_app 34089 Jan 18 23:23 application-bundle-d19ff417e51c4d079a26.chunk.js.gz
-rw-rw-r-- 1 my_app my_app 125062 Jan 18 23:23 application-bundle-d19ff417e51c4d079a26.chunk.js.map
-rw-rw-r-- 1 my_app my_app 933 Jan 18 23:23 manifest.json
-rw-rw-r-- 1 my_app my_app 250 Jan 18 23:23 manifest.json.gz
-rw-rw-r-- 1 my_app my_app 1534 Jan 18 23:23 runtime~application-bundle-1df5a9c12813aa129e1a.js
-rw-rw-r-- 1 my_app my_app 785 Jan 18 23:23 runtime~application-bundle-1df5a9c12813aa129e1a.js.gz
-rw-rw-r-- 1 my_app my_app 2766 Jan 18 23:23 runtime~application-bundle-1df5a9c12813aa129e1a.js.map
清单也似乎是正确的：
$ cat manifest.json
{
"application-bundle.js": "/packs/application-bundle-d19ff417e51c4d079a26.chunk.js",
"application-bundle.js.map": "/packs/application-bundle-d19ff417e51c4d079a26.chunk.js.map",
"entrypoints": {
"application-bundle": {
"js": [
"/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js",
"/packs/2-f1a3e0883ed274e2b148.chunk.js",
"/packs/application-bundle-d19ff417e51c4d079a26.chunk.js"
],
"js.map": [
"/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js.map",
"/packs/2-f1a3e0883ed274e2b148.chunk.js.map",
"/packs/application-bundle-d19ff417e51c4d079a26.chunk.js.map"
],
"css": [
"/packs/2-b55ead47.chunk.css"
]
}
},
"runtime~application-bundle.js": "/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js",
"runtime~application-bundle.js.map": "/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js.map"
}
我已经手动检查了每个文件，它们由Nginx提供服务。
package.json 是：
{
"name": "my_app",
"private": true,
"dependencies": {
"@babel/preset-env": "^7.2.3",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@casl/ability": "^2.4.2",
"@casl/react": "^0.8.0",
"@rails/webpacker": "^4.0.0-rc.3",
"activestorage": "^5.2.1",
"anchorme": "^1.1.2",
"antd": "^3.12.3",
"axios": "^0.18.0",
"intl": "^1.2.5",
"lodash": "latest",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"query-string": "^6.2.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-icons-kit": "^1.1.7",
"react-intl": "^2.7.2",
"react-on-rails": "11.1.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-sizeme": "^2.5.2",
"resolve-url-loader": "^2.3.0",
"sanitize-html": "^1.19.3",
"styled-jsx": "^3.0.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^9.0.0",
"eslint": "^5.4.0",
"eslint-plugin-flowtype": "^2.50.0",
"eslint-plugin-react": "^7.11.1",
"flow-bin": "^0.84.0",
"webpack-dev-server": "^3.1.5"
}
}
app / views / layouts / application.slim 如下：
doctype html
html
head
title = meta_title
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
= javascript_packs_with_chunks_tag 'application-bundle'
= stylesheet_pack_tag 'application-bundle'
meta name='viewport' content='width=device-width, initial-scale=1'
link rel="apple-touch-icon" sizes="180x180" href=asset_path("favicon/apple-touch-icon.png")
link rel="icon" type="image/png" sizes="32x32" href=asset_path("favicon/favicon-32x32.png")
link rel="icon" type="image/png" sizes="16x16" href=asset_path("favicon/favicon-16x16.png")
link rel="manifest" href=asset_path("favicon/site.webmanifest")
link rel="mask-icon" href=asset_path("favicon/safari-pinned-tab.svg") color="#5bbad5"
meta name="theme-color" content="#ffffff"
= favicon_link_tag 'favicon/favicon.ico'
body data-controller=params[:controller] data-action=params[:action]
#wrapper
= yield
/public/packs中列出了文件夹.gitignore。
config / webpacker.yml 是：
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: false
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .jsx
- .js
- .sass
- .scss
- .styl
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Verifies that versions and hashed value of the package contents in the project's package.json
check_yarn_integrity: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
config / webpack / environment.js 是：
const { environment } = require('@rails/webpacker');
const WebpackAssetsManifest = require('webpack-assets-manifest');
environment.loaders.append('stylus-loader', {
test: /\.styl/,
loader: 'style-loader!css-loader!stylus-loader'
});
// Enable the default config
environment.splitChunks();
module.exports = environment;
顺便说一句，environment.splitChunks();在这里正确吗？
config / webpack / production.js 是：
process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
config / initializers / react_on_rails.rb 是：
# frozen_string_literal: true
# See https://github.com/shakacode/react_on_rails/blob/master/docs/basics/configuration.md
# for many more options.
ReactOnRails.configure do |config|
# This configures the script to run to build the production assets by webpack. Set this to nil
# if you don't want react_on_rails building this file for you.
config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpack"
################################################################################
################################################################################
# TEST CONFIGURATION OPTIONS
# Below options are used with the use of this test helper:
# ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
################################################################################
# If you are using this in your spec_helper.rb (or rails_helper.rb):
#
# ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
#
# with rspec then this controls what yarn command is run
# to automatically refresh your webpack assets on every test run.
#
config.build_test_command = "RAILS_ENV=test bin/webpack"
################################################################################
################################################################################
# SERVER RENDERING OPTIONS
################################################################################
# This is the file used for server rendering of React when using `(prerender: true)`
# If you are never using server rendering, you should set this to "".
# Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
# of the JS sent to the client. For the server rendering, React on Rails creates a pool of
# JavaScript execution instances which should handle any component requested.
#
# While you may configure this to be the same as your client bundle file, this file is typically
# different. You should have ONE server bundle which can create all of your server rendered
# React components.
#
config.server_bundle_js_file = "application-bundle.js"
config.i18n_dir = Rails.root.join("app", "javascript", "i18n")
config.i18n_yml_dir = Rails.root.join("config", "locales")
end
任何想法，有什么问题吗？
答案 0 :(得分：1)
在Rails 6.0.3.2（webpacker 5.1.1）中，我也发生了同样的事情。
我尝试执行$ bin/webpack，然后解决了。