我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

webpack进入了5系列，webpack-dev-server也更新到了4.9.3。那么，新版的webpack-dev-server在配置方面，有什么变化呢？这就是本文要讨论的问题。

苏南大叔：webpack-dev-server，static参数有何作用？配置静态资源目录 - webpack-dev-server-2
webpack-dev-server，static参数有何作用？配置静态资源目录（图3-1）

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔的想法和看法。本文描述，最新版的webpack-dev-server配置问题。测试环境：win10，node@16.14.2，webpack@5.73.0，webpack-cli@4.10.0，webpack-dev-server@4.9.3。

安装命令

安装命令如下：

npm i webpack webpack-cli webpack-dev-server -D
Plain text

相关文档地址：

问题描述

使用上述环境webpack@5.73.0，安装了webpack-dev-server@4.9.3后，按照以往配置项目配置webpack.config.js文件。参考文章：

配置内容：

module.exports = {
    //...
    devServer: {
        contentBase: './static',
        compress: true, 
        port: 3000,
        open: true,
    },
    //...
}
JavaScript

苏南大叔：webpack-dev-server，static参数有何作用？配置静态资源目录 - 错误截图
webpack-dev-server，static参数有何作用？配置静态资源目录（图3-2）

试图运行webpack-dev-server命令的时候，报错如下：

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
Plain text

主要的报错点就是：

options has an unknown property 'contentBase'
Plain text

解决方案

解决方案是：
使用static来代替contentBase。定义一个目录用于放置静态文件，这个和很多类似框架里面的static配置都是一样一样的。关于这个static参数说明：

使用方式是：
把a.jpg放到./static/目录下面后，就使用http://{host}/a.jpg进行访问。

苏南大叔：webpack-dev-server，static参数有何作用？配置静态资源目录 - 解决方案
webpack-dev-server，static参数有何作用？配置静态资源目录（图3-3）

修改后的配置webpack.config.js如下：

const path = require("path");
module.exports = {
    // mode: 'production', // 环境
    mode: 'development', // 环境
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    // watch: true, 
    devServer: {
        contentBase: './dist',
        // static:'./static',
        compress: true, 
        port: 3000,
        open: true,
    },
}
JavaScript

使用webpack-dev-server的话，就不用配置原来的watch: true了，因为默认就是watch的。

相关文章

综述

更多webpack相关文章，请点击：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   webpack