webpacker 4.0.7 → 5.4.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.eslintrc.js +8 -8
- data/.github/workflows/jest.yml +38 -0
- data/.github/workflows/js-lint.yml +39 -0
- data/.github/workflows/rubocop.yml +39 -0
- data/.github/workflows/ruby.yml +46 -0
- data/.node-version +1 -1
- data/.rubocop.yml +118 -14
- data/CHANGELOG.md +301 -138
- data/CONTRIBUTING.md +1 -1
- data/Gemfile +1 -0
- data/Gemfile.lock +123 -92
- data/README.md +86 -211
- data/docs/css.md +72 -6
- data/docs/deployment.md +40 -11
- data/docs/docker.md +33 -14
- data/docs/engines.md +53 -3
- data/docs/env.md +0 -2
- data/docs/es6.md +19 -1
- data/docs/integrations.md +220 -0
- data/docs/target.md +22 -0
- data/docs/testing.md +2 -3
- data/docs/troubleshooting.md +39 -9
- data/docs/typescript.md +93 -26
- data/docs/webpack-dev-server.md +2 -2
- data/docs/webpack.md +18 -3
- data/gemfiles/Gemfile-rails-edge +1 -1
- data/gemfiles/{Gemfile-rails.4.2.x → Gemfile-rails.6.0.x} +1 -1
- data/lib/install/bin/webpack +0 -1
- data/lib/install/bin/webpack-dev-server +0 -1
- data/lib/install/coffee.rb +1 -1
- data/lib/install/config/babel.config.js +23 -13
- data/lib/install/config/webpacker.yml +3 -6
- data/lib/install/elm.rb +1 -1
- data/lib/install/erb.rb +2 -2
- data/lib/install/examples/angular/hello_angular/polyfills.ts +2 -2
- data/lib/install/examples/react/babel.config.js +28 -14
- data/lib/install/examples/react/tsconfig.json +2 -1
- data/lib/install/examples/svelte/app.svelte +11 -0
- data/lib/install/examples/svelte/hello_svelte.js +20 -0
- data/lib/install/examples/typescript/tsconfig.json +2 -1
- data/lib/install/loaders/elm.js +9 -6
- data/lib/install/loaders/svelte.js +9 -0
- data/lib/install/svelte.rb +29 -0
- data/lib/install/template.rb +14 -6
- data/lib/install/typescript.rb +6 -13
- data/lib/install/vue.rb +1 -1
- data/lib/tasks/installers.rake +1 -0
- data/lib/tasks/webpacker/check_node.rake +15 -8
- data/lib/tasks/webpacker/check_yarn.rake +16 -10
- data/lib/tasks/webpacker/clean.rake +25 -0
- data/lib/tasks/webpacker/clobber.rake +8 -4
- data/lib/tasks/webpacker/compile.rake +2 -10
- data/lib/tasks/webpacker/yarn_install.rake +11 -1
- data/lib/tasks/webpacker.rake +2 -0
- data/lib/webpacker/commands.rb +53 -1
- data/lib/webpacker/compiler.rb +21 -10
- data/lib/webpacker/configuration.rb +36 -13
- data/lib/webpacker/dev_server.rb +1 -1
- data/lib/webpacker/dev_server_proxy.rb +5 -9
- data/lib/webpacker/dev_server_runner.rb +6 -6
- data/lib/webpacker/env.rb +6 -2
- data/lib/webpacker/helper.rb +70 -25
- data/lib/webpacker/manifest.rb +4 -4
- data/lib/webpacker/railtie.rb +6 -43
- data/lib/webpacker/runner.rb +1 -0
- data/lib/webpacker/version.rb +1 -1
- data/lib/webpacker/webpack_runner.rb +2 -2
- data/lib/webpacker.rb +9 -1
- data/package/__tests__/config.js +12 -24
- data/package/__tests__/dev_server.js +2 -0
- data/package/__tests__/development.js +14 -1
- data/package/config.js +6 -11
- data/package/configPath.js +3 -0
- data/package/config_types/config_list.js +3 -3
- data/package/config_types/config_object.js +1 -1
- data/package/dev_server.js +1 -1
- data/package/env.js +1 -2
- data/package/environments/__tests__/base.js +29 -2
- data/package/environments/base.js +18 -8
- data/package/environments/development.js +39 -37
- data/package/environments/production.js +12 -2
- data/package/rules/babel.js +12 -5
- data/package/rules/file.js +3 -2
- data/package/rules/node_modules.js +3 -5
- data/package/rules/sass.js +11 -2
- data/package/utils/__tests__/get_style_rule.js +9 -0
- data/package/utils/deep_merge.js +5 -5
- data/package/utils/get_style_rule.js +7 -12
- data/package/utils/helpers.js +10 -10
- data/package.json +43 -43
- data/test/command_test.rb +6 -0
- data/test/compiler_test.rb +10 -6
- data/test/configuration_test.rb +40 -30
- data/test/dev_server_runner_test.rb +1 -1
- data/test/dev_server_test.rb +22 -0
- data/test/helper_test.rb +58 -9
- data/test/manifest_test.rb +37 -6
- data/test/rake_tasks_test.rb +17 -0
- data/test/test_app/app/javascript/packs/multi_entry.css +4 -0
- data/test/test_app/app/javascript/packs/multi_entry.js +4 -0
- data/test/test_app/bin/webpack +0 -1
- data/test/test_app/bin/webpack-dev-server +0 -1
- data/test/test_app/config/application.rb +0 -1
- data/test/test_app/config/webpacker.yml +8 -1
- data/test/test_app/public/packs/manifest.json +4 -0
- data/test/webpack_runner_test.rb +1 -1
- data/webpacker.gemspec +6 -4
- data/yarn.lock +4350 -4099
- metadata +63 -23
- data/.travis.yml +0 -53
- data/gemfiles/Gemfile-rails.5.0.x +0 -9
- data/gemfiles/Gemfile-rails.5.1.x +0 -9
- data/lib/install/loaders/typescript.js +0 -11
data/docs/docker.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# Docker
|
2
2
|
|
3
|
-
To setup webpacker with a dockerized Rails application
|
3
|
+
To setup webpacker with a dockerized Rails application.
|
4
4
|
|
5
5
|
First, add a new service for webpacker in docker-compose.yml:
|
6
6
|
|
@@ -9,8 +9,10 @@ version: '3'
|
|
9
9
|
services:
|
10
10
|
webpacker:
|
11
11
|
build: .
|
12
|
-
|
13
|
-
-
|
12
|
+
environment:
|
13
|
+
- NODE_ENV=development
|
14
|
+
- RAILS_ENV=development
|
15
|
+
- WEBPACKER_DEV_SERVER_HOST=0.0.0.0
|
14
16
|
command: ./bin/webpack-dev-server
|
15
17
|
volumes:
|
16
18
|
- .:/webpacker-example-app
|
@@ -22,24 +24,41 @@ add nodejs and yarn as dependencies in Dockerfile,
|
|
22
24
|
|
23
25
|
```dockerfile
|
24
26
|
FROM ruby:2.4.1
|
25
|
-
RUN apt-get update -qq
|
26
27
|
|
27
|
-
RUN
|
28
|
-
|
29
|
-
|
28
|
+
RUN apt-get update -qq && apt-get install -y build-essential nodejs \
|
29
|
+
&& rm -rf /var/lib/apt/lists/* \
|
30
|
+
&& curl -o- -L https://yarnpkg.com/install.sh | bash
|
30
31
|
|
31
|
-
|
32
|
-
|
32
|
+
# Rest of the commands....
|
33
|
+
```
|
34
|
+
|
35
|
+
Please note: if using `assets:precompile` in the Dockerfile or have issues with the snippet above then try:
|
36
|
+
|
37
|
+
```dockerfile
|
38
|
+
FROM ruby:2.4.1
|
39
|
+
|
40
|
+
RUN curl -sL https://deb.nodesource.com/setup_8.x | bash \
|
41
|
+
&& apt-get update && apt-get install -y nodejs && rm -rf /var/lib/apt/lists/* \
|
42
|
+
&& curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
|
43
|
+
&& echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
|
44
|
+
&& apt-get update && apt-get install -y yarn && rm -rf /var/lib/apt/lists/*
|
33
45
|
|
34
46
|
# Rest of the commands....
|
35
47
|
```
|
36
48
|
|
37
|
-
|
49
|
+
then add the webpacker host name environment variable to the web/app service:
|
38
50
|
|
39
|
-
```
|
40
|
-
|
41
|
-
|
42
|
-
|
51
|
+
```Dockerfile
|
52
|
+
web:
|
53
|
+
build:
|
54
|
+
context: .
|
55
|
+
command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
|
56
|
+
volumes:
|
57
|
+
- .:/usr/src/app
|
58
|
+
ports:
|
59
|
+
- "3000:3000"
|
60
|
+
environment:
|
61
|
+
- WEBPACKER_DEV_SERVER_HOST=webpacker
|
43
62
|
```
|
44
63
|
|
45
64
|
Lastly, rebuild your container:
|
data/docs/engines.md
CHANGED
@@ -9,7 +9,7 @@ This guide describes how to do that using [Rails engines](https://guides.rubyonr
|
|
9
9
|
|
10
10
|
## Step 1: create Rails engine.
|
11
11
|
|
12
|
-
First, you create a Rails engine (say, `MyEngine`). See the
|
12
|
+
First, you create a Rails engine (say, `MyEngine`). See the official [Rails guide](https://guides.rubyonrails.org/engines.html).
|
13
13
|
|
14
14
|
## Step 2: install Webpacker within the engine.
|
15
15
|
|
@@ -99,9 +99,18 @@ Now you can use `stylesheet_pack_tag` and `javascript_pack_tag` from within your
|
|
99
99
|
|
100
100
|
Add Rake task to compile assets in production (`rake my_engine:webpacker:compile`)
|
101
101
|
|
102
|
-
- File `
|
102
|
+
- File `my_engine_rootlib/tasks/my_engine_tasks.rake`
|
103
103
|
|
104
104
|
```ruby
|
105
|
+
def ensure_log_goes_to_stdout
|
106
|
+
old_logger = Webpacker.logger
|
107
|
+
Webpacker.logger = ActiveSupport::Logger.new(STDOUT)
|
108
|
+
yield
|
109
|
+
ensure
|
110
|
+
Webpacker.logger = old_logger
|
111
|
+
end
|
112
|
+
|
113
|
+
|
105
114
|
namespace :my_engine do
|
106
115
|
namespace :webpacker do
|
107
116
|
desc "Install deps with yarn"
|
@@ -114,16 +123,44 @@ namespace :my_engine do
|
|
114
123
|
desc "Compile JavaScript packs using webpack for production with digests"
|
115
124
|
task compile: [:yarn_install, :environment] do
|
116
125
|
Webpacker.with_node_env("production") do
|
126
|
+
ensure_log_goes_to_stdout do
|
117
127
|
if MyEngine.webpacker.commands.compile
|
118
128
|
# Successful compilation!
|
119
129
|
else
|
120
130
|
# Failed compilation
|
121
131
|
exit!
|
122
132
|
end
|
133
|
+
end
|
123
134
|
end
|
124
135
|
end
|
125
136
|
end
|
126
137
|
end
|
138
|
+
|
139
|
+
def yarn_install_available?
|
140
|
+
rails_major = Rails::VERSION::MAJOR
|
141
|
+
rails_minor = Rails::VERSION::MINOR
|
142
|
+
|
143
|
+
rails_major > 5 || (rails_major == 5 && rails_minor >= 1)
|
144
|
+
end
|
145
|
+
|
146
|
+
def enhance_assets_precompile
|
147
|
+
# yarn:install was added in Rails 5.1
|
148
|
+
deps = yarn_install_available? ? [] : ["my_engine:webpacker:yarn_install"]
|
149
|
+
Rake::Task["assets:precompile"].enhance(deps) do
|
150
|
+
Rake::Task["my_engine:webpacker:compile"].invoke
|
151
|
+
end
|
152
|
+
end
|
153
|
+
|
154
|
+
# Compile packs after we've compiled all other assets during precompilation
|
155
|
+
skip_webpacker_precompile = %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
|
156
|
+
|
157
|
+
unless skip_webpacker_precompile
|
158
|
+
if Rake::Task.task_defined?("assets:precompile")
|
159
|
+
enhance_assets_precompile
|
160
|
+
else
|
161
|
+
Rake::Task.define_task("assets:precompile" => "my_engine:webpacker:compile")
|
162
|
+
end
|
163
|
+
end
|
127
164
|
```
|
128
165
|
|
129
166
|
## Step 7: serving compiled packs.
|
@@ -155,9 +192,22 @@ To serve static assets from the engine's `public/` folder you must add a middlew
|
|
155
192
|
# application.rb
|
156
193
|
|
157
194
|
config.middleware.use(
|
158
|
-
|
195
|
+
Rack::Static,
|
159
196
|
urls: ["/my-engine-packs"], root: "my_engine/public"
|
160
197
|
)
|
161
198
|
```
|
199
|
+
or if you prefer to keep your engine-related configuration within the engine itself
|
200
|
+
|
201
|
+
```ruby
|
202
|
+
# my-engine-root/lib/my-engine/engine.rb
|
203
|
+
module MyEngine
|
204
|
+
class Engine < ::Rails:Engine
|
205
|
+
config.app_middleware.use(
|
206
|
+
Rack::Static,
|
207
|
+
urls: ["/my-engine-packs"], root: "my_engine/public"
|
208
|
+
)
|
209
|
+
end
|
210
|
+
end
|
211
|
+
```
|
162
212
|
|
163
213
|
**NOTE:** in the example above we assume that your `public_output_path` is set to `my-engine-packs` in your engine's `webpacker.yml`.
|
data/docs/env.md
CHANGED
@@ -49,8 +49,6 @@ dotenvFiles.forEach((dotenvFile) => {
|
|
49
49
|
dotenv.config({ path: dotenvFile, silent: true })
|
50
50
|
})
|
51
51
|
|
52
|
-
environment.plugins.prepend('Environment', new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))))
|
53
|
-
|
54
52
|
module.exports = environment
|
55
53
|
```
|
56
54
|
|
data/docs/es6.md
CHANGED
@@ -1,6 +1,5 @@
|
|
1
1
|
# ES6
|
2
2
|
|
3
|
-
|
4
3
|
## Babel
|
5
4
|
|
6
5
|
Webpacker ships with [babel](https://babeljs.io/) - a JavaScript compiler so
|
@@ -26,6 +25,25 @@ import "core-js/stable";
|
|
26
25
|
import "regenerator-runtime/runtime";
|
27
26
|
```
|
28
27
|
|
28
|
+
## Dynamic/Lazy Chunk Loading
|
29
|
+
|
30
|
+
For this section, you need Webpack and Webpacker 4. Then enable `SplitChunks` as it is explained in [docs/webpack](webpack.md).
|
31
|
+
|
32
|
+
[Dynamic code splitting](https://webpack.js.org/guides/code-splitting#dynamic-imports) enables you to conditionally request/run only the JS that you need. For example, if your site has a `searchBarComponent` on every page, you can reduce the page overhead by deferring the request for the `searchBarComponent` code until after the page has loaded, until the user has scrolled it into view, or until the user has clicked on an element.
|
33
|
+
|
34
|
+
```js
|
35
|
+
function loadSearchBarComponent() {
|
36
|
+
return import(/* webpackChunkName: "searchBarComponent" */ './pathTo/searchBarComponent')
|
37
|
+
}
|
38
|
+
```
|
39
|
+
|
40
|
+
The comment you see above (`/* webpackChunkName */`) is not arbitrary, it is one of webpacks [magic comments](https://webpack.js.org/api/module-methods/#magic-comments). They can be used to fine-tune `import()` with settings such as `defer` or `prefetch`.
|
41
|
+
|
42
|
+
**Warning**: You should not attempt to dynamically load anything from your `packs/` folder. Instead, try to make your `pack` scripts a hub from which you dynamically load `non-pack` scripts.
|
43
|
+
|
44
|
+
- [Docs for using magic comments](https://webpack.js.org/api/module-methods/#magic-comments)
|
45
|
+
- [Docs for configuring `splitChunks` in webpacker](https://github.com/rails/webpacker/blob/master/docs/webpack.md#add-splitchunks-webpack-v4).
|
46
|
+
- [Docs for using dynamic `import()`](https://webpack.js.org/guides/code-splitting#dynamic-imports).
|
29
47
|
|
30
48
|
## Module import vs require()
|
31
49
|
|
@@ -0,0 +1,220 @@
|
|
1
|
+
# Integrations
|
2
|
+
|
3
|
+
Webpacker ships with basic out-of-the-box integration for React, Angular, Vue and Elm.
|
4
|
+
You can see a list of available commands/tasks by running `bundle exec rails webpacker`:
|
5
|
+
|
6
|
+
## React
|
7
|
+
|
8
|
+
To use Webpacker with [React](https://facebook.github.io/react/), create a
|
9
|
+
new Rails 5.1+ app using `--webpack=react` option:
|
10
|
+
|
11
|
+
```bash
|
12
|
+
# Rails 5.1+
|
13
|
+
rails new myapp --webpack=react
|
14
|
+
```
|
15
|
+
|
16
|
+
(or run `bundle exec rails webpacker:install:react` in an existing Rails app already
|
17
|
+
setup with Webpacker).
|
18
|
+
|
19
|
+
The installer will add all relevant dependencies using Yarn, changes
|
20
|
+
to the configuration files, and an example React component to your
|
21
|
+
project in `app/javascript/packs` so that you can experiment with React right away.
|
22
|
+
|
23
|
+
|
24
|
+
## Angular with TypeScript
|
25
|
+
|
26
|
+
To use Webpacker with [Angular](https://angular.io/), create a
|
27
|
+
new Rails 5.1+ app using `--webpack=angular` option:
|
28
|
+
|
29
|
+
```bash
|
30
|
+
# Rails 5.1+
|
31
|
+
rails new myapp --webpack=angular
|
32
|
+
```
|
33
|
+
|
34
|
+
(or run `bundle exec rails webpacker:install:angular` on a Rails app already
|
35
|
+
setup with Webpacker).
|
36
|
+
|
37
|
+
The installer will add the TypeScript and Angular core libraries using Yarn alongside
|
38
|
+
a few changes to the configuration files. An example component written in
|
39
|
+
TypeScript will also be added to your project in `app/javascript` so that
|
40
|
+
you can experiment with Angular right away.
|
41
|
+
|
42
|
+
By default, Angular uses a JIT compiler for development environment. This
|
43
|
+
compiler is not compatible with restrictive CSP (Content Security
|
44
|
+
Policy) environments like Rails 5.2+. You can use Angular AOT compiler
|
45
|
+
in development with the [@ngtools/webpack](https://www.npmjs.com/package/@ngtools/webpack#usage) plugin.
|
46
|
+
|
47
|
+
Alternatively if you're using Rails 5.2+ you can enable `unsafe-eval` rule for your
|
48
|
+
development environment. This can be done in the `config/initializers/content_security_policy.rb`
|
49
|
+
with the following code:
|
50
|
+
|
51
|
+
```ruby
|
52
|
+
Rails.application.config.content_security_policy do |policy|
|
53
|
+
if Rails.env.development?
|
54
|
+
policy.script_src :self, :https, :unsafe_eval
|
55
|
+
else
|
56
|
+
policy.script_src :self, :https
|
57
|
+
end
|
58
|
+
end
|
59
|
+
```
|
60
|
+
|
61
|
+
|
62
|
+
## Vue
|
63
|
+
|
64
|
+
To use Webpacker with [Vue](https://vuejs.org/), create a
|
65
|
+
new Rails 5.1+ app using `--webpack=vue` option:
|
66
|
+
|
67
|
+
```bash
|
68
|
+
# Rails 5.1+
|
69
|
+
rails new myapp --webpack=vue
|
70
|
+
```
|
71
|
+
(or run `bundle exec rails webpacker:install:vue` on a Rails app already setup with Webpacker).
|
72
|
+
|
73
|
+
The installer will add Vue and its required libraries using Yarn alongside
|
74
|
+
automatically applying changes needed to the configuration files. An example component will
|
75
|
+
be added to your project in `app/javascript` so that you can experiment with Vue right away.
|
76
|
+
|
77
|
+
If you're using Rails 5.2+ you'll need to enable `unsafe-eval` rule for your development environment.
|
78
|
+
This can be done in the `config/initializers/content_security_policy.rb` with the following
|
79
|
+
configuration:
|
80
|
+
|
81
|
+
```ruby
|
82
|
+
Rails.application.config.content_security_policy do |policy|
|
83
|
+
if Rails.env.development?
|
84
|
+
policy.script_src :self, :https, :unsafe_eval
|
85
|
+
else
|
86
|
+
policy.script_src :self, :https
|
87
|
+
end
|
88
|
+
end
|
89
|
+
```
|
90
|
+
You can read more about this in the [Vue docs](https://vuejs.org/v2/guide/installation.html#CSP-environments).
|
91
|
+
|
92
|
+
### Lazy loading integration
|
93
|
+
|
94
|
+
See [docs/es6](es6.md) to know more about Webpack and Webpacker configuration.
|
95
|
+
|
96
|
+
For instance, you can lazy load Vue JS components:
|
97
|
+
|
98
|
+
Before:
|
99
|
+
```js
|
100
|
+
import Vue from 'vue'
|
101
|
+
import { VCard } from 'vuetify/lib'
|
102
|
+
|
103
|
+
Vue.component('VCard', VCard)
|
104
|
+
```
|
105
|
+
|
106
|
+
After:
|
107
|
+
```js
|
108
|
+
import Vue from 'vue'
|
109
|
+
|
110
|
+
// With destructuring assignment
|
111
|
+
Vue.component('VCard', import('vuetify/lib').then(({ VCard }) => VCard)
|
112
|
+
|
113
|
+
// Or without destructuring assignment
|
114
|
+
Vue.component('OtherComponent', () => import('./OtherComponent'))
|
115
|
+
```
|
116
|
+
|
117
|
+
You can use it in a Single File Component as well:
|
118
|
+
|
119
|
+
```html
|
120
|
+
<template>
|
121
|
+
...
|
122
|
+
</template>
|
123
|
+
|
124
|
+
<script>
|
125
|
+
export default {
|
126
|
+
components: {
|
127
|
+
OtherComponent: () => import('./OtherComponent')
|
128
|
+
}
|
129
|
+
}
|
130
|
+
</script>
|
131
|
+
```
|
132
|
+
|
133
|
+
By wrapping the import function into an arrow function, Vue will execute it only when it gets requested, loading the module in that moment.
|
134
|
+
|
135
|
+
##### Automatic registration
|
136
|
+
|
137
|
+
```js
|
138
|
+
/**
|
139
|
+
* The following block of code may be used to automatically register your
|
140
|
+
* Vue components. It will recursively scan this directory for the Vue
|
141
|
+
* components and automatically register them with their "basename".
|
142
|
+
*
|
143
|
+
* Eg. ./components/OtherComponent.vue -> <other-component></other-component>
|
144
|
+
* Eg. ./UI/ButtonComponent.vue -> <button-component></button-component>
|
145
|
+
*/
|
146
|
+
|
147
|
+
const files = require.context('./', true, /\.vue$/i)
|
148
|
+
files.keys().map(key => {
|
149
|
+
const component = key.split('/').pop().split('.')[0]
|
150
|
+
|
151
|
+
// With Lazy Loading
|
152
|
+
Vue.component(component, () => import(`${key}`))
|
153
|
+
|
154
|
+
// Or without Lazy Loading
|
155
|
+
Vue.component(component, files(key).default)
|
156
|
+
})
|
157
|
+
```
|
158
|
+
|
159
|
+
## Elm
|
160
|
+
|
161
|
+
To use Webpacker with [Elm](http://elm-lang.org), create a
|
162
|
+
new Rails 5.1+ app using `--webpack=elm` option:
|
163
|
+
|
164
|
+
```
|
165
|
+
# Rails 5.1+
|
166
|
+
rails new myapp --webpack=elm
|
167
|
+
```
|
168
|
+
|
169
|
+
(or run `bundle exec rails webpacker:install:elm` on a Rails app already setup with Webpacker).
|
170
|
+
|
171
|
+
The Elm library and its core packages will be added via Yarn and Elm.
|
172
|
+
An example `Main.elm` app will also be added to your project in `app/javascript`
|
173
|
+
so that you can experiment with Elm right away.
|
174
|
+
|
175
|
+
## Svelte
|
176
|
+
|
177
|
+
To use Webpacker with [Svelte](https://svelte.dev), create a
|
178
|
+
new Rails 5.1+ app using `--webpack=svelte` option:
|
179
|
+
|
180
|
+
```
|
181
|
+
# Rails 5.1+
|
182
|
+
rails new myapp --webpack=svelte
|
183
|
+
```
|
184
|
+
|
185
|
+
(or run `bundle exec rails webpacker:install:svelte` on a Rails app already setup with Webpacker).
|
186
|
+
|
187
|
+
Please play with the [Svelte Tutorial](https://svelte.dev/tutorial/basics) or learn more about its API at https://svelte.dev/docs
|
188
|
+
|
189
|
+
## Stimulus
|
190
|
+
|
191
|
+
To use Webpacker with [Stimulus](http://stimulusjs.org), create a
|
192
|
+
new Rails 5.1+ app using `--webpack=stimulus` option:
|
193
|
+
|
194
|
+
```
|
195
|
+
# Rails 5.1+
|
196
|
+
rails new myapp --webpack=stimulus
|
197
|
+
```
|
198
|
+
|
199
|
+
(or run `bundle exec rails webpacker:install:stimulus` on a Rails app already setup with Webpacker).
|
200
|
+
|
201
|
+
Please read [The Stimulus Handbook](https://stimulusjs.org/handbook/introduction) or learn more about its source code at https://github.com/stimulusjs/stimulus
|
202
|
+
|
203
|
+
## CoffeeScript
|
204
|
+
|
205
|
+
To add [CoffeeScript](http://coffeescript.org/) support,
|
206
|
+
run `bundle exec rails webpacker:install:coffee` on a Rails app already
|
207
|
+
setup with Webpacker.
|
208
|
+
|
209
|
+
An example `hello_coffee.coffee` file will also be added to your project
|
210
|
+
in `app/javascript/packs` so that you can experiment with CoffeeScript right away.
|
211
|
+
|
212
|
+
## Erb
|
213
|
+
|
214
|
+
To add [Erb](https://apidock.com/ruby/ERB) support in your JS templates,
|
215
|
+
run `bundle exec rails webpacker:install:erb` on a Rails app already
|
216
|
+
setup with Webpacker.
|
217
|
+
|
218
|
+
An example `hello_erb.js.erb` file will also be added to your project
|
219
|
+
in `app/javascript/packs` so that you can experiment with Erb-flavoured
|
220
|
+
javascript right away.
|
data/docs/target.md
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
# Target browsers
|
2
|
+
|
3
|
+
By default webpacker provides these front-end tools:
|
4
|
+
- [@babel/preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env)
|
5
|
+
- [Autoprefixer](https://github.com/postcss/autoprefixer)
|
6
|
+
- [postcss-preset-env](https://github.com/csstools/postcss-preset-env)
|
7
|
+
|
8
|
+
All these tools use [Browserslist](https://github.com/browserslist/browserslist) to detect which environment your users have
|
9
|
+
|
10
|
+
Webpacker browserslist default target:
|
11
|
+
```
|
12
|
+
defaults
|
13
|
+
```
|
14
|
+
|
15
|
+
`defaults`: `(> 0.5%, last 2 versions, Firefox ESR, not dead)`, [browserl.ist](https://browserl.ist/) is an online tool to check what browsers will be selected by some query.
|
16
|
+
|
17
|
+
To keep browsers data up to date, you need to run:
|
18
|
+
```bash
|
19
|
+
yarn upgrade caniuse-lite
|
20
|
+
```
|
21
|
+
|
22
|
+
at least once every few months, to prevent such [problems](https://github.com/browserslist/browserslist/issues/492)
|
data/docs/testing.md
CHANGED
@@ -10,8 +10,7 @@ Webpacker does not setup `Karma` by default, so you've to manually install it al
|
|
10
10
|
"test": "NODE_ENV=test karma start"
|
11
11
|
},
|
12
12
|
"dependencies": {
|
13
|
-
"typescript": "^2.5.2"
|
14
|
-
"ts-loader": "^2.3.7"
|
13
|
+
"typescript": "^2.5.2"
|
15
14
|
},
|
16
15
|
"devDependencies": {
|
17
16
|
"karma": "^1.7.1",
|
@@ -33,7 +32,7 @@ It is beneficial to use the same webpack configuration file (generated by webpac
|
|
33
32
|
```js
|
34
33
|
// config/webpack/test.js
|
35
34
|
const environment = require('./environment')
|
36
|
-
environment.plugins.get('Manifest').
|
35
|
+
environment.plugins.get('Manifest').options.writeToFileEmit = process.env.NODE_ENV !== 'test'
|
37
36
|
environment.loaders.append('istanbul-instrumenter', {
|
38
37
|
test: /\.ts$/,
|
39
38
|
enforce: "post",
|
data/docs/troubleshooting.md
CHANGED
@@ -4,22 +4,38 @@
|
|
4
4
|
|
5
5
|
1. Read the error message carefully. The error message will tell you the precise key value
|
6
6
|
that is not matching what Webpack expects.
|
7
|
-
2. Put a `debugger` statement in your Webpack configuration and run `bin/webpack --debug`.
|
7
|
+
2. Put a `debugger` statement in your Webpack configuration and run `bin/webpack --debug-webpacker`.
|
8
8
|
If you have a node debugger installed, you'll see the Chrome debugger for your webpack
|
9
|
-
config. For example, install the Chrome extension [NiM](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj) and
|
9
|
+
config. For example, install the Chrome extension [NiM](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj) and
|
10
10
|
set the option for the dev tools to open automatically. For more details on debugging,
|
11
11
|
see the official [Webpack docs on debugging](https://webpack.js.org/contribute/debugging/#devtools)
|
12
|
+
3. Any arguments that you add to bin/webpack get sent to webpack. For example, you can pass `--debug` to switch loaders to debug mode. See [webpack CLI debug options](https://webpack.js.org/api/cli/#debug-options) for more information on the available options.
|
13
|
+
4. You can also pass additional options to the command to run the webpack-dev-server and start the webpack-dev-server with the option `--debug-webpacker`
|
12
14
|
|
13
15
|
## ENOENT: no such file or directory - node-sass
|
14
16
|
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
basically, it can't find the `node-sass` binary.
|
19
|
-
An easy solution is to create a postinstall hook - `npm rebuild node-sass` in
|
20
|
-
`package.json` and that will ensure `node-sass` is rebuilt whenever
|
21
|
-
you install any new modules.
|
17
|
+
If you get the error `ENOENT: no such file or directory - node-sass` on deploy with
|
18
|
+
`assets:precompile` or `bundle exec rails webpacker:compile` you may need to
|
19
|
+
move Sass to production `dependencies`.
|
22
20
|
|
21
|
+
Move any packages that related to Sass (e.g. `node-sass` or `sass-loader`) from
|
22
|
+
`devDependencies` to `dependencies` in `package.json`. This is because
|
23
|
+
webpacker is running on a production system with the Rails workflow to build
|
24
|
+
the assets. Particularly on hosting providers that try to detect and do the right
|
25
|
+
thing, like Heroku.
|
26
|
+
|
27
|
+
However, if you get this on local development, or not during a deploy then you
|
28
|
+
may need to rebuild `node-sass`. It's a bit of a weird error; basically, it
|
29
|
+
can't find the `node-sass` binary. An easy solution is to create a postinstall
|
30
|
+
hook to ensure `node-sass` is rebuilt whenever new modules are installed.
|
31
|
+
|
32
|
+
In `package.json`:
|
33
|
+
|
34
|
+
```json
|
35
|
+
"scripts": {
|
36
|
+
"postinstall": "npm rebuild node-sass"
|
37
|
+
}
|
38
|
+
```
|
23
39
|
|
24
40
|
## Can't find hello_react.js in manifest.json
|
25
41
|
|
@@ -126,3 +142,17 @@ environment.plugins.append('ContextReplacement',
|
|
126
142
|
)
|
127
143
|
)
|
128
144
|
```
|
145
|
+
|
146
|
+
### Compilation Fails Silently
|
147
|
+
|
148
|
+
If compiling is not producing output files and there are no error messages to help troubleshoot. Setting the webpack_compile_output configuration variable to 'true' in webpacker.yml may add some helpful error information to your log file (Rails log/development.log or log/production.log)
|
149
|
+
|
150
|
+
```yml
|
151
|
+
# webpacker.yml
|
152
|
+
default: &default
|
153
|
+
source_path: app/javascript
|
154
|
+
source_entry_path: packs
|
155
|
+
public_root_path: public
|
156
|
+
public_output_path: complaints_packs
|
157
|
+
webpack_compile_output: true
|
158
|
+
```
|