webpacker-legacy 0.1.0

data/Rakefile

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+require "bundler/gem_tasks"
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.libs << "lib"
+  t.test_files = FileList["test/**/*_test.rb"]
+  t.verbose = true
+end
+
+task default: :test

data/lib/install/angular.rb

@@ -0,0 +1,22 @@
+# encoding: UTF-8
+
+require "webpacker/configuration"
+
+current_dir = File.dirname(__FILE__)
+
+puts "Copying angular loader to config/webpack/loaders"
+copy_file "#{current_dir}/config/loaders/installers/angular.js", "config/webpack/loaders/angular.js"
+
+puts "Copying angular example entry file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{current_dir}/examples/angular/hello_angular.js", "#{Webpacker::Configuration.entry_path}/hello_angular.js"
+
+puts "Copying hello_angular app to #{Webpacker::Configuration.source_path}"
+directory "#{current_dir}/examples/angular/hello_angular", "#{Webpacker::Configuration.source_path}/hello_angular"
+
+puts "Copying tsconfig.json to the Rails root directory for typescript"
+copy_file "#{current_dir}/examples/angular/tsconfig.json", "tsconfig.json"
+
+puts "Installing all angular dependencies"
+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

@@ -0,0 +1,43 @@
+<%= shebang %>
+$stdout.sync = true
+
+require "shellwords"
+require "yaml"
+
+ENV["RAILS_ENV"] ||= "development"
+RAILS_ENV = ENV["RAILS_ENV"]
+
+ENV["NODE_ENV"] ||= RAILS_ENV
+NODE_ENV = ENV["NODE_ENV"]
+
+APP_PATH          = File.expand_path("../", File.dirname(__FILE__))
+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
+  dev_server = YAML.load_file(CONFIG_FILE)["development"]["dev_server"]
+
+  DEV_SERVER_HOST = "http#{"s" if args('--https') || dev_server["https"]}://#{args('--host') || dev_server["host"]}:#{args('--port') || dev_server["port"]}"
+
+rescue Errno::ENOENT, NoMethodError
+  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 newenv, *cmdline
+end

data/lib/install/bin/webpack.tt

@@ -0,0 +1,27 @@
+<%= shebang %>
+$stdout.sync = true
+
+require "shellwords"
+
+ENV["RAILS_ENV"] ||= "development"
+RAILS_ENV = ENV["RAILS_ENV"]
+
+ENV["NODE_ENV"] ||= RAILS_ENV
+NODE_ENV = ENV["NODE_ENV"]
+
+APP_PATH          = File.expand_path("../", File.dirname(__FILE__))
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js")
+
+unless File.exist?(WEBPACK_CONFIG)
+  puts "Webpack configuration not found."
+  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+newenv  = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
+cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
+
+Dir.chdir(APP_PATH) do
+  exec newenv, *cmdline
+end

data/lib/install/config/.babelrc

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

data/lib/install/config/.postcssrc.yml

@@ -0,0 +1,3 @@
+plugins:
+  postcss-smart-import: {}
+  postcss-cssnext: {}

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

@@ -0,0 +1,12 @@
+const { env, output } = require('../configuration.js')
+
+module.exports = {
+  test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
+  use: [{
+    loader: 'file-loader',
+    options: {
+      publicPath: output.publicPath,
+      name: env.NODE_ENV === 'production' ? '[name]-[hash].[ext]' : '[name].[ext]'
+    }
+  }]
+}

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

@@ -0,0 +1,5 @@
+module.exports = {
+  test: /\.js(\.erb)?$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader'
+}

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

@@ -0,0 +1,4 @@
+module.exports = {
+  test: /\.coffee(\.erb)?$/,
+  loader: 'coffee-loader'
+}

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

@@ -0,0 +1,9 @@
+module.exports = {
+  test: /\.erb$/,
+  enforce: 'pre',
+  exclude: /node_modules/,
+  loader: 'rails-erb-loader',
+  options: {
+    runner: 'bin/rails runner'
+  }
+}

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

@@ -0,0 +1,15 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const { env } = require('../configuration.js')
+
+module.exports = {
+  test: /\.(scss|sass|css)$/i,
+  use: ExtractTextPlugin.extract({
+    fallback: 'style-loader',
+    use: [
+      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
+      { loader: 'postcss-loader', options: { sourceMap: true } },
+      'resolve-url-loader',
+      { loader: 'sass-loader', options: { sourceMap: true } }
+    ]
+  })
+}

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

@@ -0,0 +1,4 @@
+module.exports = {
+  test: /.ts$/,
+  loader: 'ts-loader'
+}

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/react.js

@@ -0,0 +1,5 @@
+module.exports = {
+  test: /\.(js|jsx)?(\.erb)?$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader'
+}

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

@@ -0,0 +1,41 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const { env } = require('../configuration.js')
+
+// Change it to false if you prefer Vue styles to be inlined by javascript in runtime
+const extractStyles = false
+
+const cssLoader = [
+  { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
+  { loader: 'postcss-loader', options: { sourceMap: true } },
+  'resolve-url-loader'
+]
+const sassLoader = cssLoader.concat([
+  { loader: 'sass-loader', options: { sourceMap: true, indentedSyntax: true } }
+])
+const scssLoader = cssLoader.concat([
+  { loader: 'sass-loader', options: { sourceMap: true } }
+])
+
+function vueStyleLoader(loader) {
+  if (extractStyles) {
+    return ExtractTextPlugin.extract({
+      fallback: 'vue-style-loader',
+      use: loader
+    })
+  }
+  return ['vue-style-loader'].concat(loader)
+}
+
+module.exports = {
+  test: /.vue$/,
+  loader: 'vue-loader',
+  options: {
+    loaders: {
+      js: 'babel-loader',
+      file: 'file-loader',
+      css: vueStyleLoader(cssLoader),
+      scss: vueStyleLoader(scssLoader),
+      sass: vueStyleLoader(sassLoader)
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+// 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', 'webpacker.yml')
+const loadersDir = join(__dirname, 'loaders')
+const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]
+
+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 = {
+  settings,
+  env,
+  loadersDir,
+  output
+}

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

@@ -0,0 +1,32 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
+const merge = require('webpack-merge')
+const sharedConfig = require('./shared.js')
+const { settings, output } = require('./configuration.js')
+
+module.exports = merge(sharedConfig, {
+  devtool: 'cheap-eval-source-map',
+
+  stats: {
+    errorDetails: true
+  },
+
+  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

@@ -0,0 +1,35 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
+/* eslint global-require: 0 */
+
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const CompressionPlugin = require('compression-webpack-plugin')
+const sharedConfig = require('./shared.js')
+
+module.exports = merge(sharedConfig, {
+  output: { filename: '[name]-[chunkhash].js' },
+  devtool: 'source-map',
+  stats: 'normal',
+
+  plugins: [
+    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|html|json|ico|svg|eot|otf|ttf)$/
+    })
+  ]
+})

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

@@ -0,0 +1,58 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const webpack = require('webpack')
+const { basename, dirname, join, relative, resolve } = require('path')
+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, settings, output, loadersDir } = require('./configuration.js')
+
+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(entryPath), dirname(entry))
+      localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry)
+      return localMap
+    }, {}
+  ),
+
+  output: {
+    filename: '[name].js',
+    path: output.path,
+    publicPath: output.publicPath
+  },
+
+  module: {
+    rules: sync(join(loadersDir, '*.js')).map(loader => require(loader))
+  },
+
+  plugins: [
+    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
+    new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
+    new ManifestPlugin({
+      publicPath: output.publicPath,
+      writeToFileEmit: true
+    })
+  ],
+
+  resolve: {
+    extensions: settings.extensions,
+    modules: [
+      resolve(settings.source_path),
+      'node_modules'
+    ]
+  },
+
+  resolveLoader: {
+    modules: ['node_modules']
+  }
+}

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

@@ -0,0 +1,6 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
+const merge = require('webpack-merge')
+const sharedConfig = require('./shared.js')
+
+module.exports = merge(sharedConfig, {})

data/lib/install/config/webpacker.yml

@@ -0,0 +1,38 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_output_path: packs
+
+  extensions:
+    - .coffee
+    - .erb
+    - .js
+    - .jsx
+    - .ts
+    - .vue
+    - .sass
+    - .scss
+    - .css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+
+  dev_server:
+    host: 0.0.0.0
+    port: 8080
+    https: false
+
+test:
+  <<: *default
+
+  public_output_path: packs-test
+
+production:
+  <<: *default