webpack热部署及debug

1、安装webpack-dev-server

使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包。

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

安装完成，会发现程序目录出现一个package.json文件，此文件中记录了程序的依赖。

2、配置webpack-dev-server

在package.json中配置script

--inline：自动刷新

--hot：热加载

--port：指定端口

--open：自动在默认浏览器打开

--host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

时package.json的文件内容如下：

{
  "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"
  }
}

添加可执行的命令scripts：

"scripts": { "dev": "webpack-dev-server --inline --hot --open --port 5008"

  },


2.配置webpack.confifig.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_2.html' //根据vue_2.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

运行：npm run dev

debug：
　　webpack.confifig.js中添加devtool: 'eval-source-map', //调试工具 
在需要调试出添加 debugger

var add = function (x, y) {
    debugger 
    return x+y;
}

在浏览器按 F12 执行程序当只想到add函数处的debugger时就会自动停止。

目录结构:

posted @ 2020-02-25 15:32 Angry-rookie 阅读(1151) 评论(0) 收藏举报

刷新页面返回顶部

Angry rookie

webpack热部署及debug

公告