webpacker 4.0.0.pre.3 → 4.0.0.rc.1

data/lib/webpacker/version.rb

@@ -1,4 +1,4 @@
 module Webpacker
   # Change the version in package.json too, please!
-  VERSION = "4.0.0.pre.3".freeze
+  VERSION = "4.0.0.rc.1".freeze
 end

data/lib/webpacker/webpack_runner.rb

@@ -5,11 +5,22 @@ module Webpacker
   class WebpackRunner < Webpacker::Runner
     def run
       env = Webpacker::Compiler.env
-      cmd = [ "#{@node_modules_bin_path}/webpack", "--config", @webpack_config ] + @argv
+
+      cmd = if node_modules_bin_exist?
+        ["#{@node_modules_bin_path}/webpack"]
+      else
+        ["yarn", "webpack"]
+      end
+      cmd += ["--config", @webpack_config] + @argv
 
       Dir.chdir(@app_path) do
-        exec env, *cmd
+        Kernel.exec env, *cmd
       end
     end
+
+    private
+      def node_modules_bin_exist?
+        File.exist?("#{@node_modules_bin_path}/webpack")
+      end
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "4.0.0-pre.3",
+  "version": "4.0.0-rc.1",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -8,50 +8,54 @@
     "lib/install/config/webpacker.yml"
   ],
   "engines": {
-    "node": ">=6.14.0",
+    "node": ">=6.14.4",
     "yarn": ">=1.0.0"
   },
   "dependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-destructuring": "^7.0.0",
+    "@babel/core": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.2.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-destructuring": "^7.2.0",
     "@babel/plugin-transform-regenerator": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/runtime": "^7.0.0",
-    "babel-core": "^7.0.0-bridge",
-    "babel-loader": "^8.0.0",
+    "@babel/preset-env": "^7.2.0",
+    "@babel/runtime": "^7.2.0",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
+    "babel-plugin-macros": "^2.4.2",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
-    "compression-webpack-plugin": "^1.1.12",
-    "css-loader": "^1.0.0",
+    "compression-webpack-plugin": "^2.0.0",
+    "css-loader": "^2.0.1",
     "file-loader": "^2.0.0",
     "glob": "^7.1.3",
     "js-yaml": "^3.12.0",
-    "mini-css-extract-plugin": "^0.4.2",
-    "node-sass": "^4.9.3",
+    "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "path-complete-extname": "^1.0.0",
-    "postcss-import": "^12.0.0",
+    "pnp-webpack-plugin": "^1.2.1",
+    "postcss-flexbugs-fixes": "^4.1.0",
+    "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^5.3.0",
+    "postcss-preset-env": "^6.5.0",
+    "postcss-safe-parser": "^4.0.1",
     "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.0",
-    "uglifyjs-webpack-plugin": "^1.3.0",
-    "webpack": "^4.17.1",
-    "webpack-assets-manifest": "^3.0.2",
-    "webpack-cli": "^3.1.0",
-    "webpack-sources": "^1.2.0"
+    "style-loader": "^0.23.1",
+    "terser-webpack-plugin": "^1.1.0",
+    "webpack": "^4.27.1",
+    "webpack-assets-manifest": "^3.1.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-sources": "^1.3.0"
   },
   "devDependencies": {
-    "eslint": "^5.4.0",
+    "eslint": "^5.10.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.11.1",
-    "jest": "^23.5.0"
+    "jest": "^23.6.0"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",

data/package/__tests__/config.js

@@ -1,18 +1,17 @@
 /* global test expect, describe */
 
-const { chdirCwd, chdirTestApp } = require('../utils/helpers')
+const { chdirCwd, chdirTestApp, resetEnv } = require('../utils/helpers')
 
 chdirTestApp()
 
 const config = require('../config')
 
 describe('Config', () => {
-  beforeEach(() => jest.resetModules())
+  beforeEach(() => jest.resetModules() && resetEnv())
   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/')
   })
@@ -25,8 +24,31 @@ describe('Config', () => {
     expect(config.publicPath).toEqual('/foo/packs/')
   })
 
+  test('public path with relative root without slash', () => {
+    process.env.RAILS_ENV = 'development'
+    process.env.RAILS_RELATIVE_URL_ROOT = 'foo'
+    const config = require('../config')
+    expect(config.publicPath).toEqual('/foo/packs/')
+  })
+
+  test('public path with asset host and relative root', () => {
+    process.env.RAILS_ENV = 'development'
+    process.env.RAILS_RELATIVE_URL_ROOT = '/foo/'
+    process.env.WEBPACKER_ASSET_HOST = 'http://foo.com/'
+    const config = require('../config')
+    expect(config.publicPath).toEqual('http://foo.com/foo/packs/')
+  })
+
+  test('public path with asset host', () => {
+    process.env.RAILS_ENV = 'development'
+    process.env.WEBPACKER_ASSET_HOST = 'http://foo.com/'
+    const config = require('../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',

data/package/config.js

@@ -2,7 +2,7 @@ const { resolve } = require('path')
 const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
 const deepMerge = require('./utils/deep_merge')
-const { isArray } = require('./utils/helpers')
+const { isArray, ensureTrailingSlash } = require('./utils/helpers')
 const { railsEnv } = require('./env')
 
 const defaultConfigPath = require.resolve('../lib/install/config/webpacker.yml')
@@ -21,13 +21,21 @@ 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}`
+// Ensure that the publicPath includes our asset host so dynamic imports
+// (code-splitting chunks and static assets) load from the CDN instead of a relative path.
+const getPublicPath = () => {
+  const rootUrl = process.env.WEBPACKER_ASSET_HOST || '/'
+  let packPath = `${config.public_output_path}/`
+  // Add relative root prefix to pack path.
+  if (process.env.RAILS_RELATIVE_URL_ROOT) {
+    let relativeRoot = process.env.RAILS_RELATIVE_URL_ROOT
+    relativeRoot = relativeRoot.startsWith('/') ? relativeRoot.substr(1) : relativeRoot
+    packPath = `${ensureTrailingSlash(relativeRoot)}${packPath}`
+  }
+
+  return ensureTrailingSlash(rootUrl) + packPath
 }
 
-// Remove extra slashes.
-config.publicPath = publicPath.replace(/(^\/|[^:]\/)\/+/g, '$1')
+config.publicPath = getPublicPath()
 
 module.exports = config

data/package/environments/__tests__/base.js

@@ -24,7 +24,9 @@ describe('Environment', () => {
 
     test('should return entry', () => {
       const config = environment.toWebpackConfig()
-      expect(config.entry.application).toEqual(resolve('app', 'javascript', 'packs', 'application.js'))
+      expect(config.entry.application).toEqual(
+        resolve('app', 'javascript', 'packs', 'application.js')
+      )
     })
 
     test('should return output', () => {
@@ -38,8 +40,8 @@ describe('Environment', () => {
       const defaultRules = Object.keys(rules)
       const configRules = config.module.rules
 
-      expect(defaultRules.length).toBeGreaterThan(1)
-      expect(configRules.length).toEqual(defaultRules.length)
+      expect(defaultRules.length).toEqual(7)
+      expect(configRules.length).toEqual(8)
     })
 
     test('should return default plugins', () => {

data/package/environments/base.js

@@ -11,6 +11,10 @@ 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 rules = require('../rules')
@@ -30,7 +34,7 @@ const getPluginList = () => {
   )
   result.append('CaseSensitivePaths', new CaseSensitivePathsPlugin())
   result.append(
-    'ExtractText',
+    'MiniCssExtract',
     new MiniCssExtractPlugin({
       filename: '[name]-[contenthash:8].css',
       chunkFilename: '[name]-[contenthash:8].chunk.css'
@@ -39,6 +43,8 @@ const getPluginList = () => {
   result.append(
     'Manifest',
     new WebpackAssetsManifest({
+      integrity: true,
+      entrypoints: true,
       writeToDisk: true,
       publicPath: true
     })
@@ -85,11 +91,13 @@ const getBaseConfig = () => new ConfigObject({
   },
 
   resolve: {
-    extensions: config.extensions
+    extensions: config.extensions,
+    plugins: [PnpWebpackPlugin]
   },
 
   resolveLoader: {
-    modules: ['node_modules']
+    modules: ['node_modules'],
+    plugins: [PnpWebpackPlugin.moduleLoader(module)]
   },
 
   node: {
@@ -110,13 +118,42 @@ module.exports = class Base {
     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
+        `)
+      }
+    }
+
+    return this.config.merge(deepMerge(defaultConfig, appConfig))
+  }
+
   toWebpackConfig() {
     return this.config.merge({
       entry: this.entry.toObject(),
 
       module: {
         strictExportPresence: true,
-        rules: this.loaders.values()
+        rules: [{ parser: { requireEnsure: false } }, ...this.loaders.values()]
       },
 
       plugins: this.plugins.values(),

data/package/environments/production.js

@@ -1,6 +1,7 @@
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
 const CompressionPlugin = require('compression-webpack-plugin')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const safePostCssParser = require('postcss-safe-parser')
 const Base = require('./base')
 
 module.exports = class extends Base {
@@ -10,13 +11,23 @@ module.exports = class extends Base {
     this.plugins.append(
       'Compression',
       new CompressionPlugin({
-        asset: '[path].gz[query]',
+        filename: '[path].gz[query]',
         algorithm: 'gzip',
+        cache: true,
         test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
       })
     )
 
-    this.plugins.append('OptimizeCSSAssets', new OptimizeCSSAssetsPlugin())
+    this.plugins.append(
+      'OptimizeCSSAssets',
+      new OptimizeCSSAssetsPlugin({
+        parser: safePostCssParser,
+        map: {
+          inline: false,
+          annotation: true
+        }
+      })
+    )
 
     this.config.merge({
       devtool: 'nosources-source-map',
@@ -24,13 +35,13 @@ module.exports = class extends Base {
       bail: true,
       optimization: {
         minimizer: [
-          new UglifyJsPlugin({
+          new TerserPlugin({
             parallel: true,
             cache: true,
             sourceMap: true,
-            uglifyOptions: {
+            terserOptions: {
               parse: {
-                // Let uglify-js parse ecma 8 code but always output
+                // Let terser parse ecma 8 code but always output
                 // ES5 compliant code for older browsers
                 ecma: 8
               },

data/package/rules/babel.js

@@ -1,14 +1,20 @@
-const { join } = require('path')
-const { cache_path: cachePath } = require('../config')
+const { join, resolve } = require('path')
+const { cache_path: cachePath, source_path: sourcePath } = require('../config')
+const { nodeEnv } = require('../env')
 
+// Process application Javascript code with Babel.
+// Uses application .babelrc to apply any transformations
 module.exports = {
-  test: /\.(js|jsx)?(\.erb)?$/,
+  test: /\.(js|jsx|mjs)?(\.erb)?$/,
+  include: resolve(sourcePath),
   exclude: /node_modules/,
   use: [
     {
       loader: 'babel-loader',
       options: {
-        cacheDirectory: join(cachePath, 'babel-loader')
+        cacheDirectory: join(cachePath, 'babel-loader-node-modules'),
+        cacheCompression: nodeEnv === 'production',
+        compact: nodeEnv === 'production'
       }
     }
   ]

data/package/rules/file.js

@@ -1,8 +1,8 @@
 const { join } = require('path')
-const { source_path: sourcePath } = require('../config')
+const { source_path: sourcePath, static_assets_extensions: fileExtensions } = require('../config')
 
 module.exports = {
-  test: /\.(jpg|jpeg|png|gif|tiff|ico|svg|eot|otf|ttf|woff|woff2)$/i,
+  test: new RegExp(`(${fileExtensions.join('|')})$`, 'i'),
   use: [
     {
       loader: 'file-loader',

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,22 @@
+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)$/,
+  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
+      }
+    }
+  ]
+}