之前的章節(jié)我們修改了展示的內(nèi)容后发乔，都需要重新的打包，編譯雪猪。所以我們這節(jié)課做一下優(yōu)化栏尚，當(dāng)內(nèi)容修改時(shí)，只需刷新頁面即可只恨。
1.在package.json中添加打包監(jiān)聽：
{
"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" 說明：在這里添加監(jiān)聽
},
"author": "",
"license": "ISC"
}
2.我們啟動兩個(gè)終端译仗，在第一個(gè)上面運(yùn)行打包命令：
圖1：打包監(jiān)聽
在另一個(gè)終端運(yùn)行npm run start,在服務(wù)器上運(yùn)行項(xiàng)目，瀏覽器運(yùn)行結(jié)果：
圖2：運(yùn)行結(jié)果
3.下面我們直接修改一個(gè)main.js內(nèi)容坤次，保存后直接刷新頁面古劲，看內(nèi)容是否有變化：
require('../css/style.css')
var tryStr = require('./subMethod.js')
var $ = require('jquery') //直接引用jquery并賦值給$(jquery的標(biāo)志符號，你也可以自己命名一個(gè))
document.write(tryStr())
// 調(diào)用jquery方法,缰猴，進(jìn)行內(nèi)容，樣式的更改
$('body').html('這是變化后的內(nèi)容').css({'background-color':'#134568'})
圖3：運(yùn)行結(jié)果
同時(shí)疤剑，你可以看一下滑绒，第一個(gè)終端上的內(nèi)容有變化闷堡，它自動的進(jìn)行了打包：
圖4：監(jiān)聽改變后的自動打包
4.最后再說一下，如果我們不想用8080端口疑故，使用9000杠览，那么需要在配置文件中進(jìn)行端口的配置：
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內(nèi)容的加載器
}
]
},
devServer: {
port: 9000
}
}
配置好后纵势，重新進(jìn)行npm run start踱阿，此時(shí)項(xiàng)目將運(yùn)行在 http://localhost:9000/中，打開瀏覽器檢測是否成功：
圖5：端口號改變后的結(jié)果
至此钦铁，webpack一些基本的東西都已經(jīng)學(xué)習(xí)了软舌，感興趣的可以繼續(xù)深入的學(xué)習(xí)，大家一起進(jìn)步芭２堋７鸬恪！黎比！
