Enforces require.resolve for loaders

vuejs · haoqunjiang · Nov 4, 2019 · Aug 31, 2019 · Aug 31, 2019 · Aug 31, 2019
commit ecf651f71d414772de11d9acd143e07c87089ec5
diff --git a/packages/@vue/cli-plugin-babel/index.js b/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'))
   })
 }
diff --git a/packages/@vue/cli-plugin-babel/package.json b/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": {

diff --git a/packages/@vue/cli-plugin-eslint/index.js b/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,

diff --git a/packages/@vue/cli-plugin-typescript/__tests__/tsPluginBabel.spec.js b/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 = {

diff --git a/packages/@vue/cli-plugin-typescript/index.js b/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,14 @@ 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 we queried
+        // against the plugin itself, or through a peer dependency.
+        loader: require.resolve('babel-loader')
       })
     }
     addLoader({
-      loader: 'ts-loader',
+      loader: require.resolve('ts-loader'),
       options: {
         transpileOnly: true,
         appendTsSuffixTo: ['\\.vue$'],
@@ -61,7 +64,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$']

diff --git a/packages/@vue/cli-plugin-typescript/package.json b/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",

diff --git a/packages/@vue/cli-service/lib/config/base.js b/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,14 +118,14 @@ 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 ---------------------------------------------
@@ -136,15 +136,15 @@ module.exports = (api, options) => {
           .oneOf('pug-vue')
             .resourceQuery(/vue/)
             .use('pug-plain-loader')
-              .loader('pug-plain-loader')
+              .loader(require.resolve('pug-plain-loader'))
               .end()
             .end()
           .oneOf('pug-template')
             .use('raw')
-              .loader('raw-loader')
+              .loader(require.resolve('raw-loader'))
               .end()
             .use('pug-plain-loader')
-              .loader('pug-plain-loader')
+              .loader(require.resolve('pug-plain-loader'))
               .end()
             .end()
 

diff --git a/packages/@vue/cli-service/lib/config/css.js b/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,14 @@ 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) {
           rule
             .use(loader)
-            .loader(loader)
+            .loader(require.resolve(loader))
             .options(Object.assign({ sourceMap }, options))
         }
       }

diff --git a/packages/@vue/cli-service/package.json b/packages/@vue/cli-service/package.json
@@ -80,7 +80,29 @@
     "webpack-merge": "^4.2.1"
   },
   "peerDependencies": {
-    "vue-template-compiler": "^2.0.0"
+    "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",

diff --git a/packages/@vue/cli-ui/index.js b/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: {