Enforces require.resolve for loaders

packages/@vue/babel-preset-app/package.json

@@ -36,5 +36,8 @@
     "babel-plugin-module-resolver": "^3.2.0",
     "core-js": "^3.1.2",
     "core-js-compat": "^3.1.2"
+  },
+  "peerDependencies": {
+    "@babel/core": "*"
   }
 }

packages/@vue/cli-plugin-babel/index.js

@@ -45,7 +45,7 @@ module.exports = (api, options) => {
           })
           .end()
         .use('cache-loader')
-          .loader('cache-loader')
+          .loader(require.resolve('cache-loader'))
           .options(api.genCacheConfig('babel-loader', {
             '@babel/core': require('@babel/core/package.json').version,
             '@vue/babel-preset-app': require('@vue/babel-preset-app/package.json').version,
@@ -61,7 +61,7 @@ module.exports = (api, options) => {
     if (useThreads) {
       const threadLoaderConfig = jsRule
         .use('thread-loader')
-          .loader('thread-loader')
+          .loader(require.resolve('thread-loader'))
 
       if (typeof options.parallel === 'number') {
         threadLoaderConfig.options({ workers: options.parallel })
@@ -70,6 +70,6 @@ module.exports = (api, options) => {
 
     jsRule
       .use('babel-loader')
-        .loader('babel-loader')
+        .loader(require.resolve('babel-loader'))
   })
 }

packages/@vue/cli-plugin-babel/package.json

@@ -24,6 +24,8 @@
     "@vue/babel-preset-app": "^4.0.0-rc.0",
     "@vue/cli-shared-utils": "^4.0.0-rc.0",
     "babel-loader": "^8.0.6",
+    "cache-loader": "^2.0.1",
+    "thread-loader": "^2.1.2",
     "webpack": "^4.0.0"
   },
   "peerDependencies": {

packages/@vue/cli-plugin-eslint/index.js

@@ -45,7 +45,7 @@ module.exports = (api, options) => {
             .end()
           .test(/\.(vue|(j|t)sx?)$/)
           .use('eslint-loader')
-            .loader('eslint-loader')
+            .loader(require.resolve('eslint-loader'))
             .options({
               extensions,
               cache: true,

packages/@vue/cli-plugin-typescript/__tests__/tsPluginBabel.spec.js

@@ -16,9 +16,9 @@ test('using correct loader', () => {
   const config = service.resolveWebpackConfig()
   // eslint-disable-next-line no-shadow
   const rule = config.module.rules.find(rule => rule.test.test('foo.ts'))
-  expect(rule.use[0].loader).toMatch('cache-loader')
-  expect(rule.use[1].loader).toMatch('babel-loader')
-  expect(rule.use[2].loader).toMatch('ts-loader')
+  expect(rule.use[0].loader).toMatch(require.resolve('cache-loader'))
+  expect(rule.use[1].loader).toMatch(require.resolve('babel-loader'))
+  expect(rule.use[2].loader).toMatch(require.resolve('ts-loader'))
 })
 
 const creatorOptions = {

packages/@vue/cli-plugin-typescript/index.js

@@ -28,7 +28,7 @@ module.exports = (api, projectOptions) => {
     }
 
     addLoader({
-      loader: 'cache-loader',
+      loader: require.resolve('cache-loader'),
       options: api.genCacheConfig('ts-loader', {
         'ts-loader': require('ts-loader/package.json').version,
         'typescript': require('typescript/package.json').version,
@@ -38,7 +38,7 @@ module.exports = (api, projectOptions) => {
 
     if (useThreads) {
       addLoader({
-        loader: 'thread-loader',
+        loader: require.resolve('thread-loader'),
         options:
           typeof projectOptions.parallel === 'number'
             ? { workers: projectOptions.parallel }
@@ -48,11 +48,15 @@ module.exports = (api, projectOptions) => {
 
     if (api.hasPlugin('babel')) {
       addLoader({
-        loader: 'babel-loader'
+        // TODO: I guess the intent is to require the `babel-loader` provided by the Babel vue
+        // plugin, but that means we now rely on the hoisting. It should instead be queried
+        // against the plugin itself, or through a peer dependency.
+        // eslint-disable-next-line node/no-extraneous-require
+        loader: require.resolve('babel-loader')
       })
     }
     addLoader({
-      loader: 'ts-loader',
+      loader: require.resolve('ts-loader'),
       options: {
         transpileOnly: true,
         appendTsSuffixTo: ['\\.vue$'],
@@ -61,7 +65,7 @@ module.exports = (api, projectOptions) => {
       }
     })
     // make sure to append TSX suffix
-    tsxRule.use('ts-loader').loader('ts-loader').tap(options => {
+    tsxRule.use('ts-loader').loader(require.resolve('ts-loader')).tap(options => {
       options = Object.assign({}, options)
       delete options.appendTsSuffixTo
       options.appendTsxSuffixTo = ['\\.vue$']

packages/@vue/cli-plugin-typescript/package.json

@@ -25,8 +25,10 @@
   "dependencies": {
     "@types/webpack-env": "^1.13.9",
     "@vue/cli-shared-utils": "^4.0.0-rc.0",
+    "cache-loader": "^2.0.1",
     "fork-ts-checker-webpack-plugin": "^1.3.4",
     "globby": "^9.2.0",
+    "thread-loader": "^2.1.2",
     "ts-loader": "^6.0.1",
     "tslint": "^5.16.0",
     "webpack": "^4.0.0",

packages/@vue/cli-service/__tests__/css.spec.js

@@ -44,7 +44,10 @@ const findLoaders = (config, lang, index) => {
   if (!rule) {
     throw new Error(`rule not found for ${lang}`)
   }
-  return rule.use.map(({ loader }) => loader.replace(/-loader$/, ''))
+  return rule.use.map(({ loader }) => {
+    const match = loader.match(/([^\\/]+)-loader/)
+    return match ? match[1] : loader
+  })
 }
 
 const findOptions = (config, lang, _loader, index) => {

packages/@vue/cli-service/lib/config/base.js

@@ -79,11 +79,11 @@ module.exports = (api, options) => {
       .rule('vue')
         .test(/\.vue$/)
         .use('cache-loader')
-          .loader('cache-loader')
+          .loader(require.resolve('cache-loader'))
           .options(vueLoaderCacheConfig)
           .end()
         .use('vue-loader')
-          .loader('vue-loader')
+          .loader(require.resolve('vue-loader'))
           .options(Object.assign({
             compilerOptions: {
               whitespace: 'condense'
@@ -100,7 +100,7 @@ module.exports = (api, options) => {
       .rule('images')
         .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
         .use('url-loader')
-          .loader('url-loader')
+          .loader(require.resolve('url-loader'))
           .options(genUrlLoaderOptions('img'))
 
     // do not base64-inline SVGs.
@@ -109,7 +109,7 @@ module.exports = (api, options) => {
       .rule('svg')
         .test(/\.(svg)(\?.*)?$/)
         .use('file-loader')
-          .loader('file-loader')
+          .loader(require.resolve('file-loader'))
           .options({
             name: genAssetSubPath('img')
           })
@@ -118,33 +118,41 @@ module.exports = (api, options) => {
       .rule('media')
         .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
         .use('url-loader')
-          .loader('url-loader')
+          .loader(require.resolve('url-loader'))
           .options(genUrlLoaderOptions('media'))
 
     webpackConfig.module
       .rule('fonts')
         .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
         .use('url-loader')
-          .loader('url-loader')
+          .loader(require.resolve('url-loader'))
           .options(genUrlLoaderOptions('fonts'))
 
     // Other common pre-processors ---------------------------------------------
 
+    const maybeResolve = name => {
+      try {
+        return require.resolve(name)
+      } catch (error) {
+        return name
+      }
+    }
+
     webpackConfig.module
       .rule('pug')
         .test(/\.pug$/)
           .oneOf('pug-vue')
             .resourceQuery(/vue/)
             .use('pug-plain-loader')
-              .loader('pug-plain-loader')
+              .loader(maybeResolve('pug-plain-loader'))
               .end()
             .end()
           .oneOf('pug-template')
             .use('raw')
-              .loader('raw-loader')
+              .loader(maybeResolve('raw-loader'))
               .end()
             .use('pug-plain-loader')
-              .loader('pug-plain-loader')
+              .loader(maybeResolve('pug-plain-loader'))
               .end()
             .end()
 

packages/@vue/cli-service/lib/config/css.js

@@ -113,7 +113,7 @@ module.exports = (api, rootOptions) => {
         } else {
           rule
             .use('vue-style-loader')
-            .loader('vue-style-loader')
+            .loader(require.resolve('vue-style-loader'))
             .options({
               sourceMap,
               shadowMode
@@ -140,13 +140,13 @@ module.exports = (api, rootOptions) => {
 
         rule
           .use('css-loader')
-          .loader('css-loader')
+          .loader(require.resolve('css-loader'))
           .options(cssLoaderOptions)
 
         if (needInlineMinification) {
           rule
             .use('cssnano')
-            .loader('postcss-loader')
+            .loader(require.resolve('postcss-loader'))
             .options({
               sourceMap,
               plugins: [require('cssnano')(cssnanoOptions)]
@@ -156,14 +156,21 @@ module.exports = (api, rootOptions) => {
         if (hasPostCSSConfig) {
           rule
             .use('postcss-loader')
-            .loader('postcss-loader')
+            .loader(require.resolve('postcss-loader'))
             .options(Object.assign({ sourceMap }, loaderOptions.postcss))
         }
 
         if (loader) {
+          let resolvedLoader
+          try {
+            resolvedLoader = require.resolve(loader)
+          } catch (error) {
+            resolvedLoader = loader
+          }
+
           rule
             .use(loader)
-            .loader(loader)
+            .loader(resolvedLoader)
             .options(Object.assign({ sourceMap }, options))
         }
       }

packages/@vue/cli-service/package.json

@@ -73,15 +73,38 @@
     "thread-loader": "^2.1.2",
     "url-loader": "^2.1.0",
     "vue-loader": "^15.7.0",
+    "vue-style-loader": "^4.1.0",
     "webpack": "^4.0.0",
     "webpack-bundle-analyzer": "^3.3.2",
     "webpack-chain": "^6.0.0",
     "webpack-dev-server": "^3.4.1",
     "webpack-merge": "^4.2.1"
   },
   "peerDependencies": {
+    "less-loader": "*",
+    "pug-plain-loader": "*",
+    "raw-loader": "*",
+    "sass-loader": "*",
+    "stylus-loader": "*",
     "vue-template-compiler": "^2.0.0"
   },
+  "peerDependenciesMeta": {
+    "less-loader": {
+      "optional": true
+    },
+    "pug-plain-loader": {
+      "optional": true
+    },
+    "raw-loader": {
+      "optional": true
+    },
+    "sass-loader": {
+      "optional": true
+    },
+    "stylus-loader": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "fibers": ">= 3.1.1 <5.0.0",
     "sass": "^1.19.0",

packages/@vue/cli-ui/index.js

@@ -23,7 +23,7 @@ exports.clientAddonConfig = function ({ id, port = 8042 }) {
         .rule('gql')
         .test(/\.(gql|graphql)$/)
         .use('gql-loader')
-        .loader('graphql-tag/loader')
+        .loader(require.resolve('graphql-tag/loader'))
         .end()
     },
     devServer: {

yarn.lock

@@ -4224,6 +4224,17 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
+cache-loader@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/cache-loader/-/cache-loader-2.0.1.tgz#5758f41a62d7c23941e3c3c7016e6faeb03acb07"
+  integrity sha512-V99T3FOynmGx26Zom+JrVBytLBsmUCzVG2/4NnUKgvXN4bEV42R1ERl1IyiH/cvFIDA1Ytq2lPZ9tXDSahcQpQ==
+  dependencies:
+    loader-utils "^1.1.0"
+    mkdirp "^0.5.1"
+    neo-async "^2.6.0"
+    normalize-path "^3.0.0"
+    schema-utils "^1.0.0"
+
 cache-loader@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/cache-loader/-/cache-loader-3.0.1.tgz#cee6cf4b3cdc7c610905b26bad6c2fc439c821af"