webpack4之webpackDevServe配置

发表于 | 分类于


watch

监听代码改动就自动执行打包，不能自动打开浏览器,不能自动刷新

配置
1
2
3
4
// package.json
"scripts": {
    "watch": "webpack --watch"
  },

webpack-dev-server

监听代码改动会自动打包，会启动一个http服务器，自动刷新浏览器，还可以设置自动打开浏览器，跨域代理

配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#npm i -D webpack-dev-server

// package.json
"scripts": {
    "watch": "webpack-dev-server"
  },

// webpack.config.js
module.exports = {
  devServer: {
    historyApiFallback: true, // 处理单页面项目，比如http://localhost:3000/home.html和http://localhost:3000/list.html，默认都请求http://localhost:3000/index.html
    contentBase: './sef', // 监听打包的文件夹
    proxy: {
      '/api': 'http://localhost:3000', // 代理
      '/react/api': {
        tartget: 'http://www.dell-lee.com', // /react/api代理到http://www.dell-lee.com
        secure: false, //设置了可以请求https的地址
        pathRewrite: {
          'header.json': 'demo.json' // 如果拿header.json的数据，其实我是拿demo.json的数据。当header.json的数据还没好，要先请求demo.json的数据
        },
        changeOrigin: true // 防止外部爬虫获取数据
      }
    },
    open: true,
    port: 8081
  }
}

自己创建服务器监听

早期webpack-dev-server没有成熟，就自己搭建服务器进行监听

配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#npm i -D express webpack-dev-middleware

// webpack.config.js
output: {
  publicPath: '/', // 统一文件前加/
}

// package.json
"scripts": {
    "middleware": "node server.js"
  },

// server.js
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const config = require('./webpack.config.js')
// 在node中运行webpack
const complier = webpack(config) // 根据config配置文件可以对代码进行编译,执行一次complier，就重新打包一下代码

const app = express()

app.use(webpackDevMiddleware(complier, { // webpack-dev-middleware监听代码的变化，假如变化了就会重新打包
  publicPath: config.output.publicPath
}))

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

热模块更新

有时候修改了样式，webpack-dev-server监听到代码更改，但不要重新刷新页面

配置
1
2
3
4
5
6
7
8
9
10
11
12
13
// webpack.config.js
module.exports = {
  devServer: {
    contentBase: './sef',
    proxy: {
      '/api': 'http://localhost:3000'
    },
    open: true,
    port: 8081,
    hot: true, // 表示开启hot module功能
    hotOnly: true // 表示不刷新页面
  }
}
如何让修改了js代码，html页面也跟着改变
1
2
3
4
5
6
7
8
// index.js
import './index.css'
import './index1'

// 写监听代码模块，css不需要写是因为css-loader自动帮我们写了
if (module.hot) {
  module.hot.accept('./index1')
}

http-server

给打包后的文件夹生成一个http服务器

配置
1
2
3
4
5
6
7
8
9
10
11
12
# npm i -D http-server

// package.json
{
  "name": "ethan-methods",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/library.js",
  "scripts": {
    "start": "http-server dist" // 在打包文件dist的文件下开启一个http服务器
  }
}