提升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

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章