plugin 插件,对现有的框架进行扩充
1.htmlWebpackPlugin插件打包index.html
npm install html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
template:'index.html'
})
],
webpack-dev-server搭建本地服务器。
webpack提供了一个本地开发服务器,基于node.js搭建,内部使用express框架,可以监听修改后的代码,让浏览器自动刷新显示。
需要先安装 npm install --save-dev webpack-dev-sever。
config配置
devSever:{
contentBase:'./dist', //内容路径
inline:ture //是否实时监听
}
package.json配置
script:{
"dev":"webpack-dev-sever",
}
配置文件的分离。base和dev,production分开
三、vue脚手架的使用
vue解析过程
tmplate->ast(抽象语法树)->render(编译成render函数)->virtual dom(虚拟dom树)->真实dom
runtime-only直接从render函数往后进行
new vue({
el:"#app",
render:function(creatElement){
return creatElement(app)
}
})
new vue({
el:"#app",
render:function(h){
return h(app)
}
})
runtime-only版本.vue文件中的template是由vue-template-compiler解析成render函数了。
cli3。
移除了static,增加了public文件夹,也是不压缩直接原封不动
vue create project。
建好项目 npm run serve就跑起来了。