webpackdevserver（webpackdevserver配置项）

本篇文章给大家谈谈webpackdevserver，以及webpackdevserver配置项对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、webpack 配置 webpack-dev-server
• 2、Webpack工程化笔记(三)：webpack-dev-server配置
• 3、webpack-dev-server搭建本地服务器
• 4、webpack和webpack-dev-server的区别

webpack 配置 webpack-dev-server

1.安装webpack-dev-server

2.安装cross-env

3.安装笑老笑碰含HTML支持文件

4.配置pack.json文件

4.配置config文含晌件

Webpack工程化笔记(三)：webpack-dev-server配置

Webpack社区提供了一个便捷的本地开发工具 webpack-dev-server

安装命令如下：

安装指令的过程中我们会经常使用到 --save-dev 这个是将工程的devDependencies(开发环境依做旦赖)记录到 package.json 中去，一般使用这个参数就表示只会在开发环境的时候会使用到，生产环境使用不到。

然后在vscode编辑器中打缺胡颂开 live-server ，webstorm那种的话就不需要此操作，接着可以选择你需要运行的项目。

webpack-dev-server最方便的就是它的live-reloading（自动刷新）的特性，该特性的原理在于： 当伏郑webpack-dev-server发现工程源文件进行了更新操作就会自动刷新浏览器，展示更新后的内容。

webpack-dev-server搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要让浏览器自动刷新显示我们修改后的结果。

不过它是一个单独的模枣大块凳轮竖，在webpack中使用之前先安装它

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：

    contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，这里写./dist

    port：端口号

    inline：页面实时刷新

    historyApiFallback：在SPA页面中，依赖HTML5的history模式

webpack.config.js文件配置修改如下：

在package.json中配置脚本

运行npm run dev遇到的问题： Error: Cannot find module 'webpack-cli/bin/config-yargs'

原因是： webpack-cli的新版本对webpack-dev-server版本的不兼容

解决方案： 降低webpack-cli的桐做版本为 "^3.3.12"

webpack和webpack-dev-server的区别

第一：webpack只是构建

webpack-dev-server除了构建，还提供web服务

第二：webpack.config.json的路径参数

显然，entry都一样，因为都要知道需要构建的文件在哪里

那么区别就在于 output了

path和webpack一起，指明构建 之后 输出文件的位置，这是真实的物理地址

publickPath和webpack-dev-server一起，当执行webpack-dev-server时，第一步首先跟webpack一样，先构建输出，然后提供web访问，该输出文件是在内存中

默认情况下，不设置publicPath则输出文件默认在运宽友基行webpack-dev-server的目录，也就是根目录，，那么html中引用直接是src="输出的文件"，，如果设置了publicPath那么html中引用也要相对改变

总的来说，webpack只是构建，而webpack-dev-server相当于webpack+apache（或者其它web服务器）

区别在于

使用webpack+apache（或者其它服务器），每次构建之后

1 根据path引用构建后的输出文件；

2 每次修改都要重新运行webpack

使用webpack-dev-server，运行之后

1 先构建，输出文件在内存中，引用构建后的输出文件根据publicPath（默认是告春根目慎谨录）；

2 每次修改，自动刷新

[img]

关于webpackdevserver和webpackdevserver配置项的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。