提升webpack效率

1. webpack --watch

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

在webpack後添加--watch

npm run build 的時候就可以實時監聽改動，自動打包,刷新瀏覽器就可以看到改變

2. webpack-dev-server

之前寫過就不寫啦~ 優點：監聽改動，自動打包，自動刷新瀏覽器頁面

3. 自己寫一個服務器（瞭解）

"scripts": {
    "build": "webpack --watch",
    "dev": "webpack-dev-server",
    "middleware": "node server.js"
  }

npm run middleware 執行 server.js，藉助koa、wepack-dev-middleware

const Koa = require('koa')
const webpack = require('webpack')
const webpackDevMiddleWare = require('webpack-dev-middleware')
const config = require('./webpack.config.js') // 引入配置文件
const complier = webpack(config)
const app = new Koa()
app.use(webpackDevMiddleWare(complier, {
  publicPath: config.output.publicPath
}))
app.listen('8000', () => {
  console.log('server is running at 8000')
})

在node中直接使用webpack