我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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配置问题。测试环境:win10node@16.14.2webpack@5.73.0webpack-cli@4.10.0webpack-dev-server@4.9.3

安装命令

安装命令如下:

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

相关文档地址:

问题描述

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

配置内容:

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

苏南大叔: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? }

主要的报错点就是:

options has an unknown property 'contentBase'

解决方案

解决方案是:
使用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,
    },
}

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

相关文章

综述

更多webpack相关文章,请点击:

助理微信

微信打赏码

微信公众号

微信小程序

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

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

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

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