目录一、devserver背景二、webpack-dev-server三、对devserver进行一些配置：四、模块热替换HMR五、跨域访问问题：六、webpack的resolve：七、区分开发环境和...
目录
一、devserver背景二、webpack-dev-server
三、对devserver进行一些配置：
四、模块热替换HMR
五、跨域访问问题：
六、webpack的respythonolve：
七、区分开发环境和生产环境
一、devserver背景
每次改代码都需要重新部署,
或者只改变修改代码行的效果
所以出现了devserver本地服务
为了完成自动编译，webpack提供了几种可选的模式
方式一：webpack watch mode
实现方法二： 在启动webpack的命令中，添加–watch的标识
方式二：webpack-dev-server(常用)
二、webpack-dev-server
上面的方式可以监听到文件的变化，但是事实上它本身没有自动刷新浏览器的功能的，
当然我们可以通过vscode使用live-server来完成这样的功能，但是我们希望不使用live-server的情况下，可以具备实时重新加载的功能
步骤：
1、安装npm install webpack-dev-server -D
2、增加命令"serve":“webpack serve”
3、npm run serve即可
用这个启动项目有个特点：
不会输出build文件夹
因为localhost8080—express(src等静态文件)
打包时直接将src等文件编译后放到内存里，然后直接使用express框架发起服务
如果先编译，放到外存里，然后将其上传到内存，然后使用express框架发起服务。那样会降低效率
三、对devserver进行一些配置：
在webpack.config.js中，写上
如果index.html里<script.%20src=“./aaa.js”>，%20打包时会去找abc/aaa.js,这就是contantBase的作用，可以理解为去源代码里找文件，一般值是"./public"
一般开发阶段使用contantBase
四、模块热替换HMR
应用程序在运行过程中，替换，添加，删除模块都会重新刷新整个页面，拿计数器案例为例：
.vue文件中修改message也会触发模块热替换的
五、跨域访问问题：
localhost7777的项目代码中axIOS了localhost8000的数据moment，就会出现跨域访问报错，(浏览器不允许跨域)
然后在axious时，改成axious(“/api/moment”)
六、webpack的resolve：
import时后边的括号可以写：
相对路径绝对路径
node_module
下边介绍node_module：
webpack.config.js里有一个（如果没有，那就是全取得默认值）
resolve:{
modules : [“node_modules”]//默认从这里找，所以文件夹不能改名字
extension:[“.js”,“.vue”]
alias:{
“js”:path.resolve(__dirname,“./src/js”),
“@”:path.resolve(__dirname,“./src”),
这样配置上后main.js中的import不用写./开头了
}
}
如何判断是文件还是文件夹呢
如果没有后缀，那么匹配js/json/jms去找文件，如果有那就是文件，如果没有那就是文件夹，如果是个文件夹，看看里边有没有index的文件
七、区分开发环境和生产环境
package.json中指令里
build值改为“webpack --config ./config/webpack.prod.config.jswww.cppcns.com”
serve值改为“webpack serve --config ./config/webpack.dev.config.js“
npm install webpack-merge
新建文件夹config
新建文件webpack.prod.config.js
const {cleanWebpackPlugin}=require("clean-webpack-plugin")
const copyWebpackPlugin = require("copy-webpack-plugin")
const {merge} =require("webpack-merge")
const commonConfig= require("./config/webpack.common.config.js")
module.exports=merge(commonConfig,{
mode:"production",
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: ' "public" ,
to: "./",
glob0ptions: {
ignore: [
"**/ index . html"
]}
}
]
}))
]
新建文件webpack.dev.config.js
module.exports={
mode:"development",
devtool:"source-map",
devserver:{
contantBase:"./abc",
hot:true，
open:true,
host:
port:7777
proxy:{
"/api":"http://localhost:8888"
}
}
}
新建文件webpack.common.js
module.exports={
公共的一些配置留在这个文件里
}
到此这篇关于vue devserver及其配置的文章就介绍到这了,更多相关vue devserver配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
