我們?cè)陂_(kāi)發(fā)的時(shí)候，如果只是進(jìn)行簡(jiǎn)單的配置，那么我們每一次修改代碼，都要手動(dòng)的進(jìn)行打包，然后手動(dòng)的刷新瀏覽器，這樣的話，開(kāi)發(fā)的效率會(huì)很低，所以我們這個(gè)時(shí)候就要想webpack是否可以為我們提供一種方式讓webpack幫助我們完成上面的操作，而不是依靠手動(dòng)進(jìn)行處理。

監(jiān)聽(tīng)的方法

在package.json進(jìn)行相關(guān)的配置：

  "scripts": {
    "watch": "webpack --watch",
  },

進(jìn)行上面的配置后后，執(zhí)行命令npm run watch我們就會(huì)直接監(jiān)聽(tīng)源代碼，當(dāng)源代碼發(fā)生改變，會(huì)自動(dòng)為我們重新打包。

webpack-dev-server

我們有的時(shí)候期望，我們不僅僅可以直接監(jiān)聽(tīng)變化的時(shí)候進(jìn)行重新打包，并創(chuàng)建一個(gè)服務(wù)，在瀏覽器上的表現(xiàn)是自動(dòng)刷新瀏覽器。

module.exports = {
  mode: 'development',
  devtool: 'chep-module-eval-source-map',
  devServer: {
    contentBase: './dist',
    open: true, // 會(huì)自動(dòng)打開(kāi)一個(gè)瀏覽器
    proxy: 8000
  },
}

在package.json進(jìn)行相關(guān)的配置：

  "scripts": {
     "start": "webpack-dev-server",
  },

我們?yōu)槭裁匆獎(jiǎng)?chuàng)建一個(gè)服務(wù)：
因?yàn)槲覀冎苯釉诒镜赝ㄟ^(guò)文件協(xié)議的方式，是沒(méi)有辦法發(fā)送ajax的請(qǐng)求的。

自己配置node的書(shū)寫(xiě)方式，進(jìn)行其服務(wù)

在package.json進(jìn)行相關(guān)的配置：

  "scripts": {
    "server": "node server.js"
  },

我們需要先安裝一個(gè)中間件：webpack-dev-middleware
并在package.json 同級(jí)目錄中，寫(xiě)一個(gè)server.js的文件

const express = require('express');
const webpack = require('webpack'); // 引入了webpack的庫(kù)
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js'); // 引入了webpack的配置文件
const complier = webpack(config); // 使用webpack和配置文件，可以隨時(shí)的進(jìn)行代碼的編譯

// 在node中使用wenpack
const app = express();

// 只要文件發(fā)生了改變，complier就會(huì)重新進(jìn)行打包，打包后的文件放在publicPath路徑下
app.use(
  webpackDevMiddleware(complier, {
    publicPath: config.output.publicPath
  })
);

app.listen(3000, () => {
  console.log('server is running');
});