webpacker 5.1.1 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintrc.js +8 -8
  3. data/.github/workflows/jest.yml +38 -0
  4. data/.github/workflows/js-lint.yml +39 -0
  5. data/.github/workflows/rubocop.yml +39 -0
  6. data/.github/workflows/ruby.yml +70 -0
  7. data/.node-version +1 -1
  8. data/CHANGELOG.md +9 -3
  9. data/Gemfile.lock +76 -76
  10. data/README.md +11 -19
  11. data/docs/css.md +58 -3
  12. data/docs/integrations.md +1 -1
  13. data/docs/target.md +22 -0
  14. data/docs/testing.md +1 -1
  15. data/docs/troubleshooting.md +3 -1
  16. data/docs/typescript.md +44 -0
  17. data/docs/webpack-dev-server.md +1 -1
  18. data/lib/install/config/babel.config.js +1 -3
  19. data/lib/install/config/webpacker.yml +1 -1
  20. data/lib/tasks/webpacker/check_node.rake +1 -1
  21. data/lib/tasks/webpacker/check_yarn.rake +1 -1
  22. data/lib/webpacker/compiler.rb +7 -2
  23. data/lib/webpacker/configuration.rb +12 -4
  24. data/lib/webpacker/dev_server_runner.rb +2 -2
  25. data/lib/webpacker/helper.rb +25 -6
  26. data/lib/webpacker/railtie.rb +2 -2
  27. data/lib/webpacker/runner.rb +1 -0
  28. data/lib/webpacker/version.rb +1 -1
  29. data/lib/webpacker/webpack_runner.rb +2 -2
  30. data/package.json +29 -29
  31. data/package/__tests__/config.js +12 -1
  32. data/package/__tests__/development.js +14 -1
  33. data/package/config.js +4 -1
  34. data/package/configPath.js +3 -0
  35. data/package/env.js +1 -2
  36. data/package/environments/__tests__/base.js +26 -9
  37. data/package/environments/base.js +5 -6
  38. data/package/environments/development.js +39 -33
  39. data/package/environments/production.js +1 -3
  40. data/package/rules/babel.js +11 -4
  41. data/package/rules/file.js +1 -0
  42. data/package/rules/node_modules.js +1 -3
  43. data/package/rules/sass.js +1 -1
  44. data/package/utils/helpers.js +1 -1
  45. data/test/compiler_test.rb +8 -3
  46. data/test/configuration_test.rb +8 -7
  47. data/test/dev_server_runner_test.rb +1 -1
  48. data/test/helper_test.rb +3 -0
  49. data/test/test_app/config/webpacker.yml +7 -1
  50. data/test/test_app/public/packs/manifest.json +1 -0
  51. data/test/webpack_runner_test.rb +1 -1
  52. data/yarn.lock +2422 -2932
  53. metadata +10 -4
@@ -29,9 +29,9 @@ class Webpacker::Engine < ::Rails::Engine
29
29
  initializer "webpacker.logger" do
30
30
  config.after_initialize do
31
31
  if ::Rails.logger.respond_to?(:tagged)
32
- Webpacker.logger = ::Rails.logger
33
- else
34
32
  Webpacker.logger = ActiveSupport::TaggedLogging.new(::Rails.logger)
33
+ else
34
+ Webpacker.logger = ::Rails.logger
35
35
  end
36
36
  end
37
37
  end
@@ -12,6 +12,7 @@ module Webpacker
12
12
  @app_path = File.expand_path(".", Dir.pwd)
13
13
  @node_modules_bin_path = ENV["WEBPACKER_NODE_MODULES_BIN_PATH"] || `yarn bin`.chomp
14
14
  @webpack_config = File.join(@app_path, "config/webpack/#{ENV["NODE_ENV"]}.js")
15
+ @webpacker_config = File.join(@app_path, "config/webpacker.yml")
15
16
 
16
17
  unless File.exist?(@webpack_config)
17
18
  $stderr.puts "webpack config #{@webpack_config} not found, please run 'bundle exec rails webpacker:install' to install Webpacker with default configs or add the missing config file for your custom environment."
@@ -1,4 +1,4 @@
1
1
  module Webpacker
2
2
  # Change the version in package.json too, please!
3
- VERSION = "5.1.1".freeze
3
+ VERSION = "5.2.0".freeze
4
4
  end
@@ -5,6 +5,7 @@ module Webpacker
5
5
  class WebpackRunner < Webpacker::Runner
6
6
  def run
7
7
  env = Webpacker::Compiler.env
8
+ env["WEBPACKER_CONFIG"] = @webpacker_config
8
9
 
9
10
  cmd = if node_modules_bin_exist?
10
11
  ["#{@node_modules_bin_path}/webpack"]
@@ -12,9 +13,8 @@ module Webpacker
12
13
  ["yarn", "webpack"]
13
14
  end
14
15
 
15
- if ARGV.include?("--debug")
16
+ if @argv.include?("--debug-webpacker")
16
17
  cmd = [ "node", "--inspect-brk"] + cmd
17
- ARGV.delete("--debug")
18
18
  end
19
19
 
20
20
  cmd += ["--config", @webpack_config] + @argv
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rails/webpacker",
3
- "version": "5.1.1",
3
+ "version": "5.2.0",
4
4
  "description": "Use webpack to manage app-like JavaScript modules in Rails",
5
5
  "main": "package/index.js",
6
6
  "files": [
@@ -8,56 +8,56 @@
8
8
  "lib/install/config/webpacker.yml"
9
9
  ],
10
10
  "engines": {
11
- "node": ">=10.13.0",
11
+ "node": ">=10.17.0",
12
12
  "yarn": ">=1 <2"
13
13
  },
14
14
  "dependencies": {
15
- "@babel/core": "^7.9.0",
16
- "@babel/plugin-proposal-class-properties": "^7.8.3",
17
- "@babel/plugin-proposal-object-rest-spread": "^7.9.0",
15
+ "@babel/core": "^7.11.1",
16
+ "@babel/plugin-proposal-class-properties": "^7.10.4",
17
+ "@babel/plugin-proposal-object-rest-spread": "^7.10.1",
18
18
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
19
- "@babel/plugin-transform-destructuring": "^7.8.8",
20
- "@babel/plugin-transform-regenerator": "^7.8.7",
21
- "@babel/plugin-transform-runtime": "^7.9.0",
22
- "@babel/preset-env": "^7.9.0",
23
- "@babel/runtime": "^7.9.2",
19
+ "@babel/plugin-transform-destructuring": "^7.10.1",
20
+ "@babel/plugin-transform-regenerator": "^7.10.1",
21
+ "@babel/plugin-transform-runtime": "^7.11.0",
22
+ "@babel/preset-env": "^7.11.0",
23
+ "@babel/runtime": "^7.11.2",
24
24
  "babel-loader": "^8.1.0",
25
- "babel-plugin-dynamic-import-node": "^2.3.0",
25
+ "babel-plugin-dynamic-import-node": "^2.3.3",
26
26
  "babel-plugin-macros": "^2.8.0",
27
27
  "case-sensitive-paths-webpack-plugin": "^2.3.0",
28
- "compression-webpack-plugin": "^3.1.0",
29
- "core-js": "^3.6.4",
30
- "css-loader": "^3.4.2",
28
+ "compression-webpack-plugin": "^4.0.0",
29
+ "core-js": "^3.6.5",
30
+ "css-loader": "^3.5.3",
31
31
  "file-loader": "^6.0.0",
32
- "flatted": "^2.0.1",
32
+ "flatted": "^3.0.4",
33
33
  "glob": "^7.1.6",
34
- "js-yaml": "^3.13.1",
34
+ "js-yaml": "^3.14.0",
35
35
  "mini-css-extract-plugin": "^0.9.0",
36
- "node-sass": "^4.13.1",
36
+ "node-sass": "^4.14.1",
37
37
  "optimize-css-assets-webpack-plugin": "^5.0.3",
38
38
  "path-complete-extname": "^1.0.0",
39
39
  "pnp-webpack-plugin": "^1.6.4",
40
- "postcss-flexbugs-fixes": "^4.2.0",
40
+ "postcss-flexbugs-fixes": "^4.2.1",
41
41
  "postcss-import": "^12.0.1",
42
42
  "postcss-loader": "^3.0.0",
43
43
  "postcss-preset-env": "^6.7.0",
44
44
  "postcss-safe-parser": "^4.0.2",
45
- "regenerator-runtime": "^0.13.5",
45
+ "regenerator-runtime": "^0.13.7",
46
46
  "sass-loader": "^8.0.2",
47
- "style-loader": "^1.1.3",
48
- "terser-webpack-plugin": "^2.3.5",
49
- "webpack": "^4.42.1",
47
+ "style-loader": "^1.2.1",
48
+ "terser-webpack-plugin": "^4.0.0",
49
+ "webpack": "^4.44.1",
50
50
  "webpack-assets-manifest": "^3.1.1",
51
- "webpack-cli": "^3.3.11",
51
+ "webpack-cli": "^3.3.12",
52
52
  "webpack-sources": "^1.4.3"
53
53
  },
54
54
  "devDependencies": {
55
- "eslint": "^6.8.0",
56
- "eslint-config-airbnb": "^18.1.0",
57
- "eslint-plugin-import": "^2.20.1",
58
- "eslint-plugin-jsx-a11y": "^6.2.3",
59
- "eslint-plugin-react": "^7.19.0",
60
- "jest": "^25.1.0"
55
+ "eslint": "^7.6.0",
56
+ "eslint-config-airbnb": "^18.2.0",
57
+ "eslint-plugin-import": "^2.22.0",
58
+ "eslint-plugin-jsx-a11y": "^6.3.1",
59
+ "eslint-plugin-react": "^7.20.5",
60
+ "jest": "^26.2.2"
61
61
  },
62
62
  "jest": {
63
63
  "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",
@@ -23,6 +23,16 @@ describe('Config', () => {
23
23
  expect(config.publicPath).toEqual('http://foo.com/packs/')
24
24
  })
25
25
 
26
+ test('should return additional paths as listed in app config, with resolved paths', () => {
27
+ expect(config.additional_paths).toEqual(
28
+ [
29
+ 'app/assets',
30
+ '/etc/yarn',
31
+ 'app/elm'
32
+ ]
33
+ )
34
+ })
35
+
26
36
  test('should return extensions as listed in app config', () => {
27
37
  expect(config.extensions).toEqual([
28
38
  '.mjs',
@@ -37,7 +47,8 @@ describe('Config', () => {
37
47
  '.svg',
38
48
  '.gif',
39
49
  '.jpeg',
40
- '.jpg'
50
+ '.jpg',
51
+ '.elm'
41
52
  ])
42
53
  })
43
54
 
@@ -11,9 +11,10 @@ describe('Development environment', () => {
11
11
  describe('toWebpackConfig', () => {
12
12
  beforeEach(() => jest.resetModules())
13
13
 
14
- test('should use development config and environment', () => {
14
+ test('should use development config and environment including devServer if WEBPACK_DEV_SERVER', () => {
15
15
  process.env.RAILS_ENV = 'development'
16
16
  process.env.NODE_ENV = 'development'
17
+ process.env.WEBPACK_DEV_SERVER = 'YES'
17
18
  const { environment } = require('../index')
18
19
 
19
20
  const config = environment.toWebpackConfig()
@@ -26,5 +27,17 @@ describe('Development environment', () => {
26
27
  }
27
28
  })
28
29
  })
30
+
31
+ test('should use development config and environment if WEBPACK_DEV_SERVER', () => {
32
+ process.env.RAILS_ENV = 'development'
33
+ process.env.NODE_ENV = 'development'
34
+ process.env.WEBPACK_DEV_SERVER = undefined
35
+ const { environment } = require('../index')
36
+
37
+ const config = environment.toWebpackConfig()
38
+ expect(config.output.path).toEqual(resolve('public', 'packs'))
39
+ expect(config.output.publicPath).toEqual('/packs/')
40
+ expect(config.devServer).toEqual(undefined)
41
+ })
29
42
  })
30
43
  })
@@ -4,9 +4,9 @@ const { readFileSync } = require('fs')
4
4
  const deepMerge = require('./utils/deep_merge')
5
5
  const { isArray, ensureTrailingSlash } = require('./utils/helpers')
6
6
  const { railsEnv } = require('./env')
7
+ const configPath = require('./configPath')
7
8
 
8
9
  const defaultConfigPath = require.resolve('../lib/install/config/webpacker.yml')
9
- const configPath = resolve('config', 'webpacker.yml')
10
10
 
11
11
  const getDefaultConfig = () => {
12
12
  const defaultConfig = safeLoad(readFileSync(defaultConfigPath), 'utf8')
@@ -24,6 +24,9 @@ if (isArray(app.static_assets_extensions) && app.static_assets_extensions.length
24
24
  const config = deepMerge(defaults, app)
25
25
  config.outputPath = resolve(config.public_root_path, config.public_output_path)
26
26
 
27
+ // Merge resolved_paths into additional_paths for backwards-compat
28
+ config.additional_paths = config.additional_paths.concat(config.resolved_paths || [])
29
+
27
30
  // Ensure that the publicPath includes our asset host so dynamic imports
28
31
  // (code-splitting chunks and static assets) load from the CDN instead of a relative path.
29
32
  const getPublicPath = () => {
@@ -0,0 +1,3 @@
1
+ const { resolve } = require('path')
2
+
3
+ module.exports = process.env.WEBPACKER_CONFIG || resolve('config', 'webpacker.yml')
@@ -1,10 +1,9 @@
1
- const { resolve } = require('path')
2
1
  const { safeLoad } = require('js-yaml')
3
2
  const { readFileSync } = require('fs')
4
3
 
5
4
  const NODE_ENVIRONMENTS = ['development', 'production', 'test']
6
5
  const DEFAULT = 'production'
7
- const configPath = resolve('config', 'webpacker.yml')
6
+ const configPath = require('./configPath')
8
7
 
9
8
  const railsEnv = process.env.RAILS_ENV
10
9
  const nodeEnv = process.env.NODE_ENV
@@ -31,18 +31,18 @@ describe('Environment', () => {
31
31
 
32
32
  test('should return multi file entry points', () => {
33
33
  const config = environment.toWebpackConfig()
34
- expect(config.entry.multi_entry.sort()).toEqual(
35
- [
36
- resolve('app', 'javascript', 'packs', 'multi_entry.css'),
37
- resolve('app', 'javascript', 'packs', 'multi_entry.js')
38
- ]
39
- )
34
+ expect(config.entry.multi_entry.sort()).toEqual([
35
+ resolve('app', 'javascript', 'packs', 'multi_entry.css'),
36
+ resolve('app', 'javascript', 'packs', 'multi_entry.js')
37
+ ])
40
38
  })
41
39
 
42
40
  test('should return output', () => {
43
41
  const config = environment.toWebpackConfig()
44
42
  expect(config.output.filename).toEqual('js/[name]-[contenthash].js')
45
- expect(config.output.chunkFilename).toEqual('js/[name]-[contenthash].chunk.js')
43
+ expect(config.output.chunkFilename).toEqual(
44
+ 'js/[name]-[contenthash].chunk.js'
45
+ )
46
46
  })
47
47
 
48
48
  test('should return default loader rules for each file in config/loaders', () => {
@@ -50,8 +50,24 @@ describe('Environment', () => {
50
50
  const defaultRules = Object.keys(rules)
51
51
  const configRules = config.module.rules
52
52
 
53
- expect(defaultRules.length).toEqual(7)
54
- expect(configRules.length).toEqual(8)
53
+ expect(defaultRules.length).toEqual(6)
54
+ expect(configRules.length).toEqual(6)
55
+ })
56
+
57
+ test('should return cache path for nodeModules rule', () => {
58
+ const nodeModulesLoader = rules.nodeModules.use.find(
59
+ (rule) => rule.loader === 'babel-loader'
60
+ )
61
+
62
+ expect(nodeModulesLoader.options.cacheDirectory).toBeTruthy()
63
+ })
64
+
65
+ test('should return cache path for babel-loader rule', () => {
66
+ const babelLoader = rules.babel.use.find(
67
+ (rule) => rule.loader === 'babel-loader'
68
+ )
69
+
70
+ expect(babelLoader.options.cacheDirectory).toBeTruthy()
55
71
  })
56
72
 
57
73
  test('should return default plugins', () => {
@@ -70,6 +86,7 @@ describe('Environment', () => {
70
86
  resolve('app', 'javascript'),
71
87
  resolve('app/assets'),
72
88
  resolve('/etc/yarn'),
89
+ resolve('app/elm'),
73
90
  'node_modules'
74
91
  ])
75
92
  })
@@ -30,7 +30,7 @@ const getPluginList = () => {
30
30
  const result = new ConfigList()
31
31
  result.append(
32
32
  'Environment',
33
- new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env)))
33
+ new webpack.EnvironmentPlugin(process.env)
34
34
  )
35
35
  result.append('CaseSensitivePaths', new CaseSensitivePathsPlugin())
36
36
  result.append(
@@ -43,7 +43,6 @@ const getPluginList = () => {
43
43
  result.append(
44
44
  'Manifest',
45
45
  new WebpackAssetsManifest({
46
- integrity: false,
47
46
  entrypoints: true,
48
47
  writeToDisk: true,
49
48
  publicPath: config.publicPathWithoutCDN
@@ -84,8 +83,8 @@ const getEntryObject = () => {
84
83
  const getModulePaths = () => {
85
84
  const result = new ConfigList()
86
85
  result.append('source', resolve(config.source_path))
87
- if (config.resolved_paths) {
88
- config.resolved_paths.forEach((path) => result.append(path, resolve(path)))
86
+ if (config.additional_paths) {
87
+ config.additional_paths.forEach((path) => result.append(path, resolve(path)))
89
88
  }
90
89
  result.append('node_modules', 'node_modules')
91
90
  return result
@@ -137,7 +136,7 @@ module.exports = class Base {
137
136
  // https://twitter.com/wSokra/status/969633336732905474
138
137
  splitChunks: {
139
138
  chunks: 'all',
140
- name: false
139
+ name: true
141
140
  },
142
141
  // Separate runtime chunk to enable long term caching
143
142
  // https://twitter.com/wSokra/status/969679223278505985
@@ -164,7 +163,7 @@ module.exports = class Base {
164
163
 
165
164
  module: {
166
165
  strictExportPresence: true,
167
- rules: [{ parser: { requireEnsure: false } }, ...this.loaders.values()]
166
+ rules: this.loaders.values()
168
167
  },
169
168
 
170
169
  plugins: this.plugins.values(),
@@ -7,41 +7,47 @@ module.exports = class extends Base {
7
7
  constructor() {
8
8
  super()
9
9
 
10
- if (devServer.hmr) {
11
- this.plugins.append('HotModuleReplacement', new webpack.HotModuleReplacementPlugin())
12
- this.config.output.filename = '[name]-[hash].js'
13
- }
14
-
15
10
  this.config.merge({
16
11
  mode: 'development',
17
- devtool: 'cheap-module-source-map',
18
- devServer: {
19
- clientLogLevel: 'none',
20
- compress: devServer.compress,
21
- quiet: devServer.quiet,
22
- disableHostCheck: devServer.disable_host_check,
23
- host: devServer.host,
24
- port: devServer.port,
25
- https: devServer.https,
26
- hot: devServer.hmr,
27
- contentBase,
28
- inline: devServer.inline,
29
- useLocalIp: devServer.use_local_ip,
30
- public: devServer.public,
31
- publicPath,
32
- historyApiFallback: {
33
- disableDotRule: true
34
- },
35
- headers: devServer.headers,
36
- overlay: devServer.overlay,
37
- stats: {
38
- entrypoints: false,
39
- errorDetails: true,
40
- modules: false,
41
- moduleTrace: false
42
- },
43
- watchOptions: devServer.watch_options
44
- }
12
+ devtool: 'cheap-module-source-map'
45
13
  })
14
+
15
+ if (process.env.WEBPACK_DEV_SERVER
16
+ && process.env.WEBPACK_DEV_SERVER !== 'undefined') {
17
+ if (devServer.hmr) {
18
+ this.plugins.append('HotModuleReplacement', new webpack.HotModuleReplacementPlugin())
19
+ this.config.output.filename = '[name]-[hash].js'
20
+ }
21
+
22
+ this.config.merge({
23
+ devServer: {
24
+ clientLogLevel: 'none',
25
+ compress: devServer.compress,
26
+ quiet: devServer.quiet,
27
+ disableHostCheck: devServer.disable_host_check,
28
+ host: devServer.host,
29
+ port: devServer.port,
30
+ https: devServer.https,
31
+ hot: devServer.hmr,
32
+ contentBase,
33
+ inline: devServer.inline,
34
+ useLocalIp: devServer.use_local_ip,
35
+ public: devServer.public,
36
+ publicPath,
37
+ historyApiFallback: {
38
+ disableDotRule: true
39
+ },
40
+ headers: devServer.headers,
41
+ overlay: devServer.overlay,
42
+ stats: {
43
+ entrypoints: false,
44
+ errorDetails: true,
45
+ modules: false,
46
+ moduleTrace: false
47
+ },
48
+ watchOptions: devServer.watch_options
49
+ }
50
+ })
51
+ }
46
52
  }
47
53
  }
@@ -13,7 +13,6 @@ module.exports = class extends Base {
13
13
  new CompressionPlugin({
14
14
  filename: '[path].gz[query]',
15
15
  algorithm: 'gzip',
16
- cache: true,
17
16
  test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
18
17
  })
19
18
  )
@@ -24,7 +23,6 @@ module.exports = class extends Base {
24
23
  new CompressionPlugin({
25
24
  filename: '[path].br[query]',
26
25
  algorithm: 'brotliCompress',
27
- cache: true,
28
26
  test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
29
27
  })
30
28
  )
@@ -48,7 +46,7 @@ module.exports = class extends Base {
48
46
  optimization: {
49
47
  minimizer: [
50
48
  new TerserPlugin({
51
- parallel: true,
49
+ parallel: Number.parseInt(process.env.WEBPACKER_PARALLEL, 10) || true,
52
50
  cache: true,
53
51
  sourceMap: true,
54
52
  terserOptions: {
@@ -1,18 +1,25 @@
1
- const { join, resolve } = require('path')
2
- const { cache_path: cachePath, source_path: sourcePath, resolved_paths: resolvedPaths } = require('../config')
1
+ const { resolve } = require('path')
2
+ const { realpathSync } = require('fs')
3
+ const { source_path: sourcePath, additional_paths: additionalPaths } = require('../config')
3
4
  const { nodeEnv } = require('../env')
4
5
 
5
6
  // Process application Javascript code with Babel.
6
7
  // Uses application .babelrc to apply any transformations
7
8
  module.exports = {
8
9
  test: /\.(js|jsx|mjs|ts|tsx)?(\.erb)?$/,
9
- include: [sourcePath, ...resolvedPaths].map((p) => resolve(p)),
10
+ include: [sourcePath, ...additionalPaths].map((p) => {
11
+ try {
12
+ return realpathSync(p)
13
+ } catch (e) {
14
+ return resolve(p)
15
+ }
16
+ }),
10
17
  exclude: /node_modules/,
11
18
  use: [
12
19
  {
13
20
  loader: 'babel-loader',
14
21
  options: {
15
- cacheDirectory: join(cachePath, 'babel-loader-node-modules'),
22
+ cacheDirectory: true,
16
23
  cacheCompression: nodeEnv === 'production',
17
24
  compact: nodeEnv === 'production'
18
25
  }