webpack2入门程序和webpack-dev-serverd实现热加载和自动刷新

1.webpack入门程序

入门程序总结:webpack可以将js分模块开发，开发完成对各模块代码打包成一个统一的文件

1.1webpack开发过程

1.1.1)定义一个分模块的js文件

1.1.2)定义一个主模块的js文件main.js(名称任意)

1、在此文件中会引用分模块js
2、引用vue.min.js（它也一个分模块）
3、将html页面中构建vue实例的代码放在main.js中。

1.2webpack命令打包js文件

1.2.1)webpack main.js build.js ，这段指令表示将main.js打包输出为 build.js文件
执行完成，观察程序目录是否出现build.js。

1.2.2)在html中引用build.js

2.webpack-dev-server

webpack-dev-server开发服务器，它的功能可以实现热加载 并且自动刷新浏览器。

2.1webpack-dev-server的安装,下载依赖

执行以下命令:安装依赖包
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

2.2webpack-dev-server的安装,修改配置文件

在package.json中配置script
{
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

2.3创建webpack.config.js
2.3.1)配置模板文件,去除script,插件会自动引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF‐8">
    <title>hello vue</title>

</head>
<body>
<div id="app">
    <a v-bind:href="url">
        <span v-text="name"></span>
    </a>
<input type="text" v-model="num1">+
<input type="text" v-model="num2">=
    <span v-text="result"></span>
<button v-on:click="change">计算</button>
</div>
</body>
</html>

2.3.2)创建webpack.config.js 文件

//引用html-webpack-plugin插件，作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一个index.html文件。
var htmlwp = require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        path : __dirname+'/dist',  // 注意：__dirname表示webpack.config.js所在目录的绝对路径
        filename:'build.js'		   //输出文件
    },
    devtool: 'eval-source-map',
    plugins:[
        new htmlwp({
            title: '首页',  //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

2.4启动测试


2.5debug调试

2.5.1)配置文件加
devtool: 'eval-source-map',
2.5.2)js文件里面加
debugger