webpacker 6.0.0.beta.6 → 6.0.0.pre.1

data/package/environments/__tests__/base.js

@@ -17,14 +17,14 @@ describe('Base config', () => {
   describe('config', () => {
     test('should return entry', () => {
       expect(baseConfig.entry.application).toEqual(
-        resolve('app', 'packs', 'entrypoints', 'application.js')
+        resolve('app', 'javascript', 'packs', 'application.js')
       )
     })
 
     test('should return multi file entry points', () => {
       expect(baseConfig.entry.multi_entry.sort()).toEqual([
-        resolve('app', 'packs', 'entrypoints', 'multi_entry.css'),
-        resolve('app', 'packs', 'entrypoints', 'multi_entry.js')
+        resolve('app', 'javascript', 'packs', 'multi_entry.css'),
+        resolve('app', 'javascript', 'packs', 'multi_entry.js')
       ])
     })
 
@@ -44,7 +44,7 @@ describe('Base config', () => {
     })
 
     test('should return default plugins', () => {
-      expect(baseConfig.plugins.length).toEqual(3)
+      expect(baseConfig.plugins.length).toEqual(4)
     })
 
     test('should return default resolveLoader', () => {
@@ -53,7 +53,7 @@ describe('Base config', () => {
 
     test('should return default resolve.modules with additions', () => {
       expect(baseConfig.resolve.modules).toEqual([
-        resolve('app', 'packs'),
+        resolve('app', 'javascript'),
         resolve('app/assets'),
         resolve('/etc/yarn'),
         resolve('some.config.js'),

data/package/environments/base.js

@@ -4,20 +4,19 @@
 const { basename, dirname, join, relative, resolve } = require('path')
 const extname = require('path-complete-extname')
 const PnpWebpackPlugin = require('pnp-webpack-plugin')
-const { sync: globSync } = require('glob')
+const { sync } = require('glob')
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 const WebpackAssetsManifest = require('webpack-assets-manifest')
 const webpack = require('webpack')
 const rules = require('../rules')
 const config = require('../config')
 const { isDevelopment } = require('../env')
-const { moduleExists } = require('../utils/helpers')
 
 const getEntryObject = () => {
   const entries = {}
   const rootPath = join(config.source_path, config.source_entry_path)
 
-  globSync(`${rootPath}/**/*.*`).forEach((path) => {
+  sync(`${rootPath}/**/*.*`).forEach((path) => {
     const namespace = relative(join(rootPath), dirname(path))
     const name = join(namespace, basename(path, extname(path)))
     let assetPaths = resolve(path)
@@ -53,6 +52,7 @@ const getModulePaths = () => {
 const getPlugins = () => {
   const plugins = [
     new webpack.EnvironmentPlugin(process.env),
+    PnpWebpackPlugin,
     new CaseSensitivePathsPlugin(),
     new WebpackAssetsManifest({
       entrypoints: true,
@@ -63,18 +63,18 @@ const getPlugins = () => {
     })
   ]
 
-  if (moduleExists('css-loader') && moduleExists('mini-css-extract-plugin')) {
-    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-    plugins.push(
-      new MiniCssExtractPlugin({
-        filename: isDevelopment
-          ? 'css/[name].css'
-          : 'css/[name]-[contenthash:8].css',
-        chunkFilename: isDevelopment
-          ? 'css/[id].css'
-          : 'css/[id]-[contenthash:8].css'
-      })
-    )
+  try {
+    if (require.resolve('css-loader')) {
+      const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+      plugins.push(
+        new MiniCssExtractPlugin({
+          filename: isDevelopment ? '[name].css' : '[name].[contenthash:8].css',
+          chunkFilename: isDevelopment ? '[id].css' : '[id].[contenthash:8].css'
+        })
+      )
+    }
+  } catch (e) {
+    /* Work out what to print here */
   }
 
   return plugins
@@ -86,14 +86,14 @@ module.exports = {
     filename: 'js/[name]-[contenthash].js',
     chunkFilename: 'js/[name]-[contenthash].chunk.js',
     hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
+    assetModuleFilename: 'static/[hash][ext][query]',
     path: config.outputPath,
     publicPath: config.publicPath
   },
   entry: getEntryObject(),
   resolve: {
-    extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx', '.coffee'],
-    modules: getModulePaths(),
-    plugins: [PnpWebpackPlugin]
+    extensions: ['.js', '.mjs', '.ts'],
+    modules: getModulePaths()
   },
 
   plugins: getPlugins(),
@@ -106,7 +106,7 @@ module.exports = {
   optimization: {
     splitChunks: { chunks: 'all' },
 
-    runtimeChunk: 'single'
+    runtimeChunk: { name: (entrypoint) => `runtime-${entrypoint.name}` }
   },
 
   module: {

data/package/environments/development.js

@@ -34,7 +34,6 @@ if (
       hot: devServer.hmr,
       contentBase,
       inline: devServer.inline,
-      injectClient: devServer.inject_client,
       useLocalIp: devServer.use_local_ip,
       public: devServer.public,
       publicPath,

data/package/environments/production.js

@@ -5,42 +5,45 @@ const { merge } = require('webpack-merge')
 const CompressionPlugin = require('compression-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const baseConfig = require('./base')
-const { moduleExists } = require('../utils/helpers')
 
 const getPlugins = () => {
-  const plugins = []
+  let compressionPlugin = new CompressionPlugin({
+    filename: '[path].gz[query]',
+    algorithm: 'gzip',
+    test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
+  })
 
-  plugins.push(
-    new CompressionPlugin({
-      filename: '[path][base].gz[query]',
-      algorithm: 'gzip',
+  if ('brotli' in process.versions) {
+    compressionPlugin = new CompressionPlugin({
+      filename: '[path].br[query]',
+      algorithm: 'brotliCompress',
       test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
     })
-  )
-
-  if ('brotli' in process.versions) {
-    plugins.push(
-      new CompressionPlugin({
-        filename: '[path][base].br[query]',
-        algorithm: 'brotliCompress',
-        test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
-      })
-    )
   }
 
-  return plugins
-}
+  const plugins = [compressionPlugin]
 
-const tryCssMinimizer = () => {
-  if (
-    moduleExists('css-loader') &&
-    moduleExists('css-minimizer-webpack-plugin')
-  ) {
-    const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
-    return new CssMinimizerPlugin({ sourceMap: true })
+  try {
+    if (require.resolve('css-loader')) {
+      const OptimizeCSSAssetsPlugin = require.resolve(
+        'optimize-css-assets-webpack-plugin'
+      )
+      const safePostCssParser = require.resolve('postcss-safe-parser')
+      plugins.push(
+        new OptimizeCSSAssetsPlugin({
+          parser: safePostCssParser,
+          map: {
+            inline: false,
+            annotation: true
+          }
+        })
+      )
+    }
+  } catch (e) {
+    /* Work out what to output without clutter */
   }
 
-  return null
+  return plugins
 }
 
 const productionConfig = {
@@ -50,7 +53,6 @@ const productionConfig = {
   plugins: getPlugins(),
   optimization: {
     minimizer: [
-      tryCssMinimizer(),
       new TerserPlugin({
         parallel: Number.parseInt(process.env.WEBPACKER_PARALLEL, 10) || true,
         terserOptions: {
@@ -72,7 +74,7 @@ const productionConfig = {
           }
         }
       })
-    ].filter(Boolean)
+    ]
   }
 }
 

data/package/index.js

@@ -1,15 +1,13 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
-const webpackMerge = require('webpack-merge')
 const { resolve } = require('path')
 const { existsSync } = require('fs')
 const baseConfig = require('./environments/base')
-const rules = require('./rules')
+const loaders = require('./rules')
 const config = require('./config')
 const devServer = require('./dev_server')
 const { nodeEnv } = require('./env')
-const { moduleExists, canProcess } = require('./utils/helpers')
 
 const webpackConfig = () => {
   const path = resolve(__dirname, 'environments', `${nodeEnv}.js`)
@@ -22,8 +20,5 @@ module.exports = {
   devServer,
   webpackConfig: webpackConfig(),
   baseConfig,
-  rules,
-  moduleExists,
-  canProcess,
-  ...webpackMerge
+  loaders
 }

data/package/rules/babel.js

@@ -8,7 +8,7 @@ const {
 const { isProduction } = require('../env')
 
 module.exports = {
-  test: /\.(js|jsx|mjs|ts|tsx|coffee)?(\.erb)?$/,
+  test: /\.(js|jsx|mjs|ts|tsx)?(\.erb)?$/,
   include: [sourcePath, ...additionalPaths].map((p) => {
     try {
       return realpathSync(p)

data/package/rules/coffee.js

@@ -1,6 +1,6 @@
-const { canProcess } = require('../utils/helpers')
-
-module.exports = canProcess('coffee-loader', (resolvedPath) => ({
+module.exports = {
   test: /\.coffee(\.erb)?$/,
-  use: [{ loader: resolvedPath }]
-}))
+  use: [
+    { loader: require.resolve('coffee-loader') }
+  ]
+}

data/package/rules/erb.js

@@ -1,15 +1,13 @@
-const { canProcess } = require('../utils/helpers')
-
 const runner = /^win/.test(process.platform) ? 'ruby ' : ''
 
-module.exports = canProcess('rails-erb-loader', (resolvedPath) => ({
+module.exports = {
   test: /\.erb$/,
   enforce: 'pre',
   exclude: /node_modules/,
   use: [
     {
-      loader: resolvedPath,
+      loader: require.resolve('rails-erb-loader'),
       options: { runner: `${runner}bin/rails runner` }
     }
   ]
-}))
+}

data/package/rules/file.js

@@ -13,11 +13,9 @@ module.exports = {
     /\.ttf$/,
     /\.woff$/,
     /\.woff2$/,
-    /\.svg$/
+    /\.html$/,
+    /\.json$/
   ],
   exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
-  type: 'asset/resource',
-  generator: {
-    filename: 'media/images/[hash][ext][query]'
-  }
+  type: 'asset/resource'
 }

data/package/rules/index.js

@@ -1,16 +1,24 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
+const load = (name) => {
+  try {
+    return require(`./${name}`)
+  } catch (e) {
+    return null
+  }
+}
+
 const rules = {
-  raw: require('./raw'),
-  file: require('./file'),
-  css: require('./css'),
-  sass: require('./sass'),
-  babel: require('./babel'),
-  erb: require('./erb'),
-  coffee: require('./coffee'),
-  less: require('./less'),
-  stylus: require('./stylus')
+  file: load('file'),
+  svg: load('svg'),
+  css: load('css'),
+  sass: load('sass'),
+  babel: load('babel'),
+  erb: load('erb'),
+  coffee: load('coffee'),
+  html: load('html'),
+  less: load('less')
 }
 
 module.exports = Object.keys(rules)

data/package/rules/less.js

@@ -1,22 +1,18 @@
 const path = require('path')
-const { canProcess } = require('../utils/helpers')
 const getStyleRule = require('../utils/get_style_rule')
-
 const {
   additional_paths: paths,
   source_path: sourcePath
 } = require('../config')
 
-module.exports = canProcess('less-loader', (resolvedPath) =>
-  getStyleRule(/\.(less)(\.erb)?$/i, [
-    {
-      loader: resolvedPath,
-      options: {
-        lessOptions: {
-          paths: [path.resolve(__dirname, 'node_modules'), sourcePath, ...paths]
-        },
-        sourceMap: true
-      }
+module.exports = getStyleRule(/\.(less)(\.erb)?$/i, [
+  {
+    loader: require.resolve('less-loader'),
+    options: {
+      lessOptions: {
+        paths: [path.resolve(__dirname, 'node_modules'), sourcePath, ...paths]
+      },
+      sourceMap: true
     }
-  ])
-)
+  }
+])

data/package/rules/sass.js

@@ -1,17 +1,13 @@
-/* eslint global-require: 0 */
-
+const sass = require('sass')
 const getStyleRule = require('../utils/get_style_rule')
-const { canProcess } = require('../utils/helpers')
 const { additional_paths: includePaths } = require('../config')
 
-module.exports = canProcess('sass-loader', (resolvedPath) =>
-  getStyleRule(/\.(scss|sass)(\.erb)?$/i, [
-    {
-      loader: resolvedPath,
-      options: {
-        sassOptions: { includePaths },
-        implementation: require('sass')
-      }
+module.exports = getStyleRule(/\.(scss|sass)(\.erb)?$/i, [
+  {
+    loader: require.resolve('sass-loader'),
+    options: {
+      sassOptions: { includePaths },
+      implementation: sass
     }
-  ])
-)
+  }
+])

data/package/rules/svg.js

@@ -0,0 +1,23 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+module.exports = {
+  test: /\.svg$/i,
+  type: 'asset/inline',
+  generator: {
+    dataUrl: (content) => {
+      let optimisedContent = content
+
+      try {
+        if (require.resolve('mini-svg-data-uri')) {
+          const svgToMiniDataURI = require('mini-svg-data-uri')
+          optimisedContent = svgToMiniDataURI(content.toString())
+        }
+      } catch (e) {
+        /* Work out what to print here */
+      }
+
+      return optimisedContent
+    }
+  }
+}

data/package/utils/get_style_rule.js

@@ -1,35 +1,39 @@
-/* eslint global-require: 0 */
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
-const { canProcess, moduleExists } = require('./helpers')
-
-const getStyleRule = (test, preprocessors = []) => {
-  if (moduleExists('css-loader')) {
-    const tryPostcss = () =>
-      canProcess('postcss-loader', (loaderPath) => ({
-        loader: loaderPath,
+const tryPostcss = () => {
+  let postcssLoader = false
+  try {
+    if (require.resolve('postcss-loader')) {
+      postcssLoader = {
+        loader: require.resolve('postcss-loader'),
         options: { sourceMap: true }
-      }))
-
-    const use = [
-      { loader: require('mini-css-extract-plugin').loader },
-      {
-        loader: require.resolve('css-loader'),
-        options: {
-          sourceMap: true,
-          importLoaders: 2
-        }
-      },
-      tryPostcss(),
-      ...preprocessors
-    ].filter(Boolean)
-
-    return {
-      test,
-      use
+      }
     }
+  } catch (e) {
+    /* Work out what to print here */
   }
 
-  return null
+  return postcssLoader
+}
+
+const getStyleRule = (test, preprocessors = []) => {
+  const use = [
+    { loader: MiniCssExtractPlugin.loader },
+    {
+      loader: require.resolve('css-loader'),
+      options: {
+        sourceMap: true,
+        importLoaders: 2
+      }
+    },
+    tryPostcss(),
+    ...preprocessors
+  ].filter(Boolean)
+
+  return {
+    test,
+    use
+  }
 }
 
 module.exports = getStyleRule