webpacker 5.0.1 → 6.0.0.beta

data/package/__tests__/config.js

@@ -23,33 +23,12 @@ describe('Config', () => {
     expect(config.publicPath).toEqual('http://foo.com/packs/')
   })
 
-  test('should return extensions as listed in app config', () => {
-    expect(config.extensions).toEqual([
-      '.mjs',
-      '.js',
-      '.sass',
-      '.scss',
-      '.css',
-      '.module.sass',
-      '.module.scss',
-      '.module.css',
-      '.png',
-      '.svg',
-      '.gif',
-      '.jpeg',
-      '.jpg'
-    ])
-  })
-
-  test('should return static assets extensions as listed in app config', () => {
-    expect(config.static_assets_extensions).toEqual([
-      '.jpg',
-      '.jpeg',
-      '.png',
-      '.gif',
-      '.tiff',
-      '.ico',
-      '.svg',
+  test('should return additional paths as listed in app config, with resolved paths', () => {
+    expect(config.additional_paths).toEqual([
+      'app/assets',
+      '/etc/yarn',
+      'some.config.js',
+      'app/elm'
     ])
   })
 })

data/package/__tests__/dev_server.js

@@ -13,11 +13,13 @@ describe('DevServer', () => {
     process.env.RAILS_ENV = 'development'
     process.env.WEBPACKER_DEV_SERVER_HOST = '0.0.0.0'
     process.env.WEBPACKER_DEV_SERVER_PORT = 5000
+    process.env.WEBPACKER_DEV_SERVER_DISABLE_HOST_CHECK = false
 
     const devServer = require('../dev_server')
     expect(devServer).toBeDefined()
     expect(devServer.host).toEqual('0.0.0.0')
     expect(devServer.port).toEqual('5000')
+    expect(devServer.disable_host_check).toBe(false)
   })
 
   test('with custom env prefix', () => {

data/package/__tests__/development.js

@@ -8,23 +8,34 @@ chdirTestApp()
 describe('Development environment', () => {
   afterAll(chdirCwd)
 
-  describe('toWebpackConfig', () => {
+  describe('webpackConfig', () => {
     beforeEach(() => jest.resetModules())
 
-    test('should use development config and environment', () => {
+    test('should use development config and environment including devServer if WEBPACK_DEV_SERVER', () => {
       process.env.RAILS_ENV = 'development'
       process.env.NODE_ENV = 'development'
-      const { environment } = require('../index')
+      process.env.WEBPACK_DEV_SERVER = 'YES'
+      const { webpackConfig } = require('../index')
 
-      const config = environment.toWebpackConfig()
-      expect(config.output.path).toEqual(resolve('public', 'packs'))
-      expect(config.output.publicPath).toEqual('/packs/')
-      expect(config).toMatchObject({
+      expect(webpackConfig.output.path).toEqual(resolve('public', 'packs'))
+      expect(webpackConfig.output.publicPath).toEqual('/packs/')
+      expect(webpackConfig).toMatchObject({
         devServer: {
           host: 'localhost',
           port: 3035
         }
       })
     })
+
+    test('should use development config and environment if WEBPACK_DEV_SERVER', () => {
+      process.env.RAILS_ENV = 'development'
+      process.env.NODE_ENV = 'development'
+      process.env.WEBPACK_DEV_SERVER = undefined
+      const { webpackConfig } = require('../index')
+
+      expect(webpackConfig.output.path).toEqual(resolve('public', 'packs'))
+      expect(webpackConfig.output.publicPath).toEqual('/packs/')
+      expect(webpackConfig.devServer).toEqual(undefined)
+    })
   })
 })

data/package/__tests__/env.js

@@ -13,7 +13,9 @@ describe('Env', () => {
     process.env.NODE_ENV = 'development'
     expect(require('../env')).toEqual({
       railsEnv: 'development',
-      nodeEnv: 'development'
+      nodeEnv: 'development',
+      isProduction: false,
+      isDevelopment: true
     })
   })
 
@@ -22,7 +24,9 @@ describe('Env', () => {
     delete process.env.NODE_ENV
     expect(require('../env')).toEqual({
       railsEnv: 'development',
-      nodeEnv: 'production'
+      nodeEnv: 'production',
+      isProduction: true,
+      isDevelopment: false
     })
   })
 
@@ -31,7 +35,9 @@ describe('Env', () => {
     delete process.env.RAILS_ENV
     expect(require('../env')).toEqual({
       railsEnv: 'production',
-      nodeEnv: 'production'
+      nodeEnv: 'production',
+      isProduction: true,
+      isDevelopment: false
     })
   })
 
@@ -40,7 +46,9 @@ describe('Env', () => {
     process.env.NODE_ENV = 'staging'
     expect(require('../env')).toEqual({
       railsEnv: 'staging',
-      nodeEnv: 'production'
+      nodeEnv: 'production',
+      isProduction: true,
+      isDevelopment: false
     })
   })
 })

data/package/__tests__/production.js

@@ -8,19 +8,19 @@ chdirTestApp()
 describe('Production environment', () => {
   afterAll(chdirCwd)
 
-  describe('toWebpackConfig', () => {
+  describe('webpackConfig', () => {
     beforeEach(() => jest.resetModules())
 
     test('should use production config and environment', () => {
       process.env.RAILS_ENV = 'production'
       process.env.NODE_ENV = 'production'
 
-      const { environment } = require('../index')
-      const config = environment.toWebpackConfig()
+      const { webpackConfig } = require('../index')
 
-      expect(config.output.path).toEqual(resolve('public', 'packs'))
-      expect(config.output.publicPath).toEqual('/packs/')
-      expect(config).toMatchObject({
+      expect(webpackConfig.output.path).toEqual(resolve('public', 'packs'))
+      expect(webpackConfig.output.publicPath).toEqual('/packs/')
+
+      expect(webpackConfig).toMatchObject({
         devtool: 'source-map',
         stats: 'normal'
       })

data/package/__tests__/staging.js

@@ -8,19 +8,20 @@ chdirTestApp()
 describe('Custom environment', () => {
   afterAll(chdirCwd)
 
-  describe('toWebpackConfig', () => {
+  describe('webpackConfig', () => {
     beforeEach(() => jest.resetModules())
 
     test('should use staging config and default production environment', () => {
       process.env.RAILS_ENV = 'staging'
       delete process.env.NODE_ENV
 
-      const { environment } = require('../index')
-      const config = environment.toWebpackConfig()
+      const { webpackConfig } = require('../index')
 
-      expect(config.output.path).toEqual(resolve('public', 'packs-staging'))
-      expect(config.output.publicPath).toEqual('/packs-staging/')
-      expect(config).toMatchObject({
+      expect(webpackConfig.output.path).toEqual(
+        resolve('public', 'packs-staging')
+      )
+      expect(webpackConfig.output.publicPath).toEqual('/packs-staging/')
+      expect(webpackConfig).toMatchObject({
         devtool: 'source-map',
         stats: 'normal'
       })

data/package/__tests__/test.js

@@ -15,12 +15,11 @@ describe('Test environment', () => {
       process.env.RAILS_ENV = 'test'
       process.env.NODE_ENV = 'test'
 
-      const { environment } = require('../index')
-      const config = environment.toWebpackConfig()
+      const { webpackConfig } = require('../index')
 
-      expect(config.output.path).toEqual(resolve('public', 'packs-test'))
-      expect(config.output.publicPath).toEqual('/packs-test/')
-      expect(config.devServer).toEqual(undefined)
+      expect(webpackConfig.output.path).toEqual(resolve('public', 'packs-test'))
+      expect(webpackConfig.output.publicPath).toEqual('/packs-test/')
+      expect(webpackConfig.devServer).toEqual(undefined)
     })
   })
 })

data/package/babel/preset.js

@@ -0,0 +1,55 @@
+const { moduleExists } = require('@rails/webpacker')
+
+module.exports = function config(api) {
+  const validEnv = ['development', 'test', 'production']
+  const currentEnv = api.env()
+  const isDevelopmentEnv = api.env('development')
+  const isProductionEnv = api.env('production')
+  const isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      `Please specify a valid NODE_ENV or BABEL_ENV environment variable. 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',
+        {
+          useBuiltIns: 'entry',
+          corejs: '3.8',
+          modules: 'auto',
+          bugfixes: true,
+          loose: true,
+          exclude: ['transform-typeof-symbol']
+        }
+      ],
+      moduleExists('@babel/preset-typescript') && [
+        '@babel/preset-typescript',
+        { allExtensions: true, isTSX: true }
+      ],
+      moduleExists('@babel/preset-react') && [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+      ['@babel/plugin-proposal-class-properties', { loose: true }],
+      ['@babel/plugin-transform-runtime', { helpers: false }],
+      isProductionEnv &&
+        moduleExists('babel-plugin-transform-react-remove-prop-types') && [
+          'babel-plugin-transform-react-remove-prop-types',
+          { removeImport: true }
+        ]
+    ].filter(Boolean)
+  }
+}

data/package/config.js

@@ -1,12 +1,12 @@
 const { resolve } = require('path')
 const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
-const deepMerge = require('./utils/deep_merge')
-const { isArray, ensureTrailingSlash } = require('./utils/helpers')
+const { merge } = require('webpack-merge')
+const { ensureTrailingSlash } = require('./utils/helpers')
 const { railsEnv } = require('./env')
+const configPath = require('./configPath')
 
 const defaultConfigPath = require.resolve('../lib/install/config/webpacker.yml')
-const configPath = resolve('config', 'webpacker.yml')
 
 const getDefaultConfig = () => {
   const defaultConfig = safeLoad(readFileSync(defaultConfigPath), 'utf8')
@@ -16,12 +16,7 @@ const getDefaultConfig = () => {
 const defaults = getDefaultConfig()
 const app = safeLoad(readFileSync(configPath), 'utf8')[railsEnv]
 
-if (isArray(app.extensions) && app.extensions.length) delete defaults.extensions
-if (isArray(app.static_assets_extensions) && app.static_assets_extensions.length) {
-  delete defaults.static_assets_extensions
-}
-
-const config = deepMerge(defaults, app)
+const config = merge(defaults, app)
 config.outputPath = resolve(config.public_root_path, config.public_output_path)
 
 // Ensure that the publicPath includes our asset host so dynamic imports

data/package/configPath.js

@@ -0,0 +1,3 @@
+const { resolve } = require('path')
+
+module.exports = process.env.WEBPACKER_CONFIG || resolve('config', 'webpacker.yml')

data/package/dev_server.js

@@ -12,7 +12,7 @@ if (devServerConfig) {
   const envPrefix = config.dev_server.env_prefix || 'WEBPACKER_DEV_SERVER'
 
   Object.keys(devServerConfig).forEach((key) => {
-    const envValue = fetch(`${envPrefix}_${key.toUpperCase().replace(/_/g, '')}`)
+    const envValue = fetch(`${envPrefix}_${key.toUpperCase()}`)
     if (envValue !== undefined) devServerConfig[key] = envValue
   })
 }

data/package/env.js

@@ -1,13 +1,16 @@
-const { resolve } = require('path')
 const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
 
 const NODE_ENVIRONMENTS = ['development', 'production', 'test']
 const DEFAULT = 'production'
-const configPath = resolve('config', 'webpacker.yml')
+const configPath = require('./configPath')
 
 const railsEnv = process.env.RAILS_ENV
-const nodeEnv = process.env.NODE_ENV
+const rawNodeEnv = process.env.NODE_ENV
+const nodeEnv
+  = rawNodeEnv && NODE_ENVIRONMENTS.includes(rawNodeEnv) ? rawNodeEnv : DEFAULT
+const isProduction = nodeEnv === 'production'
+const isDevelopment = nodeEnv === 'development'
 
 const config = safeLoad(readFileSync(configPath), 'utf8')
 const availableEnvironments = Object.keys(config).join('|')
@@ -15,5 +18,7 @@ const regex = new RegExp(`^(${availableEnvironments})$`, 'g')
 
 module.exports = {
   railsEnv: railsEnv && railsEnv.match(regex) ? railsEnv : DEFAULT,
-  nodeEnv: nodeEnv && NODE_ENVIRONMENTS.includes(nodeEnv) ? nodeEnv : DEFAULT
+  nodeEnv,
+  isProduction,
+  isDevelopment
 }

data/package/environments/__tests__/base.js

@@ -9,76 +9,61 @@ chdirTestApp()
 
 const { resolve } = require('path')
 const rules = require('../../rules')
-const { ConfigList } = require('../../config_types')
-const Environment = require('../base')
+const baseConfig = require('../base')
 
-describe('Environment', () => {
+describe('Base config', () => {
   afterAll(chdirCwd)
 
-  let environment
-
-  describe('toWebpackConfig', () => {
-    beforeEach(() => {
-      environment = new Environment()
-    })
-
+  describe('config', () => {
     test('should return entry', () => {
-      const config = environment.toWebpackConfig()
-      expect(config.entry.application).toEqual(
+      expect(baseConfig.entry.application).toEqual(
         resolve('app', 'javascript', 'packs', 'application.js')
       )
     })
 
     test('should return multi file entry points', () => {
-      const config = environment.toWebpackConfig()
-      expect(config.entry.multi_entry.sort()).toEqual(
-          [
-            resolve('app', 'javascript', 'packs', 'multi_entry.css'),
-            resolve('app', 'javascript', 'packs', 'multi_entry.js')
-          ]
-      )
+      expect(baseConfig.entry.multi_entry.sort()).toEqual([
+        resolve('app', 'javascript', 'packs', 'multi_entry.css'),
+        resolve('app', 'javascript', 'packs', 'multi_entry.js')
+      ])
     })
 
     test('should return output', () => {
-      const config = environment.toWebpackConfig()
-      expect(config.output.filename).toEqual('js/[name]-[contenthash].js')
-      expect(config.output.chunkFilename).toEqual('js/[name]-[contenthash].chunk.js')
+      expect(baseConfig.output.filename).toEqual('js/[name]-[contenthash].js')
+      expect(baseConfig.output.chunkFilename).toEqual(
+        'js/[name]-[contenthash].chunk.js'
+      )
     })
 
     test('should return default loader rules for each file in config/loaders', () => {
-      const config = environment.toWebpackConfig()
       const defaultRules = Object.keys(rules)
-      const configRules = config.module.rules
+      const configRules = baseConfig.module.rules
 
-      expect(defaultRules.length).toEqual(7)
-      expect(configRules.length).toEqual(8)
+      expect(defaultRules.length).toEqual(3)
+      expect(configRules.length).toEqual(3)
     })
 
     test('should return default plugins', () => {
-      const config = environment.toWebpackConfig()
-      expect(config.plugins.length).toEqual(4)
+      expect(baseConfig.plugins.length).toEqual(3)
     })
 
     test('should return default resolveLoader', () => {
-      const config = environment.toWebpackConfig()
-      expect(config.resolveLoader.modules).toEqual(['node_modules'])
+      expect(baseConfig.resolveLoader.modules).toEqual(['node_modules'])
     })
 
     test('should return default resolve.modules with additions', () => {
-      const config = environment.toWebpackConfig()
-      expect(config.resolve.modules).toEqual([
+      expect(baseConfig.resolve.modules).toEqual([
         resolve('app', 'javascript'),
         resolve('app/assets'),
         resolve('/etc/yarn'),
+        resolve('some.config.js'),
+        resolve('app/elm'),
         'node_modules'
       ])
     })
 
     test('returns plugins property as Array', () => {
-      const config = environment.toWebpackConfig()
-
-      expect(config.plugins).toBeInstanceOf(Array)
-      expect(config.plugins).not.toBeInstanceOf(ConfigList)
+      expect(baseConfig.plugins).toBeInstanceOf(Array)
     })
   })
 })

data/package/environments/base.js

@@ -1,177 +1,113 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
-const {
-  basename, dirname, join, relative, resolve
-} = require('path')
-const { sync } = require('glob')
+const { basename, dirname, join, relative, resolve } = require('path')
 const extname = require('path-complete-extname')
-
-const webpack = require('webpack')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const WebpackAssetsManifest = require('webpack-assets-manifest')
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 const PnpWebpackPlugin = require('pnp-webpack-plugin')
-
-const { isNotObject, prettyPrint } = require('../utils/helpers')
-const deepMerge = require('../utils/deep_merge')
-
-const { ConfigList, ConfigObject } = require('../config_types')
+const { sync: globSync } = require('glob')
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
+const WebpackAssetsManifest = require('webpack-assets-manifest')
+const webpack = require('webpack')
 const rules = require('../rules')
 const config = require('../config')
-
-const getLoaderList = () => {
-  const result = new ConfigList()
-  Object.keys(rules).forEach((key) => result.append(key, rules[key]))
-  return result
-}
-
-const getPluginList = () => {
-  const result = new ConfigList()
-  result.append(
-    'Environment',
-    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env)))
-  )
-  result.append('CaseSensitivePaths', new CaseSensitivePathsPlugin())
-  result.append(
-    'MiniCssExtract',
-    new MiniCssExtractPlugin({
-      filename: 'css/[name]-[contenthash:8].css',
-      chunkFilename: 'css/[name]-[contenthash:8].chunk.css'
-    })
-  )
-  result.append(
-    'Manifest',
-    new WebpackAssetsManifest({
-      integrity: false,
-      entrypoints: true,
-      writeToDisk: true,
-      publicPath: config.publicPathWithoutCDN
-    })
-  )
-  return result
-}
-
-const getExtensionsGlob = () => {
-  const { extensions } = config
-  return extensions.length === 1 ? `**/*${extensions[0]}` : `**/*{${extensions.join(',')}}`
-}
+const { isDevelopment } = require('../env')
+const { moduleExists } = require('../utils/helpers')
 
 const getEntryObject = () => {
-  const result = new ConfigObject()
-  const glob = getExtensionsGlob()
+  const entries = {}
   const rootPath = join(config.source_path, config.source_entry_path)
-  const paths = sync(join(rootPath, glob))
-  paths.forEach((path) => {
+
+  globSync(`${rootPath}/**/*.*`).forEach((path) => {
     const namespace = relative(join(rootPath), dirname(path))
     const name = join(namespace, basename(path, extname(path)))
     let assetPaths = resolve(path)
 
     // Allows for multiple filetypes per entry (https://webpack.js.org/guides/entry-advanced/)
     // Transforms the config object value to an array with all values under the same name
-    let previousPaths = result.get(name)
+    let previousPaths = entries[name]
     if (previousPaths) {
-      previousPaths = Array.isArray(previousPaths) ? previousPaths : [previousPaths]
+      previousPaths = Array.isArray(previousPaths)
+        ? previousPaths
+        : [previousPaths]
       previousPaths.push(assetPaths)
       assetPaths = previousPaths
     }
 
-    result.set(name, assetPaths)
+    entries[name] = assetPaths
   })
-  return result
+
+  return entries
 }
 
 const getModulePaths = () => {
-  const result = new ConfigList()
-  result.append('source', resolve(config.source_path))
-  if (config.resolved_paths) {
-    config.resolved_paths.forEach((path) => result.append(path, resolve(path)))
+  const result = [resolve(config.source_path)]
+
+  if (config.additional_paths) {
+    config.additional_paths.forEach((path) => result.push(resolve(path)))
   }
-  result.append('node_modules', 'node_modules')
+  result.push('node_modules')
+
   return result
 }
 
-const getBaseConfig = () => new ConfigObject({
+const getPlugins = () => {
+  const plugins = [
+    new webpack.EnvironmentPlugin(process.env),
+    new CaseSensitivePathsPlugin(),
+    new WebpackAssetsManifest({
+      entrypoints: true,
+      writeToDisk: true,
+      output: 'manifest.json',
+      entrypointsUseAssets: true,
+      publicPath: true
+    })
+  ]
+
+  if (moduleExists('css-loader') && moduleExists('mini-css-extract-plugin')) {
+    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+    plugins.push(
+      new MiniCssExtractPlugin({
+        filename: isDevelopment ? '[name].css' : '[name].[contenthash:8].css',
+        chunkFilename: isDevelopment ? '[id].css' : '[id].[contenthash:8].css'
+      })
+    )
+  }
+
+  return plugins
+}
+
+module.exports = {
   mode: 'production',
   output: {
     filename: 'js/[name]-[contenthash].js',
     chunkFilename: 'js/[name]-[contenthash].chunk.js',
     hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
+    assetModuleFilename: 'static/[hash][ext][query]',
     path: config.outputPath,
     publicPath: config.publicPath
   },
-
+  entry: getEntryObject(),
   resolve: {
-    extensions: config.extensions,
+    extensions: ['.js', '.mjs', '.ts', '.coffee'],
+    modules: getModulePaths(),
     plugins: [PnpWebpackPlugin]
   },
 
+  plugins: getPlugins(),
+
   resolveLoader: {
     modules: ['node_modules'],
     plugins: [PnpWebpackPlugin.moduleLoader(module)]
   },
 
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty'
-  }
-})
-
-module.exports = class Base {
-  constructor() {
-    this.loaders = getLoaderList()
-    this.plugins = getPluginList()
-    this.config = getBaseConfig()
-    this.entry = getEntryObject()
-    this.resolvedModules = getModulePaths()
-  }
-
-  splitChunks(callback = null) {
-    let appConfig = {}
-    const defaultConfig = {
-      optimization: {
-        // Split vendor and common chunks
-        // https://twitter.com/wSokra/status/969633336732905474
-        splitChunks: {
-          chunks: 'all',
-          name: false
-        },
-        // Separate runtime chunk to enable long term caching
-        // https://twitter.com/wSokra/status/969679223278505985
-        runtimeChunk: true
-      }
-    }
-
-    if (callback) {
-      appConfig = callback(defaultConfig)
-      if (isNotObject(appConfig)) {
-        throw new Error(`
-          ${prettyPrint(appConfig)} is not a valid splitChunks configuration.
-          See https://webpack.js.org/plugins/split-chunks-plugin/#configuration
-        `)
-      }
-    }
+  optimization: {
+    splitChunks: { chunks: 'all' },
 
-    return this.config.merge(deepMerge(defaultConfig, appConfig))
-  }
-
-  toWebpackConfig() {
-    return this.config.merge({
-      entry: this.entry.toObject(),
-
-      module: {
-        strictExportPresence: true,
-        rules: [{ parser: { requireEnsure: false } }, ...this.loaders.values()]
-      },
-
-      plugins: this.plugins.values(),
+    runtimeChunk: 'single'
+  },
 
-      resolve: {
-        modules: this.resolvedModules.values()
-      }
-    })
+  module: {
+    strictExportPresence: true,
+    rules
   }
 }