实时打包的三种方法

Webpack’s Watch Mode
webpack-dev-server，推荐，能胜任大多数情况
webpack-dev-middleware

:::warning

只有在开发时才使用自动编译工具
项目上线时都会使用 webpack 进行打包，不需要使用这些自动编译工具
自动编译工具只是为了提高开发体验 :::

第一种方法：watch 模式

开启 watch 模式，只需在 webpakc 指令后面添加 --watch 参数即可。
watch 模式作用：监视本地项目文件的变化，发现修改的代码会自动编译打包，生成输出文件。
开启watch模式的两种方法：

通过 CLI 方式开启 watch 模式

配置 package.json 文件的 scripts 选项:

{
  "name": "webpack-test1",
  //...
  "scripts": {
    "build": "webpack", // 无 watch 模式
    "watch": "webpack --watch", // 开启 watch 模式
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  }
}

运行 npm run build 即可。

通过配置文件开启 watch 模式

在 webpakc.config.js 文件中配置，添加 watch: true, 如下：

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: 'bundle.js'
  },
  mode: 'development',
  watch: true   // <= 开启 watch 模式
}

第二种方法：webpack-dev-server

webpack-dev-server 安装

安装 webpack 后，执行：

npm i webpack-dev-server -D

启动前

因为 webpack-dev-server 会在内存中生成一个打包好的 bundle.js 文件，专供开发时使用，所以 html 文件在引入js文件时，要修改为 <script src='/bundle.js'></script> 。 :::warning 如果安装了 html-webpack-plugin 插件，html 文件在开发阶段可以不引入 JS 文件，参考html 插件的使用 :::

使用 CLI 方式启动

在配置文件package.json 文件中添加 scripts 脚本：

{
  "name": "webpack-test1",
  //...
  "scripts": {
    "build": "webpack", // 无实时打包
    "dev": "webpack-dev-server --hot --open --port 8080", // <= 使用 webpack-dev-server
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  }
}

执行npm run dev 即可。

部分命令说明

--open 自动打开浏览器
--hot 热更新
--port 8080 端口号
--compress 压缩

使用配置文件启动

在package.json 文件中仅添加脚本："dev":"webpack-dev-server"
修改 webpack.config.js 文件，如下：

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: 'bundle.js'
  },
  mode: 'development',
  // 配置 webpack-dev-server
  devServer: {
    open: true,             // 自动打开浏览器
    compress: true,        // 压缩代码
    hot: true,                // 热更新
    port: 3000,                // 端口号
    contentBase: './src'        // 根目录，默认为项目目录
  }
}

第三种方法： webpack-dev-middleware

webpakc-dev-middleware 是一个容器（wrapper），它可以把webpack处理后的文件传递给一个服务器（server）。webpack-dev-server在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义配置来实现更多的需求。

使用

安装 express 和 webpack-dev-middleware

npm i express webpack-dev-middleware -D

新建一个 server.js 文件 ```javascript // server.js const express = require(‘express’) const webpack = require(‘webpack’) const webpackDevMiddleware = require(‘webpack-dev-middleware’) const config = require(‘./webpack.config.js’) const app = express() const compiler = webpack(config)

app.use(webpackDevMiddleware(compiler, { publicPath: ‘/‘ })) app.listen(3000, function() { console.log(‘http:/localhost:3000’) }) ```

配置package.json中的scripts:"server": "node server.js"
运行： npm run server

:::warning 注意：如果要使用middleware，必须使用html-webpack-plugin插件，否则html文件无法正确输出到express服务器的目录。 :::