webpacker 5.1.0 → 6.0.0.pre.2

data/package/configPath.js

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

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(4)
     })
 
     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,116 @@
 /* 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 } = 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 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) => {
+
+  sync(`${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),
+    PnpWebpackPlugin,
+    new CaseSensitivePathsPlugin(),
+    new WebpackAssetsManifest({
+      entrypoints: true,
+      writeToDisk: true,
+      output: 'manifest.json',
+      entrypointsUseAssets: true,
+      publicPath: true
+    })
+  ]
+
+  try {
+    if (require.resolve('css-loader')) {
+      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'
+        })
+      )
+    }
+  } catch (e) {
+    /* Work out what to print here */
+  }
+
+  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,
-    plugins: [PnpWebpackPlugin]
+    extensions: ['.js', '.mjs', '.ts'],
+    modules: getModulePaths()
   },
 
+  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: { name: (entrypoint) => `runtime-${entrypoint.name}` }
+  },
 
-      resolve: {
-        modules: this.resolvedModules.values()
-      }
-    })
+  module: {
+    strictExportPresence: true,
+    rules
   }
 }

data/package/environments/development.js

@@ -1,47 +1,54 @@
+const { merge } = require('webpack-merge')
 const webpack = require('webpack')
-const Base = require('./base')
+
+const baseConfig = require('./base')
 const devServer = require('../dev_server')
-const { outputPath: contentBase, publicPath } = require('../config')
 
-module.exports = class extends Base {
-  constructor() {
-    super()
+const { outputPath: contentBase, publicPath } = require('../config')
 
-    if (devServer.hmr) {
-      this.plugins.append('HotModuleReplacement', new webpack.HotModuleReplacementPlugin())
-      this.config.output.filename = '[name]-[hash].js'
-    }
+let devConfig = {
+  mode: 'development',
+  devtool: 'cheap-module-source-map'
+}
 
-    this.config.merge({
-      mode: 'development',
-      devtool: 'cheap-module-source-map',
-      devServer: {
-        clientLogLevel: 'none',
-        compress: devServer.compress,
-        quiet: devServer.quiet,
-        disableHostCheck: devServer.disable_host_check,
-        host: devServer.host,
-        port: devServer.port,
-        https: devServer.https,
-        hot: devServer.hmr,
-        contentBase,
-        inline: devServer.inline,
-        useLocalIp: devServer.use_local_ip,
-        public: devServer.public,
-        publicPath,
-        historyApiFallback: {
-          disableDotRule: true
-        },
-        headers: devServer.headers,
-        overlay: devServer.overlay,
-        stats: {
-          entrypoints: false,
-          errorDetails: true,
-          modules: false,
-          moduleTrace: false
-        },
-        watchOptions: devServer.watch_options
-      }
+if (
+  process.env.WEBPACK_DEV_SERVER &&
+  process.env.WEBPACK_DEV_SERVER !== 'undefined'
+) {
+  if (devServer.hmr) {
+    devConfig = merge(devConfig, {
+      output: { filename: '[name]-[hash].js' },
+      plugins: [new webpack.HotModuleReplacementPlugin()]
     })
   }
+
+  devConfig = merge(devConfig, {
+    devServer: {
+      clientLogLevel: 'none',
+      compress: devServer.compress,
+      quiet: devServer.quiet,
+      disableHostCheck: devServer.disable_host_check,
+      host: devServer.host,
+      port: devServer.port,
+      https: devServer.https,
+      hot: devServer.hmr,
+      contentBase,
+      inline: devServer.inline,
+      useLocalIp: devServer.use_local_ip,
+      public: devServer.public,
+      publicPath,
+      historyApiFallback: { disableDotRule: true },
+      headers: devServer.headers,
+      overlay: devServer.overlay,
+      stats: {
+        entrypoints: false,
+        errorDetails: true,
+        modules: false,
+        moduleTrace: false
+      },
+      watchOptions: devServer.watch_options
+    }
+  })
 }
+
+module.exports = merge(baseConfig, devConfig)