webpack-dev-server自动更新页面方法

这两天在看webpack，今天卡在webpack-dev-server上了，折腾了一下午，一直无法正常运行，每次服务器也提示正常启动了，但是浏览器一输入localhose:8080/admin就提示Get/…,反正就是无法打开页面。最后找到一个帖子，发现原来是我启动服务器的代码有问题。先安装webpack相关组件cnpm i webpack-dev-server --save-dev cnpm i webpack --save-dev代码如下： 1.项目结构如下：   2.webpack.config.js配置文件因为我定义了两个js，所以入口这边要定义两个名称分别打包成两个bund Webpack是一个流行的模块打包工具，而Webpack Dev Server是它的一个配套服务，提供实时重载、热模块替换等开发环境优化功能。在本文中，我们将深入探讨如何利用Webpack Dev Server实现页面的自动更新。确保你已经正确安装了Webpack和Webpack Dev Server。你可以通过以下命令安装这两个组件： ```bash cnpm i webpack-dev-server --save-dev cnpm i webpack --save-dev ```在项目结构中，通常会有一个`webpack.config.js`文件，用于配置Webpack的行为。如果项目中有多个JavaScript入口文件，你需要在配置文件中分别定义它们。例如，如果你有两个入口文件`admin.js`和`customer.js`，配置可能如下： ```javascript module.exports = { entry: { admin: './src/admin.js', customer: './src/customer.js', }, // ...其他配置}; ``` Webpack将会为每个入口创建一个对应的bundle文件，如`bundle.admin.js`和`bundle.customer.js`。为了使Webpack Dev Server能够监听这些文件的变化并自动更新页面，你需要在配置文件中设置`publicPath`： ```javascript module.exports = { // ... output: { path: path.resolve(__dirname, 'dist'), //输出目录filename: '[name].bundle.js', //输出文件名，这里使用[name]来表示入口文件的名字publicPath: '/dist/', //监听的路径，与输出目录相对应}, // ... }; ```接着，你需要在`package.json`文件中定义启动Webpack Dev Server的脚本。正确的命令是： ```json { "scripts": { "start": "webpack", "server": "webpack-dev-server --inline --content-base" } } ``` `--inline`参数使得Webpack Dev Server内联模式，这样更改后的文件会直接注入到页面中，无需刷新浏览器。`--content-base`参数指定了服务器的内容基础目录，通常是输出文件的目录。运行以下命令启动开发服务器和打包过程： ```bash npm start npm run server ```或者，如果你更喜欢命令行简洁，可以直接使用： ```bash webpack-dev-server --inline --content-base ```现在，当你在浏览器中访问`http://localhost:8080/admin`或`http://localhost:8080/customer`时，应该能看到对应的页面。更重要的是，当你修改`admin.js`或`customer.js`并保存后，Webpack Dev Server会检测到变化，并自动更新页面，无需手动刷新。总结起来，Webpack Dev Server的自动更新页面功能依赖于正确的配置和命令行参数。通过设置`publicPath`监听输出文件的变化，并使用`--inline`和`--content-base`参数启动服务器，可以实现代码实时更新，大大提高开发效率。在实际项目中，务必根据项目的具体需求调整配置，确保一切顺畅运行。