一、项目初始化
1.在cmd中使用md命令创建test4文件夹
2.进入test4文件夹，使用npm init，会出现package.json 文件
3.使用 npm i webpack webpack-cli -D 添加相关依赖
4.创建App.vue模板
<template>
<div>this is App</div>
</template>
<script>
export default{
name:'App'
}
</script>
5.创建测试用的html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test_webpack</title>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
二、创建Vue根实例
1 /* 创建Vue的根实例*/
2 import Vue from 'vue'
3
4 //导入App组件
5 import App from './App.vue'
6
7 new Vue({
8 el:'#app',
9 components:{
10 //组件名：组件对象(名与对象相同可只写一个)
11 App
12 },
13 template:'<App/>'
14 })
三、配置webpack
1.新建webpack.config.js(默认的webpack配置文件)，
1 //导入path模块
2 const path = require('path')
3 //导出对象
4 module.exports = {
5 //打包入口
6 entry:'./src/main.js',
7 //打包出口
8 output:{
9 filename:'bundle.js',
10 path:path.resolve(__dirname,'dist')
11 }
12 }
2.cmd中敲npx webpack，可以在当前目录下寻找node_modules中的webpack，并执行（不建议这么做）
一般是在 package.json 文件中增加build的命令，来执行webpack（"build": "webpack"）
3.但是在使用 npm run build 后会报错，提示不能打包.vue结尾的文件，这是因为webpack只能打包.js文件，因此需要导入多种不同的loader来进行打包
报错内容：
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type,
currently no loaders are configured to process this file.
See https://webpack.js.org/concepts#loaders
4.对此我参考了官方文档，需要安装 vue-loader 和 vue-template-compiler两个依赖。（https://vue-loader.vuejs.org/zh/guide/#vue-cli）
使用 npm install -D vue-loader vue-template-compiler 命令安装 —D代表开发环境
5.在安装完成后发现有一个WARN，提示vue-loader需要依赖css-loader，根据文档同样可知需要手动安装css-loader（WARN提示为npm WARN vue-loader@15.9.3 requires a peer of css-loader@* but none is installed. ）
6.npm i -D css-loader 安装css-loader
7.安装完成后，就可以在webpack.config.js中配置打包的规则。同时引入根据官方文档引入vue-loader插件（固定写法），当然还要在后面对引入的插件进行注册
//导入path模块
const path = require('path')
//引入vue-loader的插件(固定写法)
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//导出对象
module.exports = {
//打包入口
entry:'./src/main.js',
//打包出口
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
//配置打包规则
module:{
rules:[{
//test需要正则表达式，匹配以.vue结尾的文件
//当打包以.vue结尾的文件时，使用vue-loader插件
test:/\.vue$/,
loader:'vue-loader'
}]
}，
//插件注册
plugins:[
new VueLoaderPlugin()
]
}
8.至此，运行npm run build 可以在生成的dist文件夹中看到bundle.js
9.但是在将bundle.js引入到随便创建的一个html文件中测试时，会出现报错
vue.runtime.esm.js:623
[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. (found in <Root>)
其出现的主要原因在于Vue在打包的时候会生成三个文件：
（1）runtime only 的文件vue.common.js(仅在运行时)
（2）compiler only 的文件compiler.js（编译时的）
（3）runtime+compiler的文件vue.js
对此我们需要的是第（3）的版本，但是默认导出的是vue.common.js，所以可以在webpack中添加别名的配置
1 //导入path模块
2 const path = require('path')
3 //引入vue-loader的插件(固定写法)
4 const VueLoaderPlugin = require('vue-loader/lib/plugin')
5 //导出对象
6 module.exports = {
7 //设置模式：production（生产模式）
8 //development（开发模式）
9 mode:'development',
10 //打包入口
11 entry:'./src/main.js',
12 //打包出口
13 output:{
14 filename:'bundle.js',
15 path:path.resolve(__dirname,'dist')
16 },
17 //配置打包规则
18 module:{
19 rules:[{
20 //test需要正则表达式，匹配以.vue结尾的文件
21 test:/\.vue$/,
22 loader:'vue-loader'
23 }]
24 },
25 //插件注册
26 plugins:[
27 new VueLoaderPlugin()
28 ],
29 //resolve解决的意思
30 resolve:{
31 //指定alias别名，可以有很多别名
32 alias:{
33 //当隔壁 main.js导入import Vue from 'vue'，
34 //他的vue不再是默认的vue.common.js，
35 //而是vue/dist/vue.js里的vue.js
36 'vue' : 'vue/dist/vue.js'
37 }
38 }
39 }
这样可以在导入vue的包时，来进行人为的指定要导出一个vue.js的文件，不是加载默认的vue.common.js
可以看到打包成功
