使用webpack搭建vue项目实现脚手架功能
本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能
对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思维在调试的时候显得尤为重要,拥有良好的编程习惯和思维能力可以大幅度提高调试效率。而编程思维的培养往往需要经验的积累,只有把底层原理一遍遍地思考之后,才会有更深入的理解,这也是vue官方文档中不建议vue初学者直接使用vue-cli的原因之一。
所以今天特意一步步通过webpack配置,实现与vue-cli相同的效果,希望大家能有所收获。
1.创建一个vue项目
使用命令行mkdirvuedeom或者直接新建一个vuedemo空文件夹,然后命令行cdvuedemo,使用npminit-y初始化,此时你会看到文件夹多了一个package.json的文件,内容大致如下:
{ "name":"vuedemo", "version":"1.0.0", "description":"", "main":"index.js", "scripts":{ "test":"echo\"Error:notestspecified\"&&exit1" }, "keywords":[], "author":"", "license":"ISC" }
2.引入webpack
通过npm加载webpack,当然如果速度慢的话你也可以使用淘宝镜像,npminstall-gcnpm–registry=https://registry.npm.taobao.org,然后输入命令:cnpminstallwebpack--save-dev
接下来我们在项目根目录创建一个src文件,有一个main.js,再创建一个webpack.config.js,最后修改package.json的脚本:
constpath=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"//当使用npmrunbuild的时候就会执行webpack,按照提示安装webpack-cli }, "keywords":[], "author":"", "license":"ISC" }
3.babel编译
虽然ES6语法已经广泛普及,但各个浏览器还不是特别兼容,为了避免出错我们需要把ES6转成ES5,使用babel进行编译
npminstall--save-devbabel-corebabel-loader
加载完成之后,在webpack.config.js配置
constpath=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:Cannotfindmodule'@babel/core'
babel-loader@8requiresBabel7.x(thepackage'@babel/core').Ifyou'dliketouseBabel6.x('babel-core'),youshouldinstall'babel-loader@7'.
这是因为版本之间的不兼容,按照上面的要求,你可以安装低版本的babel-loader@7
也有可能webpack会发出这样的警告:
WARNINGinconfiguration
The'mode'optionhasnotbeenset,webpackwillfallbackto'production'forthisvalue.Set'mode'optionto'development'or'production'toenabledefaultsforeachenvironment.
你需要给脚本配置一个环境,一般build我们会用生产环境webpack--modeproduction,而dev会使用生产环境webpack--modedevelopment(这个下面会讲)
另外,有时候我们可能会遇到不能识别webpack命令,原因未知,不过重新安装一次就可以了...
接下来需要让babel-loader翻译官具有翻译的功能:
npminstallbabel-preset-es2015--save-dev
并且新建一个.babelrc的文件,里面新建
{"presets":["es2015"]}
如果需要转译ES7语法,你还需要安装
npminstallbabel-preset-stage-0--save-dev
同样在.babelrc添加
{ "presets":["es2015"."stage-0"] }
每次修改配置之后都要重新编译:npmrunbuild
4.解析样式
上面我们实现了vue引入和es6以及es7语法转译,现在我们来解析样式,需要安装两个包
npminstallcss-loaderstyle-loader--save-dev
css-loader将css解析成模块,style-loader将解析的内容插入到style标签内
别忘了在配置里webpack.config.json添加规则
rules:[{test:/\.css$/,use:['style-loader','css-loader']}]
但是大多数时候,我们在vue中会使用样式预处理语言,比如sass、less、stylus,同样地我们需要安装对应的包,添加对应的规则
npminstalllessless-loader--save-dev rules:[{test:/\.less$/,use:['style-loader','css-loader','less-loader']}]
5.解析图片
图片是大多数项目不可获取的部分,怎样解析图片呢?和解析样式步骤差不多,我们需要先安装包再添加规则
npminstallfile-loaderurl-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目录下
npminstallhtml-webpack-plugin--save-dev
在webpack.config.js引入这个插件
letHtmlWebpackPlugin=require('html-webpack-plugin') module.exports={ ....省略 plugins:[newHtmlWebpackPlugin({//自动插入到dist目录中 template:'./index.html'//使用模板 filename:'login.html'//产出名称(一般不写) })] }
build之后你就可以看到dis下有一个index.html文件
7.开发环境
一个项目创建分为开发环境和生产环境(上线),那么在开发的时候每次都需要build很不方便,而且build之后相当于最终的代码,不能随意更改,我们需要把这些内容都放到内存中,通过npmrundev打开
npminstallwebpack-dev-server--save-dev
这里边内置了服务,可以帮我们启动一个端口号,当代码更新时,自动在内存中打包,代码有变化就重新执行
并且在package.json添加一个新脚本:"dev":"webpack-dev-server--modedevelopment"
一般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[Vuewarn]:Youareusingtheruntime-onlybuildofVuewherethetemplatecompilerisnotavailable.Eitherpre-compilethetemplatesintorenderfunctions,orusethecompiler-includedbuild.
这是因为默认的vue引用的是vue.runtime.common.js,不能编译模板,你可以在引入vue的时候直接importVuefrom'vue/dist/vue'
另外一种办法是,你可以使用render函数,注意render()要有返回值
但是不管是改变vue引用js还是使用render函数都是不方便的,我们更希望页面组件能以.vue文件加载到html文件中
我们可以通过安装vue-loader(解析.vue文件)和vue-template-compiler(解析template模板)实现
npminstallvue-loadervue-template-compiler--save-dev
之后我们在main.js引入App.vue模块,然后在render()引用:render:(h)=>h(App)
最后
到这里我们就实现了和vue-cli初始化出来的vue项目一样的效果,其实整个过程并不算太难,不过一步步实现还是很有帮助,vue初学者可以动手试试。当然,文章可能会有我疏忽的地方,有问题随时联系我呀~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。