options has an unknown property ‘contentBase‘——webpack错误解决

最新推荐文章于 2023-10-19 10:27:59 发布

原创最新推荐文章于 2023-10-19 10:27:59 发布 · 4.2k 阅读

CC 4.0 BY-SA版权

文章标签：

6 篇文章

订阅专栏

本文讲述了在学习Webpack过程中遇到的关于开发服务器配置的问题，重点在于迁移旧版的contentBase属性到新版的static配置，并解释了其弃用原因。解决方法包括使用path.join和加入gzip压缩。

最近在学webpack时踩了很多坑

webpack-dev-server 开发服务器，为了方便我们开发，实时监测我们代码的改变，实时刷新页面。这样就不要一修改代码就重新运行了，大概是这个意思

配置开发服务器webpack-dev-server,

运行

npm install -D webpack-dev-server

在webpack.config.js中配置如下：

module.exports = {
devServer:{
        //指定服务器目录
       contentBase:'./dist',
        //是否自动打开浏览器
        open:true
}

}

接下来：通过dev-server来启动服务，需要在package.json中写npm的脚本

"scripts":{
"start":"webpack-dev-server"
}

我理解的是，这里的start是自己取的名字，之后我们如果要启动这个服务器，就可以输入

-npm run start

然后我在终端输入 npm run start,报错了：

大概意思是 contentBase这个属性无效的。

然后我查阅了官方文档，发现现在以及弃用了这个写法（中文文档不是最新版本，就很坑~~~）

改成了这样：

devServer: {
        static: {
          directory: path.join(__dirname, 'dist'),
        },
        compress: true,
        port: 9000,
      },

对 dist/项目根目录中的所有内容进行 gzip 压缩和提供服务

成功解决了。。。。。

2 条评论