使用webpack搭建vue项目实现脚手架功能


Posted in Javascript onMarch 15, 2019

本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能

对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思维在调试的时候显得尤为重要,拥有良好的编程习惯和思维能力可以大幅度提高调试效率。而编程思维的培养往往需要经验的积累,只有把底层原理一遍遍地思考之后,才会有更深入的理解,这也是vue官方文档中不建议vue初学者直接使用vue-cli的原因之一。

所以今天特意一步步通过webpack配置,实现与vue-cli相同的效果,希望大家能有所收获。

1. 创建一个vue项目

使用命令行mkdir vuedeom 或者直接新建一个vuedemo空文件夹,然后命令行cd vuedemo,使用npm init -y初始化,此时你会看到文件夹多了一个package.json的文件,内容大致如下:

{
 "name": "vuedemo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

2. 引入webpack

通过npm加载webpack,当然如果速度慢的话你也可以使用淘宝镜像,npm install -g cnpm ?registry=https://registry.npm.taobao.org,然后输入命令:cnpm install webpack --save-dev

接下来我们在项目根目录创建一个src文件,有一个main.js,再创建一个webpack.config.js,最后修改package.json的脚本:

const path = require('path') //引入node内置模块path
module.exports ={
 entry:'./src/main.js',  // 入口文件,把src下的main.js编译到出口文件
 output:{     //出口文件
  path:path.resolve(__dirname,'dist'), //出口路径和目录
  filename:"demo.js"      //编译后的名称
 }
}
//package.json
{
 "name": "vuedemo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "build":"webpack" //当使用npm run build的时候就会执行webpack,按照提示安装webpack-cli
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

3. babel编译

虽然ES6语法已经广泛普及,但各个浏览器还不是特别兼容,为了避免出错我们需要把ES6转成ES5,使用babel进行编译

npm install --save-dev babel-core babel-loader

加载完成之后,在webpack.config.js配置

const path = require('path')

module.exports ={
 entry:'./src/main.js',
 output:{
  path:path.resolve(__dirname,'dist'),
  filename:"demo.js"
 },
 module:{
  rules:[ //遍历规则
   {
    test: /\.js$/, //匹配以js结尾的文件
    loader:"babel-loader", // 使用babel-loader编译
    exclude: /node_modules/ //node_module里面的内容不遍历
   }
  ]
 }
}

我测试的时候出现了这样的错误,如果有相同情况的可以参考下:

Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

这是因为版本之间的不兼容,按照上面的要求,你可以安装低版本的babel-loader@7

也有可能webpack会发出这样的警告:

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

你需要给脚本配置一个环境,一般build我们会用生产环境webpack --mode production,而dev会使用生产环境webpack --mode development (这个下面会讲)

另外,有时候我们可能会遇到不能识别webpack命令,原因未知,不过重新安装一次就可以了...

接下来需要让babel-loader翻译官具有翻译的功能:

npm install babel-preset-es2015 --save-dev

并且新建一个.babelrc的文件,里面新建

{ "presets":["es2015"] }

如果需要转译ES7语法,你还需要安装

npm install babel-preset-stage-0 --save-dev

同样在.babelrc添加

{ 
"presets":["es2015"."stage-0"]
}

每次修改配置之后都要重新编译:npm run build

4. 解析样式

上面我们实现了vue引入和es6以及es7语法转译,现在我们来解析样式,需要安装两个包

npm install css-loader style-loader --save-dev

css-loader将css解析成模块,style-loader将解析的内容插入到style标签内

别忘了在配置里webpack.config.json添加规则

rules:[{test:/\.css$/,use:['style-loader','css-loader']}]

但是大多数时候,我们在vue中会使用样式预处理语言,比如sass、less、stylus,同样地我们需要安装对应的包,添加对应的规则

npm install less less-loader --save-dev
rules:[ {test:/\.less$/,use:['style-loader','css-loader','less-loader']}]

5. 解析图片

图片是大多数项目不可获取的部分,怎样解析图片呢?和解析样式步骤差不多,我们需要先安装包再添加规则

npm install file-loader url-loader --save-dev
rules:[

{test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'},

{test:/\.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'}

]

limit表示转化base64只在8192字节一下转化,其他情况输出图片

6. 解析html

我们希望build之后能有一个html文件,能直接看到编译之后的效果

这时就需要一个插件,插件的作用是以我们自己的html为模板将打包后的结果,自动引入到html中产出到dist目录下

npm install html-webpack-plugin --save-dev

在webpack.config.js引入这个插件

let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
 ....省略
 plugins:[new HtmlWebpackPlugin({ //自动插入到dist目录中
  template:'./index.html' //使用模板
  filename:'login.html'   //产出名称(一般不写)
 })]
}

build之后你就可以看到dis下有一个index.html文件

 7. 开发环境

一个项目创建分为开发环境和生产环境(上线),那么在开发的时候每次都需要build很不方便,而且build之后相当于最终的代码,不能随意更改,我们需要把这些内容都放到内存中,通过npm run dev打开

npm install webpack-dev-server --save-dev

这里边内置了服务,可以帮我们启动一个端口号,当代码更新时,自动在内存中打包,代码有变化就重新执行

并且在package.json添加一个新脚本:"dev":"webpack-dev-server --mode development"

一般webpack-dev-server会内置一个端口,通过这个端口就能查看编译的内容了,比如我的端口号:http://localhost:8080

8. 配置vue

上面我们已经实现了基本的webpack配置,完成了html、css、less、图片、js等文件的解析,但我们最终想要的适合vue-cli一样的效果,这就要求我们还要对vue语法进行解析,如果你在main.js引入vue模块,使用vue时,你会发现控制台打印这样的错误

vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

这是因为默认的vue引用的是vue.runtime.common.js,不能编译模板,你可以在引入vue的时候直接import Vue from 'vue/dist/vue'

另外一种办法是,你可以使用render函数,注意render()要有返回值

但是不管是改变vue引用js还是使用render函数都是不方便的,我们更希望页面组件能以.vue文件加载到html文件中

我们可以通过安装vue-loader(解析.vue文件)和vue-template-compiler(解析template模板)实现

npm install vue-loader vue-template-compiler --save-dev

之后我们在main.js引入App.vue模块,然后在render()引用:render:(h)=>h(App)

最后

到这里我们就实现了和vue-cli初始化出来的vue项目一样的效果,其实整个过程并不算太难,不过一步步实现还是很有帮助,vue初学者可以动手试试。当然,文章可能会有我疏忽的地方,有问题随时联系我呀~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
微信小程序实现简单表格
Feb 14 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 #Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 #Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 #Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 #Javascript
详解React项目中碰到的IE问题
Mar 14 #Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 #Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 #Javascript
You might like
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
header导出Excel应用示例
2014/01/24 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
js调用图片隐藏&显示实现代码
2013/09/13 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python实现apahce网站日志分析示例
2014/04/02 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
介绍一下write命令
2014/08/10 面试题
Java面试笔试题大全
2016/11/23 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
烹饪自我鉴定
2014/03/01 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
财务管理制度范本
2015/08/04 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python