11、webpack开发--自动编译且自动刷新工程

最新推荐文章于 2024-05-13 11:10:27 发布

原创最新推荐文章于 2024-05-13 11:10:27 发布 · 410 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #自动编译 #自动刷新

webpack学习笔记专栏收录该内容

17 篇文章

订阅专栏

本文承接上文，在代码可自动编译基础上，实现页面自动刷新效果。借助webpack-dev-server，介绍了其安装步骤，包括修改webpack配置文件、package.json文件，运行开发服务器等，最终实现无需刷新页面，点击运行即可呈现最新效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

※接上文webpack开发--自动编译源代码工程以及内容

上文虽然代码可以自动编译，但是还是需要刷新页面才能看到实际效果，本文将实现自动编译的前提下，页面也会自动刷新的效果！

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

1、安装webpack-dev-server

npm install webpack-dev-server --save-dev

2、修改webpack配置文件webpack.config.js追加devServer，告诉webpack开发服务器在哪里寻找运行文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

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')
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '输出管理'
        }),
        new CleanWebpackPlugin()
    ]
}

3、修改package.json文件，追加webpack-dev-server运行脚本

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^2.0.2",
    "css-loader": "^2.1.1",
    "csv-loader": "^3.0.2",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.32.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.4.1",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

4、运行webpack开发服务器

npm start

5、运行效果如下

6、修改print.js文件

export default function print() {
    // console.error('code find a error!'); 修改前
    // console.log('code was updated!'); 第二次修改前
    console.log('code was updated again!');
}

7、运行效果为：