問題
當(dāng)編寫完成代碼后，每次都要手動(dòng)重新打包運(yùn)行蝉仇。
解決方式
一、watch
執(zhí)行npm run watch命令，會(huì)監(jiān)聽源文件的改變并重新打包轿衔。
缺點(diǎn)：一是需要自己手動(dòng)刷新沉迹，二是沒有起服務(wù)，無法使用ajax請求害驹。
package.json
"scripts": {
// 使用：npm run bundle 鞭呕，執(zhí)行這句話相當(dāng)于執(zhí)行 webpack
"bundle": "webpack",
"watch": "webpack --watch"
},
二、webpack-dev-server
自動(dòng)重新打包和啟動(dòng)瀏覽器宛官，刷新頁面葫松，轉(zhuǎn)發(fā)請求等。
webpack-dev-server只是將打包結(jié)果放在內(nèi)存中底洗，并不會(huì)寫入實(shí)際的bundle.js腋么，在每次webpack-dev-server接收到請求時(shí)都只是將內(nèi)存中的打包結(jié)果返回給瀏覽器。
npm install webpack-dev-server -D
package.json
"scripts": {
// 使用：npm run bundle 亥揖，執(zhí)行這句話相當(dāng)于執(zhí)行 webpack
"bundle": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server"
},
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
devServer: {
contentBase: './dist', // 根目錄珊擂，默認(rèn)同級
open: true, // 自動(dòng)打開瀏覽器
port: 8080 // 端口號
},
output: {
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件夾
}
}
三、node server.js
自己手寫一個(gè)類似DevServer的node服務(wù)费变，也就是在node中使用webpack摧扇。
缺點(diǎn)就是完善的功能需要書寫的代碼太復(fù)雜，下面這個(gè)也是需要自己手動(dòng)刷新挚歧。
npm install express webpack-dev-middleware -D
package.json
"scripts": {
// 使用：npm run bundle 扛稽，執(zhí)行這句話相當(dāng)于執(zhí)行 webpack
"bundle": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server",
"server": "node server.js"
},
在和package.json同級的地方新建server.js文件
server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware'); // 中間件
const config = require('./webpack.config.js'); // 配置
const complier = webpack(config); // 編譯器
const app = express();
app.use(webpackDevMiddleware(complier, {}));
app.listen(3000, () => {
console.log('server is running');
});
