webpacker 3.6.0 → 4.0.0.pre.pre.1

data/package/__tests__/config.js

@@ -1,30 +1,14 @@
 /* global test expect, describe */
 
-const { chdirCwd, chdirTestApp } = require('../utils/helpers')
+const { chdirTestApp, chdirCwd } = require('../utils/helpers')
 
 chdirTestApp()
 
 const config = require('../config')
 
 describe('Config', () => {
-  beforeEach(() => jest.resetModules())
   afterAll(chdirCwd)
 
-  test('public path', () => {
-    process.env.RAILS_ENV = 'development'
-    delete process.env.RAILS_RELATIVE_URL_ROOT
-    const config = require('../config')
-    expect(config.publicPath).toEqual('/packs/')
-  })
-
-  // also tests removal of extra slashes
-  test('public path with relative root', () => {
-    process.env.RAILS_ENV = 'development'
-    process.env.RAILS_RELATIVE_URL_ROOT = '/foo'
-    const config = require('../config')
-    expect(config.publicPath).toEqual('/foo/packs/')
-  })
-
   test('should return extensions as listed in app config', () => {
     expect(config.extensions).toEqual([
       '.js',

data/package/__tests__/production.js

@@ -13,11 +13,9 @@ describe('Production environment', () => {
 
     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()
-      
       expect(config.output.path).toEqual(resolve('public', 'packs'))
       expect(config.output.publicPath).toEqual('/packs/')
       expect(config).toMatchObject({

data/package/__tests__/staging.js

@@ -13,11 +13,9 @@ describe('Custom environment', () => {
 
     test('should use staging config and production environment', () => {
       process.env.RAILS_ENV = 'staging'
-      delete process.env.NODE_ENV
-
       const { environment } = require('../index')
+
       const config = environment.toWebpackConfig()
-      
       expect(config.output.path).toEqual(resolve('public', 'packs-staging'))
       expect(config.output.publicPath).toEqual('/packs-staging/')
       expect(config).toMatchObject({

data/package/__tests__/test.js

@@ -13,11 +13,9 @@ describe('Test environment', () => {
 
     test('should use test config and production environment', () => {
       process.env.RAILS_ENV = 'test'
-      process.env.NODE_ENV = 'test'
-
       const { environment } = require('../index')
+
       const config = environment.toWebpackConfig()
-      
       expect(config.output.path).toEqual(resolve('public', 'packs-test'))
       expect(config.output.publicPath).toEqual('/packs-test/')
     })

data/package/config.js

@@ -20,14 +20,6 @@ if (isArray(app.extensions) && app.extensions.length) delete defaults.extensions
 
 const config = deepMerge(defaults, app)
 config.outputPath = resolve('public', config.public_output_path)
-
-let publicPath = `/${config.public_output_path}/`
-// Add prefix to publicPath.
-if (process.env.RAILS_RELATIVE_URL_ROOT) {
-  publicPath = `/${process.env.RAILS_RELATIVE_URL_ROOT}${publicPath}`
-}
-
-// Remove extra slashes.
-config.publicPath = publicPath.replace(/(^\/|[^:]\/)\/+/g, '$1')
+config.publicPath = `/${config.public_output_path}/`.replace(/([^:]\/)\/+/g, '$1')
 
 module.exports = config

data/package/dev_server.js

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

data/package/env.js

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

data/package/environments/base.js

@@ -8,8 +8,8 @@ const { sync } = require('glob')
 const extname = require('path-complete-extname')
 
 const webpack = require('webpack')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const ManifestPlugin = require('webpack-manifest-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const WebpackAssetsManifest = require('webpack-assets-manifest')
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 
 const { ConfigList, ConfigObject } = require('../config_types')
@@ -24,10 +24,25 @@ const getLoaderList = () => {
 
 const getPluginList = () => {
   const result = new ConfigList()
-  result.append('Environment', new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))))
+  result.append(
+    'Environment',
+    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env)))
+  )
   result.append('CaseSensitivePaths', new CaseSensitivePathsPlugin())
-  result.append('ExtractText', new ExtractTextPlugin('[name]-[contenthash].css'))
-  result.append('Manifest', new ManifestPlugin({ publicPath: config.publicPath, writeToFileEmit: true }))
+  result.append(
+    'ExtractText',
+    new MiniCssExtractPlugin({
+      filename: '[name]-[contenthash:8].css',
+      chunkFilename: '[name]-[contenthash:8].chunk.css'
+    })
+  )
+  result.append(
+    'Manifest',
+    new WebpackAssetsManifest({
+      writeToDisk: true,
+      publicPath: true
+    })
+  )
   return result
 }
 
@@ -61,9 +76,11 @@ const getModulePaths = () => {
 
 const getBaseConfig = () =>
   new ConfigObject({
+    mode: 'production',
     output: {
       filename: '[name]-[chunkhash].js',
       chunkFilename: '[name]-[chunkhash].chunk.js',
+      hotUpdateChunkFilename: '[id]-[hash].hot-update.js',
       path: config.outputPath,
       publicPath: config.publicPath
     },

data/package/environments/development.js

@@ -14,6 +14,8 @@ module.exports = class extends Base {
     }
 
     this.config.merge({
+      mode: 'development',
+      cache: true,
       devtool: 'cheap-module-source-map',
       output: {
         pathinfo: true

data/package/environments/production.js

@@ -1,45 +1,11 @@
-const webpack = require('webpack')
-const CompressionPlugin = require('compression-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const CompressionPlugin = require('compression-webpack-plugin')
 const Base = require('./base')
 
 module.exports = class extends Base {
   constructor() {
     super()
 
-    this.plugins.append('ModuleConcatenation', new webpack.optimize.ModuleConcatenationPlugin())
-    this.plugins.append('OptimizeCSSAssets', new OptimizeCSSAssetsPlugin())
-
-    this.plugins.append(
-      'UglifyJs',
-      new UglifyJsPlugin({
-        parallel: true,
-        cache: true,
-        sourceMap: true,
-        uglifyOptions: {
-          parse: {
-            // Let uglify-js parse ecma 8 code but always output
-            // ES5 compliant code for older browsers
-            ecma: 8
-          },
-          compress: {
-            ecma: 5,
-            warnings: false,
-            comparisons: false
-          },
-          mangle: {
-            safari10: true
-          },
-          output: {
-            ecma: 5,
-            comments: false,
-            ascii_only: true
-          }
-        }
-      })
-    )
-
     this.plugins.append(
       'Compression',
       new CompressionPlugin({
@@ -51,7 +17,31 @@ module.exports = class extends Base {
 
     this.config.merge({
       devtool: 'nosources-source-map',
-      stats: 'normal'
+      stats: 'normal',
+      bail: true,
+      optimization: {
+        minimizer: [
+          new UglifyJsPlugin({
+            parallel: true,
+            cache: true,
+            sourceMap: true,
+            uglifyOptions: {
+              ecma: 8,
+              compress: {
+                warnings: false,
+                comparisons: false
+              },
+              mangle: {
+                safari10: true
+              },
+              output: {
+                comments: false,
+                ascii_only: true
+              }
+            }
+          })
+        ]
+      }
     })
   }
 }

data/package/utils/__tests__/deep_assign.js

@@ -2,31 +2,10 @@
 
 const deepAssign = require('../deep_assign')
 
-describe('deepAssign()', () => {
-  test('deeply assigns nested properties', () => {
-    const object = { foo: { bar: { } } }
-    const path = 'foo.bar'
-    const value = { x: 1, y: 2 }
-    const expectation = { foo: { bar: { x: 1, y: 2 } } }
-    expect(deepAssign(object, path, value)).toEqual(expectation)
-  })
-
-  test('allows assignment of a literal false', () => {
-    const object = { foo: { bar: { } } }
-    const path = 'foo.bar'
-    const value = false
-    const expectation = { foo: { bar: false } }
-    expect(deepAssign(object, path, value)).toEqual(expectation)
-  })
-
-  test('does not allow assignment of other falsy values', () => {
-    const object = { foo: { bar: { } } }
-    const path = 'foo.bar'
-    const values = [undefined, null, 0, '']
-
-    values.forEach(value => {
-      const expectation = new Error(`Value can't be ${value}`)
-      expect(() => deepAssign(object, path, value)).toThrow(expectation)
-    })
-  })
+test('deep assign property', () => {
+  const object = { foo: { bar: { } } }
+  const path = 'foo.bar'
+  const value = { x: 1, y: 2 }
+  const expectation = { foo: { bar: { x: 1, y: 2 } } }
+  expect(deepAssign(object, path, value)).toEqual(expectation)
 })

data/package/utils/deep_assign.js

@@ -2,7 +2,7 @@ const { canMerge, prettyPrint } = require('./helpers')
 const deepMerge = require('./deep_merge')
 
 const deepAssign = (obj, path, value) => {
-  if (!value && value !== false) throw new Error(`Value can't be ${value}`)
+  if (!value) throw new Error(`Value can't be ${value}`)
 
   const keys = path.split('.')
   const key = keys.pop()

data/package/utils/get_style_rule.js

@@ -1,4 +1,4 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('path')
 const devServer = require('../dev_server')
 const { nodeEnv } = require('../env')
@@ -18,46 +18,35 @@ const styleLoader = {
 }
 
 const getStyleRule = (test, modules = false, preprocessors = []) => {
-  const extractOptions = {
-    fallback: styleLoader,
-    use: [
-      {
-        loader: 'css-loader',
-        options: {
-          minimize: isProduction,
-          sourceMap: true,
-          importLoaders: 2,
-          modules
-        }
-      },
-      {
-        loader: 'postcss-loader',
-        options: {
-          sourceMap: true,
-          config: { path: postcssConfigPath }
-        }
-      },
-      ...preprocessors
-    ]
-  }
+  const use = [
+    {
+      loader: 'css-loader',
+      options: {
+        minimize: isProduction,
+        sourceMap: true,
+        importLoaders: 2,
+        modules
+      }
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        sourceMap: true,
+        config: { path: postcssConfigPath }
+      }
+    },
+    ...preprocessors
+  ]
 
   const options = modules ? { include: /\.module\.[a-z]+$/ } : { exclude: /\.module\.[a-z]+$/ }
 
-  // For production extract styles to a separate bundle
-  const extractCSSLoader = Object.assign(
-    {},
-    { test, use: ExtractTextPlugin.extract(extractOptions) },
-    options
-  )
-
-  // For hot-reloading use regular loaders
-  const inlineCSSLoader = Object.assign(
-    {},
-    { test, use: [styleLoader].concat(extractOptions.use) },
-    options
-  )
+  if (extractCSS) {
+    use.unshift(MiniCssExtractPlugin.loader)
+  } else {
+    use.unshift(styleLoader)
+  }
 
-  return extractCSS ? extractCSSLoader : inlineCSSLoader
+  return Object.assign({}, { test, use }, options)
 }
 
 module.exports = getStyleRule

data/test/configuration_test.rb

@@ -1,90 +1,66 @@
 require "test_helper"
 
 class ConfigurationTest < Webpacker::Test
-  def setup
-    @config = Webpacker::Configuration.new(
-      root_path: Pathname.new(File.expand_path("test_app", __dir__)),
-      config_path: Pathname.new(File.expand_path("./test_app/config/webpacker.yml", __dir__)),
-      env: "production"
-    )
-  end
-
   def test_source_path
     source_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/app/javascript").to_s
-    assert_equal source_path, @config.source_path.to_s
+    assert_equal source_path, Webpacker.config.source_path.to_s
   end
 
   def test_source_entry_path
     source_entry_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/app/javascript", "packs").to_s
-    assert_equal @config.source_entry_path.to_s, source_entry_path
+    assert_equal Webpacker.config.source_entry_path.to_s, source_entry_path
   end
 
   def test_public_output_path
     public_output_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/public/packs").to_s
-    assert_equal @config.public_output_path.to_s, public_output_path
+    assert_equal Webpacker.config.public_output_path.to_s, public_output_path
   end
 
   def test_public_manifest_path
     public_manifest_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/public/packs", "manifest.json").to_s
-    assert_equal @config.public_manifest_path.to_s, public_manifest_path
+    assert_equal Webpacker.config.public_manifest_path.to_s, public_manifest_path
   end
 
   def test_cache_path
     cache_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/tmp/cache/webpacker").to_s
-    assert_equal @config.cache_path.to_s, cache_path
+    assert_equal Webpacker.config.cache_path.to_s, cache_path
   end
 
   def test_resolved_paths
-    assert_equal @config.resolved_paths, ["app/assets", "/etc/yarn"]
+    assert_equal Webpacker.config.resolved_paths, ["app/assets", "/etc/yarn"]
   end
 
   def test_resolved_paths_globbed
-    assert_equal @config.resolved_paths_globbed, ["app/assets/**/*", "/etc/yarn/**/*"]
+    assert_equal Webpacker.config.resolved_paths_globbed, ["app/assets/**/*", "/etc/yarn/**/*"]
   end
 
   def test_extensions
     config_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/config/webpacker.yml").to_s
     webpacker_yml = YAML.load_file(config_path)
-    assert_equal @config.extensions, webpacker_yml["default"]["extensions"]
+    assert_equal Webpacker.config.extensions, webpacker_yml["default"]["extensions"]
   end
 
   def test_cache_manifest?
-    assert @config.cache_manifest?
-
-    @config = Webpacker::Configuration.new(
-      root_path: @config.root_path,
-      config_path: @config.config_path,
-      env: "development"
-    )
+    assert Webpacker.config.cache_manifest?
 
-    refute @config.cache_manifest?
+    with_rails_env("development") do
+      refute Webpacker.config.cache_manifest?
+    end
 
-    @config = Webpacker::Configuration.new(
-      root_path: @config.root_path,
-      config_path: @config.config_path,
-      env: "test"
-    )
-
-    refute @config.cache_manifest?
+    with_rails_env("test") do
+      refute Webpacker.config.cache_manifest?
+    end
   end
 
   def test_compile?
-    refute @config.compile?
-
-    @config = Webpacker::Configuration.new(
-      root_path: @config.root_path,
-      config_path: @config.config_path,
-      env: "development"
-    )
-
-    assert @config.compile?
+    refute Webpacker.config.compile?
 
-    @config = Webpacker::Configuration.new(
-      root_path: @config.root_path,
-      config_path: @config.config_path,
-      env: "test"
-    )
+    with_rails_env("development") do
+      assert Webpacker.config.compile?
+    end
 
-    assert @config.compile?
+    with_rails_env("test") do
+      assert Webpacker.config.compile?
+    end
   end
 end