Stable webpacker 4.0 release (#1823)

 New split chunks API
 New file loader option for adding static extensions
 Basic node modules compilation apart from app code
 CDN support - #1084 Perhaps someone can help with this one?

CHANGELOG.md

@@ -1,5 +1,38 @@
 **Please note that Webpacker 3.1.0 and 3.1.1 have some serious bugs so please consider using either 3.0.2 or 3.2.0**
 
+## [Unreleased] - xxxxxx
+
+## Breaking changes
+
+  - Order of rules changed so you might have to change append to prepend,
+  depending on how you want to process packs [#1823](https://github.com/rails/webpacker/pull/1823)
+  ```js
+  environment.loaders.prepend()
+  ```
+  - Separate rule to compile node modules
+  (fixes cases where ES6 libraries were included in the app code) [#1823](https://github.com/rails/webpacker/pull/1823)
+  - File loader extensions API [#1823](https://github.com/rails/webpacker/pull/1823)
+  ```yml
+  # webpacker.yml
+  static_assets_extensions:
+    - .pdf
+    # etc..
+  ```
+
+### Added
+
+  - Move `.babelrc` and `.postcssrc` to `.js` variant [#1822](https://github.com/rails/webpacker/pull/1822)
+  - Use postcss safe parser when optimising css assets [#1822](https://github.com/rails/webpacker/pull/1822)
+  - Add split chunks api (undocumented)
+  ```js
+  const { environment } = require('@rails/webpacker')
+  // Enable with default config
+  environment.splitChunks()
+  // Configure via a callback
+  environment.splitChunks((config) => Object.assign({}, config, { optimization: { splitChunks: false }}))
+  ```
+  - Allow changing static file extensions using webpacker.yml (undocumented)
+
 ## [4.0.0-pre.3] - 2018-10-01
 
 ### Added

lib/install/coffee.rb

@@ -9,11 +9,11 @@
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('coffee', coffee)\n",
+  "environment.loaders.prepend('coffee', coffee)\n",
   before: "module.exports"
 
 say "Updating webpack paths to include .coffee file extension"
-insert_into_file Webpacker.config.config_path, "- .coffee\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .coffee\n".indent(4), after: /\s+extensions:\n/
 
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/coffee/hello_coffee.coffee",

lib/install/config/webpacker.yml

@@ -15,7 +15,22 @@ default: &default
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
   extensions:
+    - .mjs
     - .js
     - .sass
     - .scss

lib/install/elm.rb

@@ -9,7 +9,7 @@
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('elm', elm)\n",
+  "environment.loaders.prepend('elm', elm)\n",
   before: "module.exports"
 
 say "Copying Elm example entry file to #{Webpacker.config.source_entry_path}"
@@ -27,7 +27,7 @@
 run "yarn run elm make"
 
 say "Updating webpack paths to include .elm file extension"
-insert_into_file Webpacker.config.config_path, "- .elm\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .elm\n".indent(4), after: /\s+extensions:\n/
 
 say "Updating Elm source location"
 gsub_file "elm.json", /\"\src\"\n/,

lib/install/erb.rb

@@ -9,11 +9,11 @@
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('erb', erb)\n",
+  "environment.loaders.prepend('erb', erb)\n",
   before: "module.exports"
 
 say "Updating webpack paths to include .erb file extension"
-insert_into_file Webpacker.config.config_path, "- .erb\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .erb\n".indent(4), after: /\s+extensions:\n/
 
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/erb/hello_erb.js.erb",

lib/install/loaders/typescript.js

@@ -1,6 +1,11 @@
+const PnpWebpackPlugin = require('pnp-webpack-plugin')
+
 module.exports = {
   test: /\.(ts|tsx)?(\.erb)?$/,
-  use: [{
-    loader: 'ts-loader'
-  }]
+  use: [
+    {
+      loader: 'ts-loader',
+      options: PnpWebpackPlugin.tsLoaderOptions()
+    }
+  ]
 }

lib/install/react.rb

@@ -10,7 +10,7 @@
 copy_file "#{__dir__}/examples/react/hello_react.jsx", "#{Webpacker.config.source_entry_path}/hello_react.jsx"
 
 say "Updating webpack paths to include .jsx file extension"
-insert_into_file Webpacker.config.config_path, "- .jsx\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .jsx\n".indent(4), after: /\s+extensions:\n/
 
 say "Installing all react dependencies"
 run "yarn add react react-dom @babel/preset-react prop-types babel-plugin-transform-react-remove-prop-types"

lib/install/typescript.rb

@@ -24,17 +24,17 @@
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('typescript', typescript)\n",
+  "environment.loaders.prepend('typescript', typescript)\n",
   before: "module.exports"
 
 say "Copying tsconfig.json to the Rails root directory for typescript"
 copy_file "#{__dir__}/examples/#{example_source}/tsconfig.json", "tsconfig.json"
 
 say "Updating webpack paths to include .ts file extension"
-insert_into_file Webpacker.config.config_path, "- .ts\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .ts\n".indent(4), after: /\s+extensions:\n/
 
 say "Updating webpack paths to include .tsx file extension"
-insert_into_file Webpacker.config.config_path, "- .tsx\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .tsx\n".indent(4), after: /\s+extensions:\n/
 
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/typescript/hello_typescript.ts",

lib/install/vue.rb

@@ -9,7 +9,7 @@
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin())\n",
+  "environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())\n",
   before: "module.exports"
 
 say "Adding vue loader to config/webpack/environment.js"
@@ -18,11 +18,11 @@
   after: "require('vue-loader')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('vue', vue)\n",
+  "environment.loaders.prepend('vue', vue)\n",
   before: "module.exports"
 
 say "Updating webpack paths to include .vue file extension"
-insert_into_file Webpacker.config.config_path, "- .vue\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .vue\n".indent(4), after: /\s+extensions:\n/
 
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/vue/hello_vue.js",

package.json

@@ -35,6 +35,7 @@
     "node-sass": "^4.10.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "path-complete-extname": "^1.0.0",
+    "pnp-webpack-plugin": "^1.2.1",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",

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',

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

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', () => {

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(),