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

这是因为版本之间的不兼容，按照上面的要求，你可以安装低版本的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初学者可以动手试试。当然，文章可能会有我疏忽的地方，有问题随时联系我呀~