Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用:
现在 Vue Loader v15 使用了一个不一样的策略来推导语言块使用的 loader。
拿 举例:在 v14 或更低版本中,它会尝试使用 加载这个块,并在其后面隐式地链上 和 ,这一切都使用内联的 loader 字符串。
在 v15 中, 会完成把它当作一个真实的 文件来加载。因此,为了这样处理它,你需要在你的主 webpack 配置中显式地提供一条规则:
这样做的好处是这条规则同样应用在 JavaScript 里普通的 导入中,并且你可以为这些 loader 配置任何你想要的选项。在 v14 或更低版本中,如果你想为一个推导出来的 loader 定制选项,你不得不在 Vue Loader 自己的 选项中将它重复一遍。在 v15 中你再也没有必要这么做了。
v15 也允许为 loader 使用非序列化的选项,这种选项在之前的版本中是无法使用的。
在运用于 文件的 JS 转译规则 (例如 ) 中是蛮常见的。鉴于 v15 中的推导变化,如果你导入一个 内的 Vue 单文件组件,它的 部分在转译时将会被排除在外。
为了确保 JS 的转译应用到 的 Vue 单文件组件,你需要通过使用一个排除函数将它们加入白名单:
v14 或更低版本使用 consolidate 来编译 。v15 现在取而代之的是使用 webpack loader 为它们应用预处理器。
注意有些模板的 loader 会导出一个编译好的模板函数而不是普通的 HTML,诸如 。为了向 Vue 的模板编译器传递正确的内容,你必须换用一个输出普通 HTML 的 loader。例如,为了支持 ,你可以使用 pug-plain-loader:
如果你还打算使用它在 JavaScript 中将 文件作为字符串导入,你需要在这个预处理 loader 之后链上 。注意添加 会破坏 Vue 组件内的用法,所以你需要定义两条规则,其中一条指向使用了一个 的 Vue 文件,另一条指向 (回退到) JavaScript 导入:
现在客户端的样式注入会在最前面注入所有的样式以确保开发模式和提取模式下行为的一致性。
注意它们注入的顺序是不能保证的,所以你撰写的 CSS 应该避免依赖插入的顺序。
Vue Loader v15 不再默认应用 PostCSS 变换。想要使用 PostCSS,请像配置普通 CSS 文件那样配置 。
CSS Modules 现在需要通过 选项显式地配置。 标签上的 特性仍然需要用来局部注入到组件中。
好消息是你现在可以在同一处配置 了:
如果你只想在某些 Vue 组件中使用 CSS Modules,你可以使用 规则并在 字符串中检查 字符串:
用法和你为普通 CSS 的配置一样。示例用法在 mini-css-extract-plugin:
在服务端渲染中,我们通常使用 来从服务端构建中排除 npm 依赖。如果你需要从一个 npm 依赖导入 CSS,之前的方案是使用像这样的一个白名单:
使用 v15,导入 现在会在请求的末尾追加 resourceQuery 字符串,所以你需要将上述内容更新为:
下列选项已经被废弃了,它们应该使用普通的 webpack 模块的规则来配置:
下列选项已经被废弃了,它们应该使用新的 选项来配置:
- (使用 )
- (使用 )
- (使用 )
下列选项已经被改名了:
- (现在改名为 )
版权声明:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符,请将相关资料发送至xkadmin@xkablog.com进行投诉反馈,一经查实,立即处理!
转载请注明出处,原文链接:https://www.xkablog.com/qdvuejs/45989.html