webpack-dev-server打包并热部署

webpack-dev-server打包并热部署
1.webpack-dev-server开发服务器，它的功能可以实现热加载 并且自动刷新浏览器。
创建一个新的程序目录，并在目录下创 建src目录、dist目录。 将main.js和model01.js拷贝到src目录。
webpack-dev-server的安装与配置
使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包。
1.进到刚创建的webpacktest02的目录里面打开cmd命令行执行：
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 – save-dev
安装完成，会发现程序目录出现一个package.json文件和node_models文件夹
2.配置webpack-dev-server
在package.json中配置script：
“scripts”: { “dev”: “webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008” },
名词解释：
–inline：自动刷新
–hot：热加载
–port：指定端口
–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址
devDependencies：开发人员在开发过程中所需要的依赖。 scripts：可执行的命令
3.配置webpack.config.js
在webpacktest02目录下创建 webpack.config.js， webpack.config.js是webpack的配置文件。在此文件中可以配 置应用的入口文件、输出配置、插件等，其中要实现热加载自动刷新功能需要配置html-webpack-plugin插件。 html-webpack-plugin的作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一 个index.html文件。
配置的模板文件直接靠皮到webpack.config.js中：
var htmlwp = require(‘html‐webpack‐plugin’);
module.exports={ entry:’./src/main.js’, //指定打包的入口文件
output:{ path : __dirname+’/dist’, // 注意：__dirname表示webpack.config.js所在目录的绝对路径 filename:‘build.js’ //输出文件 },
plugins:[ new htmlwp({ title: ‘首页’, //生成的页面标题 filename: ‘index.html’, //webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这 个页面底部，才能实现自动刷新功能 template: ‘vue_02.html’ //根据index1.html这个模板来生成(这个文件请程序员自己生成) }) ] }
4.启动
启动有两种方式：
1.进入文本webpacktest02目录，执行npm run dev
2.使用webstorm直接启动：右键package.json文件，选择show npm scripts打开窗口

双击 dev。 注 意：dev就是在package.json中配置的webpack dev server命令。 发现启动成功自动打开浏览器。 修改src中的任意文件内容，自动加载并刷新浏览器。

debugger调试
1.debugger调试需要在webpack.config.js中添加一段代码：
devtool: ‘eval‐source‐map’,
2.在需要调试的js中添加debugger
3.启动应用，刷新页面，执行逻辑进行调试