I'm new to webpack and clearly missing something here. This seemed to be working until we upgraded our app to rails 6.1 and webpacker 5.4. yarn --version webpack outputs 1.22.10
Everything appears to get served correctly in the development environment. In the test environment some assets appear to get served(like some images and some react templates) but no styles are served and the app is totally unstyled.
One thing I noticed is that if I leave webpack-dev-server off in development mode, I get the same issue as test gets. This makes me think that the test env is not configured properly to work with webpack-dev-server but so far I cannot figure out how to connect them
The app has assets in two locations: app/assets and app/frontend
One interesting thing that I noticed is that the public/packs directory looks very different from the public/packs-test directory` although I can't see any reason why that should be true.
public/packs has a single file in it : manifest.json
public/packs-test has a ton of chunk files in it
Here is the relevant config
webpacker.yml
---
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/frontend
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
resolved_paths: ['app/assets', 'vendor/assets']
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
extensions:
- .erb
- .jsx
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
- .json
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: true
host: localhost
port: 3035
public: localhost:3035
hmr: true
# 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/
aggregateTimeout: 300
poll: 500
test:
<<: *default
compile: true
public_output_path: packs-test
production: &production
<<: *default
compile: false
cache_manifest: true
webstaging:
<<: *production
webtest:
<<: *production
webdev:
<<: *production
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const erbLoader = require('./loaders/erb')
const svgLoader = require('./loaders/svg')
const addCommonsChunkPlugins = require('./plugins/commons-chunk')
const injectIndividualStylesheets = require('./individual-stylesheets')
// Set shorter hashes
environment.config.set('output.filename', '[name]-[hash:6].js')
environment.config.set('output.chunkFilename', '[name]-[chunkhash:6].chunk.js')
// More readable classnames for css modules
const cssLoader = environment.loaders
.get('moduleCss')
.use.find(el => el.loader === 'css-loader')
cssLoader.options.localIdentName = '[local]_[hash:base64:5]'
// Manually add any ES6 targeted vendor dependencies
// converts /node_modules/ to /node_modules(?!\/my-es6-targeted-module)/
const babelLoader = environment.loaders.get('babel')
const newExcludePattern = new RegExp(`${babelLoader.exclude.source}(?!\/better-youtube-api)`)
babelLoader.exclude = newExcludePattern
// Add erb loader (for images.js.erb)
environment.loaders.append('erb', erbLoader)
// Load svg files differently from css and js files
environment.loaders.insert('svg', svgLoader, { after: 'file' })
// Exclude svg extension from file loader
const fileLoader = environment.loaders.get('file')
fileLoader.exclude = /\.(svg)$/i
// Add commons chunk plugin for extracting common shared modules
addCommonsChunkPlugins(environment)
// Add individual stylesheets to webpack entries
injectIndividualStylesheets(environment)
module.exports = environment
config/webpack/development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
config/webpack/test.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
Rails.application.configure do
# Settings specified here will take precedence over those in config/application.rb.
config.action_mailer.default_url_options = { host: "localhost", port: 3000 }
Rails.application.routes.default_url_options[:host] = 'localhost:3000'
config.force_ssl = true
# The test environment is used exclusively to run your application's
# test suite. You never need to work with it otherwise. Remember that
# your test database is "scratch space" for the test suite and is wiped
# and recreated between test runs. Don't rely on the data there!
config.cache_classes = true
# Do not eager load code on boot. This avoids loading your whole application
# just for the purpose of running a single test. If you are using a tool that
# preloads Rails for running tests, you may have to set it to true.
config.eager_load = false
# Configure public file server for tests with Cache-Control for performance.
config.public_file_server.enabled = true
config.public_file_server.headers = {
'Cache-Control' => "public, max-age=#{1.hour.seconds.to_i}"
}
# Separate file storage in the test environment
config.active_storage.service = :test
# Use inline job processing to make things happen immediately
config.active_job.queue_adapter = :inline
# Show full error reports and disable caching.
config.consider_all_requests_local = true
config.action_controller.perform_caching = false
# Raise exceptions instead of rendering exception templates.
config.action_dispatch.show_exceptions = false
# Disable request forgery protection in test environment.
config.action_controller.allow_forgery_protection = true
config.action_mailer.perform_caching = false
# Tell Action Mailer not to deliver emails to the real world.
# The :test delivery method accumulates sent emails in the
# ActionMailer::Base.deliveries array.
config.action_mailer.delivery_method = :test
# Print deprecation notices to the stderr.
config.active_support.deprecation = :stderr
# Raises error for missing translations
# config.action_view.raise_on_missing_translations = true
config.x.enable_gtm = false
end
I would be extremely grateful for any insite as I have been fighting this for a while
