Webpack支持.vue文件的打包

那么我们在使用Vue.js的时候一定会涉及到去编写.vue文件，通过我们在该文件中填写的是组建。

那么Webpack本身也不支持打包.vue文件，我们同样需要借助第三方的loader来进行处理。

首先我们需要安装ES6/ES7的相关语法的打包支持，也就是Babel的支持，那么在我的另外一篇文章中有讲到，这里就不重点讲解了。

https://www.cnblogs.com/Richard-Tang/articles/9875607.html

然后我们还需要安装对Vue.js在浏览器中的支持，在我的另外一篇文章中也讲到了，这里就不重点讲解了。

https://www.cnblogs.com/Richard-Tang/articles/9876113.html

步骤：

1.通过命令安装相应的Loader　　npm i -D vue-loader css-loader vue-template-compiler vue-style-loader

2.修改webpack.config.js文件　　VueLoaderPlugin 是新版本的Webpack中要求要加的　　const VueLoaderPlugin = require('vue-loader/lib/plugin');　　module: {　　　　rules: [　　　　　　指定处理.vue文件的loader　　　　　　{test: /\.vue$/,loader: 'vue-loader',exclude: /(node_modules)/}　　　　]　  },

plugins: [ 启用插件

new VueLoaderPlugin()

　　 ]

　 3.创建一个测试的.vue文件，该文件包含如下内容

　　4.在主js文件中去引入Vue.js和.vue文件模块

　　5.通过命令去编译

那么如果编译显示上面的图中的内容，就代表整合.vue文件成功！

那么我们打开浏览器访问一下即可！

转载于:https://www.cnblogs.com/Richard-Tang/p/9881237.html

Webpack支持.vue文件的打包相关推荐

Atom 编辑器安装 linter-eslint 插件，并配置使其支持 vue 文件中的 js 格式校验
安装linter-eslint插件方式有如下几种. 1. 最简单的方式就是点击 File -Settings -Install ,搜索linter-eslint ,安装即可 2. # 进入atom ...
webstorm快捷键、支持vue文件等部分使用技巧
1.常用快捷键 shift+↑ 向上选取代码块 shift+↓ 向下选取代码块 ctrl+/ 注释/取消注释的行注释 ctrl+alt+L 格式化代码 tab,shift+tab 调整缩进 ctrl+ ...
让phpstorm 支持 vue文件并且语法高亮
1 安装 vue.js 插件很遗憾,我的win版本没有支持的插件 2 修改文件类型 vue本质上还是html文件,包含了css html js,用html类型文件打开就可以给html 文件添加 * ...
webpack配置指定文件不打包
引言在打包配置时,会有一些需求是指定某些文件夹下的某些文件指定不打包压缩的,经过学习,webpack的CopyWebpackPlugin可以帮助我们解决整个问题,下面介绍一下制定流程: 1.npm安 ...
webpack 入口文件 php,如何实现webpack多入口文件打包配置
本篇文章主要介绍了webpack多入口文件页面打包配置详解,现在分享给大家,也给大家做个参考. 大多数情况下,我们使用 webpack来打包单页应用程序,这个时候只需要配置一个入口,一个模板文件,但也 ...
webpack文件夹打包_webpack多入口文件页面打包详解
本文主要介绍了webpack多入口文件页面打包配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望帮助到大家. 大多数情况下,我们使用 webpack来打包单页应 ...
vue 分模块打包脚手架_一步步从头搭建 Vue 开发环境
前言由于是工具,很可能你看到的时候有些工具包已经升级了,会有一些报错:这个你就需要自己探索了. 工具的版本 node: v10.16.0 npm: v6.9.0 babel: 7.5.5 webpa ...
单个vue组件的打包和动态引入
目录一.原理简介二.打包过程 1. 创建一个webpack项目 2. 编写组件和打包脚本 3. 打包三.动态引入 1. 在vue项目中使用 2. 在普通项目中使用总结一.原理简介在使用we ...
webpack和vue热更新
目录 webpack一些概念介绍 webpack热更新流程 1. 启动阶段 ①->②->A->B 2. 更新阶段 ①->②->③->④ vue的组件热更新模块总结 ...
如何优雅地使用 VSCode 来编辑 vue 文件？
最近有个项目使用了 Vue.js ,本来一直使用的是 PHPStorm 来进行开发,可是遇到了很多问题. 后来,果断放弃收费的 PHPStorm ,改用 vscode (Visual Stdio Co ...

Webpack支持.vue文件的打包

Webpack支持.vue文件的打包相关推荐

最新文章

热门文章