webpack-dev-server，static参数有何作用？配置静态资源目录

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

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

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔的想法和看法。本文描述，最新版的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

相关文档地址：

• https://webpack.js.org/
• https://webpack.js.org/configuration/dev-server/

问题描述

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

• https://newsn.net/say/webpack-dev-server.html

配置内容：

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

试图运行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? }

主要的报错点就是：

options has an unknown property 'contentBase'

解决方案

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

• https://webpack.js.org/configuration/dev-server/#devserverstatic

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

修改后的配置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,
    },
}

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

相关文章

• https://newsn.net/say/webpack-dev-server.html
• https://github.com/webpack/webpack
• https://newsn.net/say/webpack.html
• https://newsn.net/say/webpack-watch.html

综述

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

• https://newsn.net/tag/webpack/

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