1、观察模式

package.json中加入”watch“:

{
  "name": "111",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch":"webpack --watch",
    "build": "webpack"
  },

在终端运行npm

image.png

2、使用webpack-dev-server

添加devServer

module.exports = {
  entry:{
      app:'./src/index.js',
      print:'./src/print.js'
  },
  devtool:'inline-source-map',
  devServer:{
      contentBase:'./dist'
  },
  output: {
    filename:'[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  
};

安装工具：

image.png

添加script运行脚本"start"：

{
  "name": "111",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch":"webpack --watch",
    "start":"webpack-dev-server --open",
    "build": "webpack"
  },

在终端运行：npm start

image.png

3、webpck-dev-middleware

安装插件：

image.png

设置配置：

output: {
    filename:'[name].bundle.js',
    path: path.resolve(__dirname, 'dist')，
    publicPath:'/'
  },

添加server.js文件：

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

添加srcipt运行脚本”server“：

{
  "name": "111",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "server":"node server.js",
    "build": "webpack"
  },

运行脚本：

image.png