webpacker 3.6.0 → 4.0.2

data/package/rules/index.js

@@ -4,12 +4,17 @@ const css = require('./css')
 const sass = require('./sass')
 const moduleCss = require('./module.css')
 const moduleSass = require('./module.sass')
+const nodeModules = require('./node_modules')
 
+// Webpack loaders are processed in reverse order
+// https://webpack.js.org/concepts/loaders/#loader-features
+// Lastly, process static files using file loader
 module.exports = {
-  babel,
+  file,
   css,
   sass,
   moduleCss,
   moduleSass,
-  file
+  nodeModules,
+  babel
 }

data/package/rules/node_modules.js

@@ -0,0 +1,23 @@
+const { join } = require('path')
+const { cache_path: cachePath } = require('../config')
+const { nodeEnv } = require('../env')
+
+// Compile standard ES features for JS in node_modules with Babel.
+module.exports = {
+  test: /\.(js|mjs)$/,
+  include: /node_modules/,
+  exclude: /@babel(?:\/|\\{1,2})runtime/,
+  use: [
+    {
+      loader: 'babel-loader',
+      options: {
+        babelrc: false,
+        presets: [['@babel/preset-env', { modules: false }]],
+        cacheDirectory: join(cachePath, 'babel-loader-node-modules'),
+        cacheCompression: nodeEnv === 'production',
+        compact: false,
+        sourceMaps: false
+      }
+    }
+  ]
+}

data/package/utils/__tests__/get_style_rule.js

@@ -33,4 +33,24 @@ describe('getStyleRule', () => {
 
     expect(cssRule.use).toMatchObject(expect.arrayContaining(expectation))
   })
+
+  test('adds mini-css-extract-plugin when extract_css is true', () => {
+    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+    const expectation = [MiniCssExtractPlugin.loader]
+
+    require('../../config').extract_css = true
+    const cssRule = getStyleRule(/\.(css)$/i)
+
+    expect(cssRule.use).toMatchObject(expect.arrayContaining(expectation))
+  })
+
+  test(`doesn't add mini-css-extract-plugin when extract_css is false`, () => {
+    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+    const expectation = [MiniCssExtractPlugin.loader]
+
+    require('../../config').extract_css = false
+    const cssRule = getStyleRule(/\.(css)$/i)
+
+    expect(cssRule.use).toMatchObject(expect.not.arrayContaining(expectation))
+  })
 })

data/package/utils/deep_merge.js

@@ -10,12 +10,11 @@ const deepMerge = (target, source) => {
   if (!(isObject(target) && isObject(source))) return source
 
   return [...Object.keys(target), ...Object.keys(source)].reduce(
-    (result, key) =>
-      (Object.assign(
-        {},
-        result,
-        { [key]: deepMerge(target[key], source[key]) }
-      )),
+    (result, key) => (Object.assign(
+      {},
+      result,
+      { [key]: deepMerge(target[key], source[key]) }
+    )),
     {}
   )
 }

data/package/utils/get_style_rule.js

@@ -1,13 +1,10 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const { resolve } = require('path')
 const devServer = require('../dev_server')
-const { nodeEnv } = require('../env')
+const config = require('../config')
 
-const postcssConfigPath = path.resolve(process.cwd(), '.postcssrc.yml')
-const isProduction = nodeEnv === 'production'
 const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
 const isHMR = inDevServer && (devServer && devServer.hmr)
-const extractCSS = !isHMR || isProduction
 
 const styleLoader = {
   loader: 'style-loader',
@@ -18,46 +15,36 @@ 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: {
+        sourceMap: true,
+        importLoaders: 2,
+        localIdentName: '[name]__[local]___[hash:base64:5]',
+        modules
+      }
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        config: { path: resolve() },
+        sourceMap: true
+      }
+    },
+    ...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 (config.extract_css) {
+    use.unshift(MiniCssExtractPlugin.loader)
+  } else {
+    use.unshift(styleLoader)
+  }
 
-  return extractCSS ? extractCSSLoader : inlineCSSLoader
+  // sideEffects - See https://github.com/webpack/webpack/issues/6571
+  return Object.assign({}, { test, use, sideEffects: !modules }, options)
 }
 
 module.exports = getStyleRule

data/package/utils/helpers.js

@@ -1,7 +1,10 @@
-const isObject = value =>
-  typeof value === 'object' &&
-  value !== null &&
-  (value.length === undefined || value.length === null)
+const { stringify } = require('flatted/cjs')
+
+const isObject = value => typeof value === 'object'
+  && value !== null
+  && (value.length === undefined || value.length === null)
+
+const isNotObject = value => !isObject(value)
 
 const isBoolean = str => /^true/.test(str) || /^false/.test(str)
 
@@ -16,7 +19,7 @@ const isStrPath = (key) => {
 
 const isArray = value => Array.isArray(value)
 
-const isEqual = (target, source) => JSON.stringify(target) === JSON.stringify(source)
+const isEqual = (target, source) => stringify(target) === stringify(source)
 
 const canMerge = value => isObject(value) || isArray(value)
 
@@ -32,15 +35,24 @@ const chdirTestApp = () => {
 
 const chdirCwd = () => process.chdir(process.cwd())
 
+const resetEnv = () => {
+  process.env = {}
+}
+
+const ensureTrailingSlash = path => (path.endsWith('/') ? path : `${path}/`)
+
 module.exports = {
   chdirTestApp,
   chdirCwd,
+  ensureTrailingSlash,
   isObject,
+  isNotObject,
   isBoolean,
   isArray,
   isEqual,
   isEmpty,
   isStrPath,
   canMerge,
-  prettyPrint
+  prettyPrint,
+  resetEnv
 }

data/package/utils/objectify.js

@@ -1,4 +1,3 @@
-const objectify = (path, obj) =>
-  path.split('.').reduce((prev, curr) => (prev ? prev[curr] : undefined), obj)
+const objectify = (path, obj) => path.split('.').reduce((prev, curr) => (prev ? prev[curr] : undefined), obj)
 
 module.exports = objectify

data/test/compiler_test.rb

@@ -16,16 +16,18 @@ class CompilerTest < Minitest::Test
   end
 
   def test_custom_environment_variables
-    assert Webpacker.compiler.send(:webpack_env)["FOO"] == nil
+    assert_nil Webpacker.compiler.send(:webpack_env)["FOO"]
     Webpacker.compiler.env["FOO"] = "BAR"
     assert Webpacker.compiler.send(:webpack_env)["FOO"] == "BAR"
+  ensure
+    Webpacker.compiler.env = {}
   end
 
   def test_default_watched_paths
     assert_equal Webpacker.compiler.send(:default_watched_paths), [
       "app/assets/**/*",
       "/etc/yarn/**/*",
-      "test/test_app/app/javascript/**/*",
+      "app/javascript/**/*",
       "yarn.lock",
       "package.json",
       "config/webpack/**/*"
@@ -59,6 +61,16 @@ class CompilerTest < Minitest::Test
   end
 
   def test_compilation_digest_path
-    assert Webpacker.compiler.send(:compilation_digest_path).to_s.ends_with?(Webpacker.env)
+    assert_equal Webpacker.compiler.send(:compilation_digest_path).basename.to_s, "last-compilation-digest-#{Webpacker.env}"
+  end
+
+  def test_external_env_variables
+    assert_nil Webpacker.compiler.send(:webpack_env)["WEBPACKER_ASSET_HOST"]
+    assert_nil Webpacker.compiler.send(:webpack_env)["WEBPACKER_RELATIVE_URL_ROOT"]
+
+    ENV["WEBPACKER_ASSET_HOST"] = "foo.bar"
+    ENV["WEBPACKER_RELATIVE_URL_ROOT"] = "/baz"
+    assert_equal Webpacker.compiler.send(:webpack_env)["WEBPACKER_ASSET_HOST"], "foo.bar"
+    assert_equal Webpacker.compiler.send(:webpack_env)["WEBPACKER_RELATIVE_URL_ROOT"], "/baz"
   end
 end

data/test/configuration_test.rb

@@ -22,6 +22,15 @@ class ConfigurationTest < Webpacker::Test
   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
+
+    @config = Webpacker::Configuration.new(
+      root_path: @config.root_path,
+      config_path: Pathname.new(File.expand_path("./test_app/config/webpacker_public_root.yml", __dir__)),
+      env: "production"
+    )
+
+    public_output_path = File.expand_path File.join(File.dirname(__FILE__), "public/packs").to_s
+    assert_equal @config.public_output_path.to_s, public_output_path
   end
 
   def test_public_manifest_path

data/test/dev_server_runner_test.rb

@@ -0,0 +1,51 @@
+require "test_helper"
+require "webpacker/dev_server_runner"
+
+class DevServerRunnerTest < Webpacker::Test
+  def setup
+    @original_node_env, ENV["NODE_ENV"] = ENV["NODE_ENV"], "development"
+    @original_rails_env, ENV["RAILS_ENV"] = ENV["RAILS_ENV"], "development"
+  end
+
+  def teardown
+    ENV["NODE_ENV"] = @original_node_env
+    ENV["RAILS_ENV"] = @original_rails_env
+  end
+
+  def test_run_cmd_via_node_modules
+    cmd = ["#{test_app_path}/node_modules/.bin/webpack-dev-server", "--config", "#{test_app_path}/config/webpack/development.js"]
+
+    verify_command(cmd, use_node_modules: true)
+  end
+
+  def test_run_cmd_via_yarn
+    cmd = ["yarn", "webpack-dev-server", "--config", "#{test_app_path}/config/webpack/development.js"]
+
+    verify_command(cmd, use_node_modules: false)
+  end
+
+  private
+    def test_app_path
+      File.expand_path("test_app", __dir__)
+    end
+
+    def verify_command(cmd, use_node_modules: true)
+      cwd = Dir.pwd
+      Dir.chdir(test_app_path)
+
+      klass = Webpacker::DevServerRunner
+      instance = klass.new([])
+      mock = Minitest::Mock.new
+      mock.expect(:call, nil, [{}, *cmd])
+
+      klass.stub(:new, instance) do
+        instance.stub(:node_modules_bin_exist?, use_node_modules) do
+          Kernel.stub(:exec, mock) { klass.run([]) }
+        end
+      end
+
+      mock.verify
+    ensure
+      Dir.chdir(cwd)
+    end
+end

data/test/helper_test.rb

@@ -18,23 +18,38 @@ class HelperTest < ActionView::TestCase
     assert_equal "/packs/bootstrap-300631c4f0e0f9c865bc.js", asset_pack_path("bootstrap.js")
     assert_equal "/packs/bootstrap-c38deda30895059837cf.css", asset_pack_path("bootstrap.css")
 
-    Webpacker.dev_server.stub :running?, true do
-      Webpacker.dev_server.stub :hot_module_replacing?, true do
-        assert_nil asset_pack_path("bootstrap.css")
-        assert_equal "/packs/application-k344a6d59eef8632c9d1.png", asset_pack_path("application.png")
-      end
+    Webpacker.config.stub :extract_css?, false do
+      assert_nil asset_pack_path("bootstrap.css")
+      assert_equal "/packs/application-k344a6d59eef8632c9d1.png", asset_pack_path("application.png")
     end
   end
 
   def test_asset_pack_url
     assert_equal "https://example.com/packs/bootstrap-300631c4f0e0f9c865bc.js", asset_pack_url("bootstrap.js")
     assert_equal "https://example.com/packs/bootstrap-c38deda30895059837cf.css", asset_pack_url("bootstrap.css")
+
+    Webpacker.config.stub :extract_css?, false do
+      assert_nil asset_pack_path("bootstrap.css")
+      assert_equal "https://example.com/packs/application-k344a6d59eef8632c9d1.png", asset_pack_url("application.png")
+    end
   end
 
   def test_image_pack_tag
     assert_equal \
       "<img alt=\"Edit Entry\" src=\"/packs/application-k344a6d59eef8632c9d1.png\" width=\"16\" height=\"10\" />",
       image_pack_tag("application.png", size: "16x10", alt: "Edit Entry")
+    assert_equal \
+      "<img alt=\"Edit Entry\" src=\"/packs/media/images/image-c38deda30895059837cf.jpg\" width=\"16\" height=\"10\" />",
+      image_pack_tag("image.jpg", size: "16x10", alt: "Edit Entry")
+    assert_equal \
+      "<img alt=\"Edit Entry\" src=\"/packs/media/images/image-c38deda30895059837cf.jpg\" width=\"16\" height=\"10\" />",
+      image_pack_tag("media/images/image.jpg", size: "16x10", alt: "Edit Entry")
+    assert_equal \
+      "<img alt=\"Edit Entry\" src=\"/packs/media/images/nested/image-c38deda30895059837cf.jpg\" width=\"16\" height=\"10\" />",
+      image_pack_tag("nested/image.jpg", size: "16x10", alt: "Edit Entry")
+    assert_equal \
+      "<img alt=\"Edit Entry\" src=\"/packs/media/images/nested/image-c38deda30895059837cf.jpg\" width=\"16\" height=\"10\" />",
+      image_pack_tag("media/images/nested/image.jpg", size: "16x10", alt: "Edit Entry")
   end
 
   def test_javascript_pack_tag
@@ -43,6 +58,12 @@ class HelperTest < ActionView::TestCase
       javascript_pack_tag("bootstrap.js")
   end
 
+  def test_javascript_pack_tag_symbol
+    assert_equal \
+      %(<script src="/packs/bootstrap-300631c4f0e0f9c865bc.js"></script>),
+      javascript_pack_tag(:bootstrap)
+  end
+
   def test_javascript_pack_tag_splat
     assert_equal \
       %(<script src="/packs/bootstrap-300631c4f0e0f9c865bc.js" defer="defer"></script>\n) +
@@ -50,12 +71,34 @@ class HelperTest < ActionView::TestCase
       javascript_pack_tag("bootstrap.js", "application.js", defer: true)
   end
 
+  def test_javascript_pack_tag_split_chunks
+    assert_equal \
+      %(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js"></script>\n) +
+        %(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js"></script>\n) +
+        %(<script src="/packs/application-k344a6d59eef8632c9d1.js"></script>),
+      javascript_packs_with_chunks_tag("application")
+  end
+
+  def test_stylesheet_pack_tag_split_chunks
+    assert_equal \
+      %(<link rel="stylesheet" media="screen" href="/packs/1-c20632e7baf2c81200d3.chunk.css" />\n) +
+        %(<link rel="stylesheet" media="screen" href="/packs/application-k344a6d59eef8632c9d1.chunk.css" />\n) +
+        %(<link rel="stylesheet" media="screen" href="/packs/hello_stimulus-k344a6d59eef8632c9d1.chunk.css" />),
+      stylesheet_packs_with_chunks_tag("application", "hello_stimulus")
+  end
+
   def test_stylesheet_pack_tag
     assert_equal \
       %(<link rel="stylesheet" media="screen" href="/packs/bootstrap-c38deda30895059837cf.css" />),
       stylesheet_pack_tag("bootstrap.css")
   end
 
+  def test_stylesheet_pack_tag_symbol
+    assert_equal \
+      %(<link rel="stylesheet" media="screen" href="/packs/bootstrap-c38deda30895059837cf.css" />),
+      stylesheet_pack_tag(:bootstrap)
+  end
+
   def test_stylesheet_pack_tag_splat
     assert_equal \
       %(<link rel="stylesheet" media="all" href="/packs/bootstrap-c38deda30895059837cf.css" />\n) +

data/test/manifest_test.rb

@@ -22,7 +22,21 @@ class ManifestTest < Minitest::Test
     assert_nil Webpacker.manifest.lookup("foo.js")
   end
 
+  def test_lookup_chunks_nil
+    assert_nil Webpacker.manifest.lookup_pack_with_chunks("foo.js")
+  end
+
   def test_lookup_success
     assert_equal Webpacker.manifest.lookup("bootstrap.js"), "/packs/bootstrap-300631c4f0e0f9c865bc.js"
   end
+
+  def test_lookup_entrypoint
+    application_entrypoints = [
+      "/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js",
+      "/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js",
+      "/packs/application-k344a6d59eef8632c9d1.js"
+    ]
+
+    assert_equal Webpacker.manifest.lookup_pack_with_chunks!("application", type: :javascript), application_entrypoints
+  end
 end