vue-loader

Features

• New option threadMode: set this to true enables fs-based options sharing. Only needed when using with HappyPack or thread-loader.
• New option postcss.cascade: setting this to true allows using cascading postcss config files. (#1147) (dddd911), closes #1063
• use more sensible default localIdentName for css modules (now [local]_[hash:base64:8]) (084bf3d)

Bug Fixes

• Removed use of this._compilation, fixing #1160 and compat with HappyPack / thread-loader
• get transformToRequire from vueOptions instead of options for template-compiler (#1175) (8b912ad)
• removed module id for non-scoped component (#1146) (0b36a2c), closes #853
• avoid adding index to css modules in first tag (2c8d1fb), closes #703 #818

• Adjust web component style injection strategy
• Improve tree shaking

Features

• Support for @vue/cli web component mode

Breaking

• No longer works with webpack 1.
• esModules option has been removed. Built module is now always exposed as an ES module.
• Inject mode has been removed since it does not work with ES modules.

• Template URL handling: static URLs that start with @ are now also transformed into module requests. The documentation has also been updated with more details on the transform rules.

• The source map cache busting feature is now removed, as it no longer makes any difference w/ webpack 3 and latest Chrome. The related option is also removed. To get correct source map after a hot-reload, you need to refresh your devtools by pressing cmd/ctrl + R when in devtools.

• Fixed source map line being off by 1 line

Bug Fixes

• More descriptive error message when failed loading PostCSS config file

• Improve template compiler asset URL transform defaults. Now the default transformed tag/attr pairs are:

  {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
  

Features

• support named exports inside <script> blocks (#1087) (2e2aa2b), closes #1080

• allow disabling auto postcss config loading via postcss.useConfigFile (e27a5ce), closes #654 #800

• normalize default loader for commonly known postcss langs (#1055) (81a59ba), closes #942 #800 #654

Bug Fixes

• animation value replacement (#1058) (6d3c5b2)
• avoid hash collision in prod by including both filepath and content (#1086) (b526349)
• handle default export in custom blocks (#1081) (7459a87)
• more robust handling for parsing 'srcset' attribute value (#1057) (ddcea20), closes #1052 #1052
• only generate CSS source map when needed (1809031), closes #1070

New

• Allow explicitly disable hot reload via hotReload loader option (@gejgalis via #1036)

Fixed

• Fix CSS scoping of multiple animations (@Damell via #1030)

New

• In production mode, Scoped IDs are now generated using file content to ensure consistency when distributing built files. Note in dev mode, scope IDs are still generated using file paths because that is required to ensure consistent file requests across edits in order to support hot-reload.

• transformToRequire option now support wildcard tags (e.g. { '*': 'src' })

Fixed

• Fixed srcset transforms for absolute URLs (#1005)
• Fix /deep/ CSS transform when used at the start of a selector (#1035)

New

• Scoped CSS support for functional components (requires Vue runtime >= 2.5.0)
• Hot-reload support for functional components

New Features

• Support transforming srcset to require calls. (#953)

• Add cacheBusting option to allow turning off cache busting for source maps. (#987)

• Adjusted PostCSS configuration API:

postcss.config

• type: Object

• default: undefined

  This field allows customizing PostCSS config in the same way as postcss-loader.

  • postcss.config.path

    Specify a path (file or directory) to load the PostCSS config file from.

    postcss: {
      config: {
        path: path.resolve('./src')
      }
    }
    

  • postcss.config.ctx

    Provide context to PostCSS plugins. See postcss-loader docs for more details.

Fixed

• #932
• #939

• Support for compiling templates for functional components. This feature requires vue and vue-template-compiler >= 2.5.0.

  To denote a template that should be compiled as a functional component, add the functional attribute to the template block. Also, props need to be accessed as props.xxx.

  <template functional>
    <div>{{ props.foo }}</div>
  </template>
  

• Fix scoped style attribute not being applied with 2.4 ssr optimization

• Fix scoped style attribute not being applied with 2.4 ssr optimization

• Fixed template HMR regression in 13.0.0

New

• Now uses ES modules internally to take advantage of webpack 3 scope hoisting. This should result in smaller bundle sizes.

• Now uses PostCSS@6.

Breaking Changes

• The esModule option is now true by default, because this is necessary for ES-module-based scope hoisting to work. This means the export from a *.vue file is now an ES module by default, so async components via dynamic import like this will break:

  const Foo = () => import('./Foo.vue')
  

  Note: the above can continue to work with Vue 2.4 + vue-router 2.7, which will automatically resolve ES modules' default exports when dealing with async components. In earlier versions of Vue and vue-router you will have to do this:

  const Foo = () => import('./Foo.vue').then(m => m.default)
  

  Alternatively, you can turn off the new behavior by explicitly using esModule: false in vue-loader options.

  ---

  Similarly, old CommonJS-style requires will also need to be updated:

  // before
  const Foo = require('./Foo.vue')
  
  // after
  const Foo = require('./Foo.vue').default
  

• PostCSS 6 might break old PostCSS plugins that haven't been updated to work with it yet.

• added /deep/ as an alias for >>> as the latter is not recognized as a valid combinator by SASS.

• <style scoped> now support "deep" selectors that can affect child components using the >>> combinator:

  .foo >>> .bar { color: red; }
  

  will be compiled into:

  .foo[data-v-xxxxxxx] .bar { color: red; }
  

• keyframes inside <style scoped> will now become scoped.

  @keyframes foo { ... }
  .animated { animation: foo 1s; }
  

  will be compiled into

  @keyframes foo-data-v-xxxxxxx { ... }
  .animated { animation: foo-data-v-xxxxxxx 1s; }
  

  Note: this only works if the keyframes declaration and the animation rules are inside the same <style> block.

• Allow explicitly turning off 2.4 SSR optimization with new option optimizeSSR: false. This might be necessary for some testing scenarios.