之前的章节我们修改了展示的内容后，都需要重新的打包，编译。所以我们这节课做一下优化，当内容修改时，只需刷新页面即可。
1.在package.json中添加打包监听：
{
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"css-loader": "^3.2.0",
"style-loader": "^1.0.0"
},
"devDependencies": {
"jquery": "^3.4.1",
"webpack-dev-server": "^2.9.7"
},
"scripts": {
"start": "webpack-dev-server --entry ./src/js/main.js --output-filename ./dist/bundle.js",
"build": "webpack --watch" 说明：在这里添加监听
},
"author": "",
"license": "ISC"
}
2.我们启动两个终端，在第一个上面运行打包命令：
图1：打包监听
在另一个终端运行npm run start,在服务器上运行项目，浏览器运行结果：
图2：运行结果
3.下面我们直接修改一个main.js内容，保存后直接刷新页面，看内容是否有变化：
require('../css/style.css')
var tryStr = require('./subMethod.js')
var $ = require('jquery') //直接引用jquery并赋值给$(jquery的标志符号，你也可以自己命名一个)
document.write(tryStr())
// 调用jquery方法,，进行内容，样式的更改
$('body').html('这是变化后的内容').css({'background-color':'#134568'})
图3：运行结果
同时，你可以看一下，第一个终端上的内容有变化，它自动的进行了打包：
图4：监听改变后的自动打包
4.最后再说一下，如果我们不想用8080端口，使用9000，那么需要在配置文件中进行端口的配置：
module.exports = {
entry: './src/js/main.js', //打包的入口文件
output: {
path: __dirname + '/dist', //打包后输出的文件夹路径
filename: 'bundle.js' //打包的后生成的文件名
},
// 模块加载
module: {
loaders: [
{
test:/\.css$/, //识别所有的.css文件
loader: 'style-loader!css-loader' //凡是.css文件，自动加载loader内容的加载器
}
]
},
devServer: {
port: 9000
}
}
配置好后，重新进行npm run start，此时项目将运行在 http://localhost:9000/中，打开浏览器检测是否成功：
图5：端口号改变后的结果
至此，webpack一些基本的东西都已经学习了，感兴趣的可以继续深入的学习，大家一起进步啊！！！
