Webpack 4.0 (#1316)

Gemfile.lock

@@ -9,53 +9,53 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (5.1.5)
-      actionpack (= 5.1.5)
+    actioncable (5.1.6)
+      actionpack (= 5.1.6)
       nio4r (~> 2.0)
       websocket-driver (~> 0.6.1)
-    actionmailer (5.1.5)
-      actionpack (= 5.1.5)
-      actionview (= 5.1.5)
-      activejob (= 5.1.5)
+    actionmailer (5.1.6)
+      actionpack (= 5.1.6)
+      actionview (= 5.1.6)
+      activejob (= 5.1.6)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (5.1.5)
-      actionview (= 5.1.5)
-      activesupport (= 5.1.5)
+    actionpack (5.1.6)
+      actionview (= 5.1.6)
+      activesupport (= 5.1.6)
       rack (~> 2.0)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (5.1.5)
-      activesupport (= 5.1.5)
+    actionview (5.1.6)
+      activesupport (= 5.1.6)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.3)
-    activejob (5.1.5)
-      activesupport (= 5.1.5)
+    activejob (5.1.6)
+      activesupport (= 5.1.6)
       globalid (>= 0.3.6)
-    activemodel (5.1.5)
-      activesupport (= 5.1.5)
-    activerecord (5.1.5)
-      activemodel (= 5.1.5)
-      activesupport (= 5.1.5)
+    activemodel (5.1.6)
+      activesupport (= 5.1.6)
+    activerecord (5.1.6)
+      activemodel (= 5.1.6)
+      activesupport (= 5.1.6)
       arel (~> 8.0)
-    activesupport (5.1.5)
+    activesupport (5.1.6)
       concurrent-ruby (~> 1.0, >= 1.0.2)
-      i18n (~> 0.7)
+      i18n (>= 0.7, < 2)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
     arel (8.0.0)
     ast (2.4.0)
     builder (3.2.3)
-    byebug (10.0.0)
+    byebug (10.0.2)
     concurrent-ruby (1.0.5)
     crass (1.0.3)
     erubi (1.7.1)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
-    i18n (0.9.5)
+    i18n (1.0.0)
       concurrent-ruby (~> 1.0)
     loofah (2.2.2)
       crass (~> 1.0.2)
@@ -66,44 +66,44 @@ GEM
     mini_mime (1.0.0)
     mini_portile2 (2.3.0)
     minitest (5.11.3)
-    nio4r (2.2.0)
+    nio4r (2.3.0)
     nokogiri (1.8.2)
       mini_portile2 (~> 2.3.0)
     parallel (1.12.1)
-    parser (2.5.0.3)
+    parser (2.5.0.5)
       ast (~> 2.4.0)
     powerpack (0.1.1)
     rack (2.0.4)
     rack-proxy (0.6.4)
       rack
-    rack-test (0.8.3)
+    rack-test (1.0.0)
       rack (>= 1.0, < 3)
-    rails (5.1.5)
-      actioncable (= 5.1.5)
-      actionmailer (= 5.1.5)
-      actionpack (= 5.1.5)
-      actionview (= 5.1.5)
-      activejob (= 5.1.5)
-      activemodel (= 5.1.5)
-      activerecord (= 5.1.5)
-      activesupport (= 5.1.5)
+    rails (5.1.6)
+      actioncable (= 5.1.6)
+      actionmailer (= 5.1.6)
+      actionpack (= 5.1.6)
+      actionview (= 5.1.6)
+      activejob (= 5.1.6)
+      activemodel (= 5.1.6)
+      activerecord (= 5.1.6)
+      activesupport (= 5.1.6)
       bundler (>= 1.3.0)
-      railties (= 5.1.5)
+      railties (= 5.1.6)
       sprockets-rails (>= 2.0.0)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.0.3)
-      loofah (~> 2.0)
-    railties (5.1.5)
-      actionpack (= 5.1.5)
-      activesupport (= 5.1.5)
+    rails-html-sanitizer (1.0.4)
+      loofah (~> 2.2, >= 2.2.2)
+    railties (5.1.6)
+      actionpack (= 5.1.6)
+      activesupport (= 5.1.6)
       method_source
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
     rainbow (3.0.0)
-    rake (12.3.0)
-    rubocop (0.53.0)
+    rake (12.3.1)
+    rubocop (0.54.0)
       parallel (~> 1.10)
       parser (>= 2.5)
       powerpack (~> 0.1)

lib/install/loaders/vue.js

@@ -2,12 +2,10 @@ const { dev_server: devServer } = require('@rails/webpacker').config
 
 const isProduction = process.env.NODE_ENV === 'production'
 const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
-const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction
 
 module.exports = {
   test: /\.vue(\.erb)?$/,
   use: [{
-    loader: 'vue-loader',
-    options: { extractCSS }
+    loader: 'vue-loader'
   }]
 }

lib/install/typescript.rb

@@ -41,6 +41,6 @@
   "#{Webpacker.config.source_entry_path}/hello_typescript.ts"
 
 say "Installing all typescript dependencies"
-run "yarn add typescript ts-loader@3.5.0 #{additional_packages}"
+run "yarn add typescript ts-loader #{additional_packages}"
 
 say "Webpacker now supports typescript 🎉", :green

lib/install/vue.rb

@@ -3,10 +3,19 @@
 say "Copying vue loader to config/webpack/loaders"
 copy_file "#{__dir__}/loaders/vue.js", Rails.root.join("config/webpack/loaders/vue.js").to_s
 
+say "Adding vue loader plugin to config/webpack/environment.js"
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "const { VueLoaderPlugin } = require('vue-loader')\n",
+  after: "require('@rails/webpacker')\n"
+
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin())\n",
+  before: "module.exports"
+
 say "Adding vue loader to config/webpack/environment.js"
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "const vue =  require('./loaders/vue')\n",
-  after: "require('@rails/webpacker')\n"
+  after: "require('vue-loader')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "environment.loaders.append('vue', vue)\n",
@@ -24,7 +33,7 @@
   "#{Webpacker.config.source_path}/app.vue"
 
 say "Installing all Vue dependencies"
-run "yarn add vue vue-loader vue-template-compiler"
+run "yarn add vue vue-loader@next vue-template-compiler"
 
 if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
   say "You need to enable unsafe-eval rule.", :yellow

package.json

@@ -13,37 +13,38 @@
   },
   "dependencies": {
     "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.1.3",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
-    "case-sensitive-paths-webpack-plugin": "^2.1.1",
-    "compression-webpack-plugin": "^1.1.10",
-    "css-loader": "^0.28.9",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.6",
+    "case-sensitive-paths-webpack-plugin": "^2.1.2",
+    "compression-webpack-plugin": "^1.1.11",
+    "css-loader": "^0.28.11",
+    "file-loader": "^1.1.11",
     "glob": "^7.1.2",
-    "js-yaml": "^3.10.0",
-    "node-sass": "^4.7.2",
+    "js-yaml": "^3.11.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "node-sass": "^4.8.3",
     "path-complete-extname": "^1.0.0",
     "postcss-cssnext": "^3.1.0",
-    "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.1.0",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.20.1",
-    "uglifyjs-webpack-plugin": "^1.1.8",
-    "webpack": "^3.10.0",
-    "webpack-manifest-plugin": "^1.3.2"
+    "postcss-import": "^11.1.0",
+    "postcss-loader": "^2.1.3",
+    "sass-loader": "^6.0.7",
+    "style-loader": "^0.20.3",
+    "uglifyjs-webpack-plugin": "^1.2.4",
+    "webpack": "^4.4.1",
+    "webpack-assets-manifest": "^3.0.1",
+    "webpack-cli": "^2.0.13"
   },
   "devDependencies": {
-    "eslint": "^4.17.0",
+    "eslint": "^4.18.2",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.6.1",
-    "jest": "^22.2.1"
+    "eslint-plugin-react": "^7.7.0",
+    "jest": "^22.4.2"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",

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

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

package/environments/production.js

@@ -1,38 +1,11 @@
-const webpack = require('webpack')
-const CompressionPlugin = require('compression-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-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(
-      'UglifyJs',
-      new UglifyJsPlugin({
-        parallel: true,
-        cache: true,
-        sourceMap: true,
-        uglifyOptions: {
-          ie8: false,
-          ecma: 8,
-          warnings: false,
-          mangle: {
-            safari10: true
-          },
-          compress: {
-            warnings: false,
-            comparisons: false
-          },
-          output: {
-            ascii_only: true
-          }
-        }
-      })
-    )
-
     this.plugins.append(
       'Compression',
       new CompressionPlugin({
@@ -44,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
+              }
+            }
+          })
+        ]
+      }
     })
   }
 }