使用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初学者可以动手试试。当然，文章可能会有我疏忽的地方，有问题随时联系我呀~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。