webpacker 1.2 → 2.0

data/lib/install/angular.rb

@@ -1,6 +1,6 @@
 require "webpacker/configuration"
 
-puts "Copying angular loader to #{Webpacker::Configuration.config_path}/loaders"
+puts "Copying angular loader to config/webpack/loaders"
 copy_file "#{__dir__}/config/loaders/installers/angular.js", "config/webpack/loaders/angular.js"
 
 puts "Copying angular example entry file to #{Webpacker::Configuration.entry_path}"
@@ -13,6 +13,6 @@ puts "Copying tsconfig.json to the Rails root directory for typescript"
 copy_file "#{__dir__}/examples/angular/tsconfig.json", "tsconfig.json"
 
 puts "Installing all angular dependencies"
-run "./bin/yarn add typescript ts-loader core-js zone.js rxjs @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic"
+run "yarn add typescript ts-loader core-js zone.js rxjs @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic"
 
 puts "Webpacker now supports angular and typescript 🎉"

data/lib/install/bin/webpack-dev-server.tt

@@ -10,24 +10,34 @@ RAILS_ENV = ENV["RAILS_ENV"]
 ENV["NODE_ENV"] ||= RAILS_ENV
 NODE_ENV = ENV["NODE_ENV"]
 
-APP_PATH    = File.expand_path("../", __dir__)
-CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")
+APP_PATH          = File.expand_path("../", __dir__)
+CONFIG_FILE       = File.join(APP_PATH, "config/webpacker.yml")
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/development.js")
+
+def args(key)
+  index = ARGV.index(key)
+  index ? ARGV[index + 1] : nil
+end
 
 begin
-  paths = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]
+  dev_server = YAML.load_file(CONFIG_FILE)["development"]["dev_server"]
 
-  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
-  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
+  DEV_SERVER_HOST = "http#{"s" if args('--https') || dev_server["https"]}://#{args('--host') || dev_server["host"]}:#{args('--port') || dev_server["port"]}"
 
-  WEBPACK_BIN       = "#{NODE_MODULES_PATH}/.bin/webpack-dev-server"
-  DEV_SERVER_CONFIG = "#{WEBPACK_CONFIG_PATH}/development.server.js"
 rescue Errno::ENOENT, NoMethodError
-  puts "Configuration not found in config/webpacker/paths.yml."
+  puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
   puts "Please run bundle exec rails webpacker:install to install webpacker"
   exit!
 end
 
+newenv = {
+  "NODE_PATH" => NODE_MODULES_PATH.shellescape,
+  "ASSET_HOST" => DEV_SERVER_HOST.shellescape
+}.freeze
+
+cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG] + ARGV
+
 Dir.chdir(APP_PATH) do
-  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \
-    "--config #{DEV_SERVER_CONFIG} #{ARGV.join(" ")}"
+  exec newenv, *cmdline
 end

data/lib/install/bin/webpack.tt

@@ -5,29 +5,24 @@ require "shellwords"
 require "yaml"
 
 ENV["RAILS_ENV"] ||= "development"
-RAILS_ENV   = ENV["RAILS_ENV"]
+RAILS_ENV = ENV["RAILS_ENV"]
 
 ENV["NODE_ENV"] ||= RAILS_ENV
-NODE_ENV    = ENV["NODE_ENV"]
+NODE_ENV = ENV["NODE_ENV"]
 
-APP_PATH               = File.expand_path("../", __dir__)
-CONFIG_PATH            = File.join(APP_PATH, "config/webpack/paths.yml")
+APP_PATH          = File.expand_path("../", __dir__)
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js")
 
-begin
-  paths            = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]
-
-  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
-  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
-rescue Errno::ENOENT, NoMethodError
-  puts "Configuration not found in config/webpack/paths.yml"
+unless File.exist?(WEBPACK_CONFIG)
+  puts "Webpack configuration not found."
   puts "Please run bundle exec rails webpacker:install to install webpacker"
   exit!
 end
 
-WEBPACK_BIN    = "#{NODE_MODULES_PATH}/.bin/webpack"
-WEBPACK_CONFIG = "#{WEBPACK_CONFIG_PATH}/#{NODE_ENV}.js"
+newenv  = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
+cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
 
 Dir.chdir(APP_PATH) do
-  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --config #{WEBPACK_CONFIG}" \
-    " #{ARGV.join(" ")}"
+  exec newenv, *cmdline
 end

data/lib/install/config/.babelrc

@@ -1,5 +1,17 @@
 {
   "presets": [
-    ["env", { "modules": false } ]
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": "> 1%",
+        "uglify": true
+      },
+      "useBuiltIns": true
+    }]
+  ],
+
+  "plugins": [
+    "syntax-dynamic-import",
+    ["transform-class-properties", { "spec": true }]
   ]
 }

data/lib/install/config/loaders/core/sass.js

@@ -7,8 +7,9 @@ module.exports = {
     fallback: 'style-loader',
     use: [
       { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
-      'postcss-loader',
-      'sass-loader'
+      { loader: 'postcss-loader', options: { sourceMap: true } },
+      'resolve-url-loader',
+      { loader: 'sass-loader', options: { sourceMap: true } }
     ]
   })
 }

data/lib/install/config/loaders/installers/elm.js

@@ -0,0 +1,20 @@
+const path = require('path')
+const { env } = require('../configuration.js')
+
+const elmSource = path.resolve(process.cwd())
+const elmMake = `${elmSource}/node_modules/.bin/elm-make`
+const elmDefaultOptions = `cwd=${elmSource}&pathToMake=${elmMake}`
+
+const loaderOptions = () => {
+  if (env.NODE_ENV === 'production') {
+    return `elm-webpack-loader?${elmDefaultOptions}`
+  }
+
+  return `elm-hot-loader!elm-webpack-loader?${elmDefaultOptions}&verbose=true&warn=true&debug=true`
+}
+
+module.exports = {
+  test: /\.elm$/,
+  exclude: [/elm-stuff/, /node_modules/],
+  loader: loaderOptions()
+}

data/lib/install/config/loaders/installers/vue.js

@@ -2,6 +2,7 @@ module.exports = {
   test: /.vue$/,
   loader: 'vue-loader',
   options: {
+    extractCSS: true,
     loaders: {
       js: 'babel-loader',
       file: 'file-loader',

data/lib/install/config/webpack/configuration.js

@@ -1,26 +1,35 @@
-// Common configuration for webpacker loaded from config/webpack/paths.yml
+// Common configuration for webpacker loaded from config/webpacker.yml
 
 const { join, resolve } = require('path')
 const { env } = require('process')
 const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
 
-const configPath = resolve('config', 'webpack')
+const configPath = resolve('config', 'webpacker.yml')
 const loadersDir = join(__dirname, 'loaders')
-const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]
-const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))[env.NODE_ENV]
+const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]
 
-// Compute public path based on environment and ASSET_HOST in production
-const ifHasCDN = env.ASSET_HOST !== undefined && env.NODE_ENV === 'production'
-const devServerUrl = `http://${devServer.host}:${devServer.port}/${paths.entry}/`
-const publicUrl = ifHasCDN ? `${env.ASSET_HOST}/${paths.entry}/` : `/${paths.entry}/`
-const publicPath = env.NODE_ENV !== 'production' ? devServerUrl : publicUrl
+function removeOuterSlashes(string) {
+  return string.replace(/^\/*/, '').replace(/\/*$/, '')
+}
+
+function formatPublicPath(host = '', path = '') {
+  let formattedHost = removeOuterSlashes(host)
+  if (formattedHost && !/^http/i.test(formattedHost)) {
+    formattedHost = `//${formattedHost}`
+  }
+  const formattedPath = removeOuterSlashes(path)
+  return `${formattedHost}/${formattedPath}/`
+}
+
+const output = {
+  path: resolve('public', settings.public_output_path),
+  publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path)
+}
 
 module.exports = {
-  devServer,
+  settings,
   env,
-  paths,
   loadersDir,
-  publicUrl,
-  publicPath
+  output
 }

data/lib/install/config/webpack/development.js

@@ -2,9 +2,10 @@
 
 const merge = require('webpack-merge')
 const sharedConfig = require('./shared.js')
+const { settings, output } = require('./configuration.js')
 
 module.exports = merge(sharedConfig, {
-  devtool: 'sourcemap',
+  devtool: 'cheap-eval-source-map',
 
   stats: {
     errorDetails: true
@@ -12,5 +13,20 @@ module.exports = merge(sharedConfig, {
 
   output: {
     pathinfo: true
+  },
+
+  devServer: {
+    clientLogLevel: 'none',
+    https: settings.dev_server.https,
+    host: settings.dev_server.host,
+    port: settings.dev_server.port,
+    contentBase: output.path,
+    publicPath: output.publicPath,
+    compress: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    historyApiFallback: true,
+    watchOptions: {
+      ignored: /node_modules/
+    }
   }
 })

data/lib/install/config/webpack/production.js

@@ -9,13 +9,27 @@ const sharedConfig = require('./shared.js')
 
 module.exports = merge(sharedConfig, {
   output: { filename: '[name]-[chunkhash].js' },
+  devtool: 'source-map',
+  stats: 'normal',
 
   plugins: [
-    new webpack.optimize.UglifyJsPlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      minimize: true,
+      sourceMap: true,
+
+      compress: {
+        warnings: false
+      },
+
+      output: {
+        comments: false
+      }
+    }),
+
     new CompressionPlugin({
       asset: '[path].gz[query]',
       algorithm: 'gzip',
-      test: /\.(js|css|svg|eot|ttf|woff|woff2)$/
+      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
     })
   ]
 })

data/lib/install/config/webpack/shared.js

@@ -9,16 +9,17 @@ const { sync } = require('glob')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const ManifestPlugin = require('webpack-manifest-plugin')
 const extname = require('path-complete-extname')
-const { env, paths, publicPath, loadersDir } = require('./configuration.js')
+const { env, settings, output, loadersDir } = require('./configuration.js')
 
-const extensionGlob = `**/*{${paths.extensions.join(',')}}*`
-const packPaths = sync(join(paths.source, paths.entry, extensionGlob))
+const extensionGlob = `**/*{${settings.extensions.join(',')}}*`
+const entryPath = join(settings.source_path, settings.source_entry_path)
+const packPaths = sync(join(entryPath, extensionGlob))
 
 module.exports = {
   entry: packPaths.reduce(
     (map, entry) => {
       const localMap = map
-      const namespace = relative(join(paths.source, paths.entry), dirname(entry))
+      const namespace = relative(join(entryPath), dirname(entry))
       localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry)
       return localMap
     }, {}
@@ -26,8 +27,8 @@ module.exports = {
 
   output: {
     filename: '[name].js',
-    path: resolve(paths.output, paths.entry),
-    publicPath
+    path: output.path,
+    publicPath: output.publicPath
   },
 
   module: {
@@ -37,18 +38,21 @@ module.exports = {
   plugins: [
     new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
     new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
-    new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true })
+    new ManifestPlugin({
+      publicPath: output.publicPath,
+      writeToFileEmit: true
+    })
   ],
 
   resolve: {
-    extensions: paths.extensions,
+    extensions: settings.extensions,
     modules: [
-      resolve(paths.source),
-      resolve(paths.node_modules)
+      resolve(settings.source_path),
+      'node_modules'
     ]
   },
 
   resolveLoader: {
-    modules: [paths.node_modules]
+    modules: ['node_modules']
   }
 }

data/lib/install/config/{webpack/paths.yml → webpacker.yml}

@@ -1,14 +1,13 @@
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
-  config: config/webpack
-  entry: packs
-  output: public
-  manifest: manifest.json
-  node_modules: node_modules
-  source: app/javascript
+  source_path: app/javascript
+  source_entry_path: packs
+  public_output_path: packs
+
   extensions:
     - .coffee
+    - .erb
     - .js
     - .jsx
     - .ts
@@ -25,9 +24,15 @@ default: &default
 development:
   <<: *default
 
+  dev_server:
+    host: 0.0.0.0
+    port: 8080
+    https: false
+
 test:
   <<: *default
-  manifest: manifest-test.json
+
+  public_output_path: packs-test
 
 production:
   <<: *default

data/lib/install/elm.rb

@@ -0,0 +1,29 @@
+require "webpacker/configuration"
+
+puts "Copying elm loader to config/webpack/loaders"
+copy_file "#{__dir__}/config/loaders/installers/elm.js",
+          "config/webpack/loaders/elm.js"
+
+puts "Copying elm example entry file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{__dir__}/examples/elm/Main.elm", "#{Webpacker::Configuration.entry_path}/Main.elm"
+
+puts "Copying elm app file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{__dir__}/examples/elm/hello_elm.js",
+          "#{Webpacker::Configuration.entry_path}/hello_elm.js"
+
+puts "Installing all elm dependencies"
+run "yarn add elm elm-webpack-loader"
+run "yarn add --dev elm-hot-loader"
+run "yarn run elm package install -- --yes"
+
+puts "Updating Webpack paths to include Elm file extension"
+insert_into_file Webpacker::Configuration.file_path, "    - .elm\n", after: /extensions:\n/
+
+puts "Updating elm source location"
+source_path = File.join(Webpacker::Configuration.source, Webpacker::Configuration.fetch(:source_entry_path))
+gsub_file "elm-package.json", /\"\.\"\n/, %("#{source_path}"\n)
+
+puts "Updating .gitignore to include elm-stuff folder"
+insert_into_file ".gitignore", "/elm-stuff\n", before: "/node_modules\n"
+
+puts "Webpacker now supports elm 🎉"

data/lib/install/examples/angular/tsconfig.json

@@ -12,6 +12,7 @@
   "exclude": [
     "**/*.spec.ts",
     "node_modules",
+    "vendor",
     "public"
   ],
   "compileOnSave": false

data/lib/install/examples/elm/Main.elm

@@ -0,0 +1,54 @@
+module Main exposing (..)
+
+import Html exposing (Html, h1, text)
+import Html.Attributes exposing (style)
+
+-- MODEL
+
+type alias Model =
+  {
+  }
+
+-- INIT
+
+init : (Model, Cmd Message)
+init =
+  (Model, Cmd.none)
+
+-- VIEW
+
+view : Model -> Html Message
+view model =
+  -- The inline style is being used for example purposes in order to keep this example simple and
+  -- avoid loading additional resources. Use a proper stylesheet when building your own app.
+  h1 [style [("display", "flex"), ("justify-content", "center")]]
+     [text "Hello Elm!"]
+
+-- MESSAGE
+
+type Message
+  = None
+
+-- UPDATE
+
+update : Message -> Model -> (Model, Cmd Message)
+update message model =
+  (model, Cmd.none)
+
+-- SUBSCRIPTIONS
+
+subscriptions : Model -> Sub Message
+subscriptions model =
+  Sub.none
+
+-- MAIN
+
+main : Program Never Model Message
+main =
+  Html.program
+    {
+      init = init,
+      view = view,
+      update = update,
+      subscriptions = subscriptions
+    }