webpacker 3.0.2 → 3.1.0

data/package/config_types/config_object.js

@@ -0,0 +1,55 @@
+const objectify = require('../utils/objectify')
+const deepAssign = require('../utils/deep_assign')
+const deepMerge = require('../utils/deep_merge')
+const { isStrPath, prettyPrint } = require('../utils/helpers')
+
+/**
+  * @class
+  * @extends { Object }
+*/
+class ConfigObject extends Object {
+  constructor(props = {}) {
+    super()
+    this.merge(props)
+  }
+
+  get(key) {
+    return isStrPath(key) ? objectify(key, this) : this[key]
+  }
+
+  set(key, value) {
+    Object.assign(this, deepAssign(this, key, value))
+    return this
+  }
+
+  delete(key) {
+    let obj = this
+    let propKey = key
+
+    if (isStrPath(key)) {
+      const keys = key.split('.')
+      propKey = keys.pop()
+      const parentObjPath = keys.join('.')
+      obj = objectify(parentObjPath, this)
+    }
+
+    if (!obj) throw new Error(`Prop not found: ${key} in ${prettyPrint(obj)}`)
+    delete obj[propKey]
+
+    return this
+  }
+
+  toObject() {
+    const object = {}
+    /* eslint no-return-assign: 0 */
+    Object.keys(this).forEach(key => (object[key] = this[key]))
+    return object
+  }
+
+  merge(config) {
+    Object.assign(this, deepMerge(this, config))
+    return this
+  }
+}
+
+module.exports = ConfigObject

data/package/config_types/index.js

@@ -0,0 +1,7 @@
+const ConfigObject = require('./config_object')
+const ConfigList = require('./config_list')
+
+module.exports = {
+  ConfigObject,
+  ConfigList
+}

data/package/environment.js

@@ -1,36 +1,38 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
-const { basename, dirname, join, relative, resolve } = require('path')
+const {
+  basename, dirname, join, relative, resolve
+} = require('path')
 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 CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 
+const { ConfigList, ConfigObject } = require('./config_types')
+const rules = require('./rules')
 const config = require('./config')
 const assetHost = require('./asset_host')
 
-function getLoaderMap() {
-  const result = new Map()
-  const paths = sync(resolve(__dirname, 'loaders', '*.js'))
-  paths.forEach((path) => {
-    const name = basename(path, extname(path))
-    result.set(name, require(path))
-  })
+const getLoaderList = () => {
+  const result = new ConfigList()
+  Object.keys(rules).forEach(key => result.append(key, rules[key]))
   return result
 }
 
-function getPluginMap() {
-  const result = new Map()
-  result.set('Environment', new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))))
-  result.set('ExtractText', new ExtractTextPlugin('[name]-[contenthash].css'))
-  result.set('Manifest', new ManifestPlugin({ publicPath: assetHost.publicPath, writeToFileEmit: true }))
+const getPluginList = () => {
+  const result = new ConfigList()
+  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: assetHost.publicPath, writeToFileEmit: true }))
   return result
 }
 
-function getExtensionsGlob() {
+const getExtensionsGlob = () => {
   const { extensions } = config
   if (!extensions.length) {
     throw new Error('You must configure at least one extension to compile in webpacker.yml')
@@ -38,58 +40,80 @@ function getExtensionsGlob() {
   return extensions.length === 1 ? `**/${extensions[0]}` : `**/*{${extensions.join(',')}}`
 }
 
-function getEntryObject() {
-  const result = {}
+const getEntryObject = () => {
+  const result = new ConfigObject()
   const glob = getExtensionsGlob()
   const rootPath = join(config.source_path, config.source_entry_path)
   const paths = sync(join(rootPath, glob))
   paths.forEach((path) => {
     const namespace = relative(join(rootPath), dirname(path))
     const name = join(namespace, basename(path, extname(path)))
-    result[name] = resolve(path)
+    result.set(name, resolve(path))
   })
   return result
 }
 
-function getModulePaths() {
-  let result = [resolve(config.source_path), 'node_modules']
+const getModulePaths = () => {
+  const result = new ConfigList()
+  result.append('source', resolve(config.source_path))
+  result.append('node_modules', 'node_modules')
   if (config.resolved_paths) {
-    result = result.concat(config.resolved_paths)
+    config.resolved_paths.forEach(path => result.append(basename(path), path))
   }
   return result
 }
 
+const getBaseConfig = () =>
+  new ConfigObject({
+    output: {
+      filename: '[name]-[chunkhash].js',
+      chunkFilename: '[name]-[chunkhash].chunk.js',
+      path: assetHost.path,
+      publicPath: assetHost.publicPath
+    },
+
+    resolve: {
+      extensions: config.extensions
+    },
+
+    resolveLoader: {
+      modules: ['node_modules']
+    },
+
+    node: {
+      dgram: 'empty',
+      fs: 'empty',
+      net: 'empty',
+      tls: 'empty',
+      child_process: 'empty'
+    }
+  })
+
 module.exports = class Environment {
   constructor() {
-    this.loaders = getLoaderMap()
-    this.plugins = getPluginMap()
+    this.loaders = getLoaderList()
+    this.plugins = getPluginList()
+    this.config = getBaseConfig()
+    this.entry = getEntryObject()
+    this.resolvedModules = getModulePaths()
   }
 
   toWebpackConfig() {
-    return {
-      entry: getEntryObject(),
-
-      output: {
-        filename: '[name]-[chunkhash].js',
-        chunkFilename: '[name]-[chunkhash].chunk.js',
-        path: assetHost.path,
-        publicPath: assetHost.publicPath
-      },
+    return this.config.merge({
+      entry: this.entry.toObject(),
 
       module: {
-        rules: Array.from(this.loaders.values())
+        strictExportPresence: true,
+        rules: [
+          { oneOf: this.loaders.values() }
+        ]
       },
 
-      plugins: Array.from(this.plugins.values()),
+      plugins: this.plugins.values(),
 
       resolve: {
-        extensions: config.extensions,
-        modules: getModulePaths()
-      },
-
-      resolveLoader: {
-        modules: ['node_modules']
+        modules: this.resolvedModules.values()
       }
-    }
+    })
   }
 }

data/package/environments/development.js

@@ -8,43 +8,40 @@ module.exports = class extends Environment {
     super()
 
     if (devServer.hmr) {
-      this.plugins.set('HotModuleReplacement', new webpack.HotModuleReplacementPlugin())
-      this.plugins.set('NamedModules', new webpack.NamedModulesPlugin())
+      this.plugins.append('HotModuleReplacement', new webpack.HotModuleReplacementPlugin())
+      this.plugins.append('NamedModules', new webpack.NamedModulesPlugin())
+      this.config.output.filename = '[name]-[hash].js'
     }
-  }
 
-  toWebpackConfig() {
-    const result = super.toWebpackConfig()
-    if (devServer.hmr) {
-      result.output.filename = '[name]-[hash].js'
-    }
-    result.output.pathinfo = true
-    result.devtool = 'cheap-eval-source-map'
-    result.devServer = {
-      clientLogLevel: 'none',
-      compress: true,
-      disableHostCheck: devServer.disable_host_check,
-      host: devServer.host,
-      port: devServer.port,
-      https: devServer.https,
-      hot: devServer.hmr,
-      contentBase: assetHost.path,
-      inline: devServer.inline,
-      useLocalIp: devServer.use_local_ip,
-      public: devServer.public,
-      publicPath: assetHost.publicPath,
-      historyApiFallback: true,
-      headers: {
-        'Access-Control-Allow-Origin': '*'
+    this.config.merge({
+      devtool: 'cheap-module-source-map',
+      output: {
+        pathinfo: true
       },
-      overlay: devServer.overlay,
-      watchOptions: {
-        ignored: /node_modules/
-      },
-      stats: {
-        errorDetails: true
+      devServer: {
+        clientLogLevel: 'none',
+        compress: devServer.compress,
+        quiet: devServer.quiet,
+        disableHostCheck: devServer.disable_host_check,
+        host: devServer.host,
+        port: devServer.port,
+        https: devServer.https,
+        hot: devServer.hmr,
+        contentBase: assetHost.path,
+        inline: devServer.inline,
+        useLocalIp: devServer.use_local_ip,
+        public: devServer.public,
+        publicPath: assetHost.publicPath,
+        historyApiFallback: {
+          disableDotRule: true
+        },
+        headers: devServer.headers,
+        overlay: devServer.overlay,
+        stats: {
+          errorDetails: true
+        },
+        watchOptions: devServer.watch_options
       }
-    }
-    return result
+    })
   }
 }

data/package/environments/production.js

@@ -6,29 +6,32 @@ module.exports = class extends Environment {
   constructor() {
     super()
 
-    this.plugins.set('ModuleConcatenation', new webpack.optimize.ModuleConcatenationPlugin())
+    this.plugins.append('ModuleConcatenation', new webpack.optimize.ModuleConcatenationPlugin())
 
-    this.plugins.set('UglifyJs', new webpack.optimize.UglifyJsPlugin({
+    this.plugins.append('UglifyJs', new webpack.optimize.UglifyJsPlugin({
       sourceMap: true,
+      mangle: {
+        safari10: true
+      },
       compress: {
-        warnings: false
+        warnings: false,
+        comparisons: false
       },
       output: {
-        comments: false
+        comments: false,
+        ascii_only: true
       }
     }))
 
-    this.plugins.set('Compression', new CompressionPlugin({
+    this.plugins.append('Compression', new CompressionPlugin({
       asset: '[path].gz[query]',
       algorithm: 'gzip',
       test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
     }))
-  }
 
-  toWebpackConfig() {
-    const result = super.toWebpackConfig()
-    result.devtool = 'nosources-source-map'
-    result.stats = 'normal'
-    return result
+    this.config.merge({
+      devtool: 'nosources-source-map',
+      stats: 'normal'
+    })
   }
 }

data/package/index.js

@@ -4,8 +4,11 @@
 const { resolve } = require('path')
 const { existsSync } = require('fs')
 const Environment = require('./environment')
+const config = require('./config')
+const assetHost = require('./asset_host')
+const loaders = require('./rules')
 
-function createEnvironment() {
+const createEnvironment = () => {
   const path = resolve(__dirname, 'environments', `${process.env.NODE_ENV}.js`)
   const constructor = existsSync(path) ? require(path) : Environment
   return new constructor()
@@ -13,4 +16,6 @@ function createEnvironment() {
 
 const environment = createEnvironment()
 
-module.exports = { environment, Environment }
+module.exports = {
+  environment, config, assetHost, loaders, Environment
+}

data/package/{loaders → rules}/babel.js

@@ -4,8 +4,10 @@ const { cache_path } = require('../config')
 module.exports = {
   test: /\.(js|jsx)?(\.erb)?$/,
   exclude: /node_modules/,
-  loader: 'babel-loader',
-  options: {
-    cacheDirectory: join(cache_path, 'babel-loader')
-  }
+  use: [{
+    loader: 'babel-loader',
+    options: {
+      cacheDirectory: join(cache_path, 'babel-loader')
+    }
+  }]
 }

data/package/{loaders → rules}/coffee.js

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

data/package/rules/css.js

@@ -0,0 +1,39 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const path = require('path')
+const { dev_server: devServer } = require('../config')
+
+const postcssConfigPath = path.resolve(process.cwd(), '.postcssrc.yml')
+const isProduction = process.env.NODE_ENV === 'production'
+const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
+const isHMR = inDevServer && (devServer && devServer.hmr)
+const extractCSS = !(isHMR) || isProduction
+
+const styleLoader = {
+  loader: 'style-loader',
+  options: {
+    hmr: isHMR,
+    sourceMap: true
+  }
+}
+
+const extractOptions = {
+  fallback: styleLoader,
+  use: [
+    { loader: 'css-loader', options: { minimize: isProduction, sourceMap: true, importLoaders: 2 } },
+    { loader: 'postcss-loader', options: { sourceMap: true, config: { path: postcssConfigPath } } }
+  ]
+}
+
+// For production extract styles to a separate bundle
+const extractCSSLoader = {
+  test: /\.(css)$/i,
+  use: ExtractTextPlugin.extract(extractOptions)
+}
+
+// For hot-reloading use regular loaders
+const inlineCSSLoader = {
+  test: /\.(css)$/i,
+  use: [styleLoader].concat(extractOptions.use)
+}
+
+module.exports = extractCSS ? extractCSSLoader : inlineCSSLoader

data/package/rules/elm.js

@@ -0,0 +1,23 @@
+const { resolve } = require('path')
+
+const isProduction = process.env.NODE_ENV === 'production'
+const elmSource = resolve(process.cwd())
+const elmMake = `${elmSource}/node_modules/.bin/elm-make`
+
+const elmDefaultOptions = { cwd: elmSource, pathToMake: elmMake }
+const developmentOptions = Object.assign(elmDefaultOptions, {
+  verbose: true,
+  warn: true,
+  debug: true
+})
+
+const elmWebpackLoader = {
+  loader: 'elm-webpack-loader',
+  options: isProduction ? elmDefaultOptions : developmentOptions
+}
+
+module.exports = {
+  test: /\.elm(\.erb)?$/,
+  exclude: [/elm-stuff/, /node_modules/],
+  use: isProduction ? [elmWebpackLoader] : [{ loader: 'elm-hot-loader' }, elmWebpackLoader]
+}