refactor: webpack 4 compat + improve test setup

Author: yyx990803

lib/loader.js

@@ -53,28 +53,20 @@ module.exports = function (content) {
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
 
   const loaderContext = this
-  const query = loaderUtils.getOptions(this) || {}
-  const options = Object.assign(
-    {
-      esModule: true
-    },
-    this.options.vue,
-    this.vue,
-    query
-  )
+  const options = Object.assign({ esModule: true }, loaderUtils.getOptions(this))
 
   // shadow mode is an internal option
   // enabled via vue-cli's --target web-component
   const isShadowMode = !!options.shadowMode
 
   // disable esModule in inject mode
   // because import/export must be top-level
-  if (query.inject) {
+  if (options.inject) {
     options.esModule = false
   }
 
-  // #824 avoid multiple webpack runs complaining about unknown option
-  Object.defineProperty(this.options, '__vueOptions__', {
+  // share options between the main loader of style/template loaders
+  Object.defineProperty(this._compilation, '__vueOptions__', {
     value: options,
     enumerable: false,
     configurable: true
@@ -85,8 +77,8 @@ module.exports = function (content) {
   const fileName = path.basename(filePath)
 
   const context =
-    (this._compiler && this._compiler.context) ||
-    this.options.context ||
+    this.rootContext ||
+    (this.options && this.options.context) ||
     process.cwd()
   const sourceRoot = path.dirname(path.relative(context, filePath))
   const shortFilePath = path.relative(context, filePath).replace(/^(\.\.[\\\/])+/, '')
@@ -135,14 +127,7 @@ module.exports = function (content) {
       id: moduleId,
       hasScoped,
       hasComment,
-      transformToRequire: options.transformToRequire,
-      preserveWhitespace: options.preserveWhitespace,
-      buble: bubleTemplateOptions,
-      // only pass compilerModules if it's a path string
-      compilerModules:
-        typeof options.compilerModules === 'string'
-          ? options.compilerModules
-          : undefined
+      buble: bubleTemplateOptions
     })
 
   const defaultLoaders = {
@@ -300,7 +285,7 @@ module.exports = function (content) {
         '\n'
     }
     // inject loader interop
-    if (query.inject) {
+    if (options.inject) {
       output += '__vue_script__ = __vue_script__(injections)\n'
     }
   } else {
@@ -423,7 +408,7 @@ module.exports = function (content) {
     output += '\n'
   }
 
-  if (!query.inject) {
+  if (!options.inject) {
     // hot reload
     if (needsHotReload) {
       output +=
@@ -615,7 +600,7 @@ module.exports = function (content) {
           vue: true,
           id: moduleId,
           scoped: !!scoped,
-          hasInlineConfig: !!query.postcss
+          sourceMap: cssSourceMap
         }) +
         '!'
       // normalize scss/sass/postcss if no specific loaders have been provided
@@ -636,7 +621,7 @@ module.exports = function (content) {
         : loaders[lang]
 
     const injectString =
-      type === 'script' && query.inject ? 'inject-loader!' : ''
+      type === 'script' && options.inject ? 'inject-loader!' : ''
 
     if (loader != null) {
       if (Array.isArray(loader)) {

lib/style-compiler/index.js

@@ -8,24 +8,10 @@ const scopeId = require('./plugins/scope-id')
 module.exports = function (css, map) {
   this.cacheable()
   const cb = this.async()
+  const loaderOptions = loaderUtils.getOptions(this) || {}
+  const inlineConfig = (this._compilation.__vueOptions__ || {}).postcss
 
-  const query = loaderUtils.getOptions(this) || {}
-  let vueOptions = this.options.__vueOptions__
-
-  if (!vueOptions) {
-    if (query.hasInlineConfig) {
-      this.emitError(
-        `\n  [vue-loader] It seems you are using HappyPack with inline postcss ` +
-          `options for vue-loader. This is not supported because loaders running ` +
-          `in different threads cannot share non-serializable options. ` +
-          `It is recommended to use a postcss config file instead.\n` +
-          `\n  See http://vue-loader.vuejs.org/en/features/postcss.html#using-a-config-file for more details.\n`
-      )
-    }
-    vueOptions = Object.assign({}, this.options.vue, this.vue)
-  }
-
-  loadPostcssConfig(this, vueOptions.postcss)
+  loadPostcssConfig(this, inlineConfig)
     .then(config => {
       const plugins = config.plugins.concat(trim)
       const options = Object.assign(
@@ -38,18 +24,12 @@ module.exports = function (css, map) {
       )
 
       // add plugin for vue-loader scoped css rewrite
-      if (query.scoped) {
-        plugins.push(scopeId({ id: query.id }))
+      if (loaderOptions.scoped) {
+        plugins.push(scopeId({ id: loaderOptions.id }))
       }
 
       // source map
-      if (
-        this.sourceMap &&
-        !this.minimize &&
-        vueOptions.cssSourceMap !== false &&
-        process.env.NODE_ENV !== 'production' &&
-        !options.map
-      ) {
+      if (loaderOptions.sourceMap && !options.map) {
         options.map = {
           inline: false,
           annotation: false,

lib/style-compiler/load-postcss-config.js

@@ -26,9 +26,7 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
       if (err.message.indexOf('No PostCSS Config found') >= 0) {
         return
       }
-      const friendlyErr = new Error(`Error loading PostCSS config: ${err.message}`)
-      Error.captureStackTrace(friendlyErr, err)
-      loaderContext.emitError(friendlyErr)
+      loaderContext.emitWarning(`Error loading PostCSS config: ${err.message}`)
     })
   }
 

lib/template-compiler/index.js

@@ -11,22 +11,15 @@ module.exports = function (html) {
   this.cacheable()
   const isServer = this.target === 'node'
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
-  const vueOptions = this.options.__vueOptions__ || {}
+  const vueOptions = this._compilation.__vueOptions__ || {}
   const options = loaderUtils.getOptions(this) || {}
   const needsHotReload = !isServer && !isProduction && vueOptions.hotReload !== false
   const defaultModules = [transformRequire(options.transformToRequire), transformSrcset()]
-  let userModules = vueOptions.compilerModules || options.compilerModules
-
-  // for HappyPack cross-process use cases
-  if (typeof userModules === 'string') {
-    userModules = require(userModules)
-  }
 
   const compilerOptions = {
-    preserveWhitespace: options.preserveWhitespace,
-    modules: defaultModules.concat(userModules || []),
-    directives:
-      vueOptions.compilerDirectives || options.compilerDirectives || {},
+    preserveWhitespace: vueOptions.preserveWhitespace,
+    modules: defaultModules.concat(vueOptions.compilerModules || []),
+    directives: vueOptions.compilerDirectives || {},
     scopeId: options.hasScoped ? options.id : null,
     comments: options.hasComment
   }

lib/template-compiler/preprocessor.js

@@ -20,8 +20,8 @@ module.exports = function (content) {
   }
 
   // allow passing options to the template preprocessor via `template` option
-  if (this.options.__vueOptions__) {
-    Object.assign(opt, this.options.__vueOptions__.template)
+  if (this._compilation.__vueOptions__) {
+    Object.assign(opt, this._compilation.__vueOptions__.template)
   }
 
   // for relative includes

package.json

@@ -70,13 +70,11 @@
     "css-loader": "^0.28.4",
     "eslint": "^3.19.0",
     "eslint-plugin-vue-libs": "^1.2.0",
-    "expose-loader": "^0.7.1",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.5",
     "gitbook-plugin-edit-link": "^2.0.2",
     "gitbook-plugin-github": "^3.0.0",
     "gitbook-plugin-theme-vuejs": "^1.1.0",
-    "yorkie": "^1.0.3",
     "inject-loader": "^3.0.1",
     "js-yaml": "^3.9.1",
     "jsdom": "^9.2.1",
@@ -98,6 +96,8 @@
     "vue": "^2.5.0",
     "vue-server-renderer": "^2.5.0",
     "vue-template-compiler": "^2.5.0",
-    "webpack": "^3.7.1"
+    "webpack": "^3.0.0",
+    "webpack-merge": "^4.1.1",
+    "yorkie": "^1.0.3"
   }
 }

test/fixtures/entry.js

@@ -0,0 +1,7 @@
+const Component = require('~target')
+
+if (typeof window !== 'undefined') {
+  window.vueModule = Component
+}
+
+module.exports = Component