2020-01-21 webpack-2

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就跑起来了。