Skip to content

Commit

Permalink
Upgrade to webpacker 4
Browse files Browse the repository at this point in the history
Along the way I had to:

- Set a specific resolution for browserlist
- Fix a strange module issue with storm-react-diagrams

I also updated the README.
  • Loading branch information
nhunzaker committed Jun 25, 2019
1 parent 57726b9 commit 4f6449e
Show file tree
Hide file tree
Showing 11 changed files with 3,334 additions and 2,740 deletions.
26 changes: 0 additions & 26 deletions .babelrc

This file was deleted.

3 changes: 0 additions & 3 deletions .postcssrc.yml

This file was deleted.

2 changes: 1 addition & 1 deletion Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ gem 'pg', '>= 0.18', '< 2.0'
gem 'puma', '~> 3.11'
gem 'rails', '~> 5.2.1'
gem 'uglifier'
gem 'webpacker'
gem 'webpacker', '~> 4.0.7'
gem 'sentry-raven'
gem 'pointless_feedback', '~> 4.0.6'

Expand Down
4 changes: 2 additions & 2 deletions Gemfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ GEM
activemodel (>= 5.0)
bindex (>= 0.4.0)
railties (>= 5.0)
webpacker (3.5.5)
webpacker (4.0.7)
activesupport (>= 4.2)
rack-proxy (>= 0.6.1)
railties (>= 4.2)
Expand Down Expand Up @@ -262,7 +262,7 @@ DEPENDENCIES
uglifier
viget-deployment (= 2.0.0)!
web-console (>= 3.3.0)
webpacker
webpacker (~> 4.0.7)

RUBY VERSION
ruby 2.5.1p57
Expand Down
17 changes: 11 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
Usual Stuff:
# Storyboard

- bundle
- yarn install
- rake db:create db:migrate db:seed
- ./bin/webpack-dev-server
- rails s
## Setup

```
gem install bundler -v 1.16.2
bundle
yarn install
rake db:create db:migrate db:seed
./bin/webpack-dev-server
./bin/rails s
```
73 changes: 73 additions & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
module.exports = function (api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')

if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}

return {
presets: [
isTestEnv && [
'@babel/preset-env',
{
targets: {
node: 'current'
}
}
],
(isProductionEnv || isDevelopmentEnv) && [
'@babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: false,
exclude: ['transform-typeof-symbol']
}
],
'@babel/preset-react',
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'@babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'@babel/plugin-transform-destructuring',
[
'@babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'@babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'@babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
corejs: false
}
],
[
'@babel/plugin-transform-regenerator',
{
async: false
}
]
].filter(Boolean)
}
}
13 changes: 12 additions & 1 deletion config/webpack/environment.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
const { environment } = require('@rails/webpacker')
const typescript = require('./loaders/typescript')
const typescript = require('./loaders/typescript')

environment.loaders.append('typescript', typescript)

environment.config.merge({
resolve: {
alias: {
// This is necessary to patch in a strange module issue with
// storm-react-diagrams
_: 'lodash'
}
}
})

module.exports = environment
45 changes: 36 additions & 9 deletions config/webpacker.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@
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']
Expand All @@ -13,11 +16,29 @@ default: &default
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false

# Extract and emit a css file
extract_css: true

static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2

extensions:
- .tsx
- .ts
- .jsx
- .mjs
- .js
- .jsx
- .ts
- .tsx
- .sass
- .scss
- .css
Expand All @@ -34,24 +55,27 @@ development:
<<: *default
compile: true

# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: true

# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 4000
public: localhost:4000
hmr: true
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: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: /node_modules/
ignored: '**/node_modules/**'


test:
Expand All @@ -67,5 +91,8 @@ production:
# 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
cache_manifest: true
16 changes: 11 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,26 @@
"name": "adventure-time",
"private": true,
"dependencies": {
"@rails/webpacker": "3.5",
"@babel/core": "^7.0.0-0",
"@babel/preset-react": "^7.0.0",
"@rails/webpacker": "4.0.7",
"@types/lodash": "^4.14.118",
"@types/react": "^16.4.18",
"@types/react-dom": "^16.0.9",
"babel-preset-react": "^6.24.1",
"lodash": "^4.17.11",
"prop-types": "^15.6.2",
"react": "^16.6.1",
"react-dom": "^16.6.1",
"storm-react-diagrams": "^5.2.1",
"ts-loader": "3.5.0",
"typescript": "^3.1.6"
"ts-loader": "6.0.3",
"typescript": "^3.1.6",
"webpack": "^4.0.0"
},
"devDependencies": {
"webpack-dev-server": "2.11.2"
"webpack-dev-server": "^3.1.11"
},
"resolutions": {
"browserslist": "4.6.2",
"caniuse-lite": "1.0.30000974"
}
}
12 changes: 12 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
Loading

0 comments on commit 4f6449e

Please sign in to comment.