vue第七天学习内容
一、devserver背景
- 实现方法一： 在导出的配置中，添加watch:true
- 实现方法二： 在启动webpack的命令中，添加–watch的标识
方式二：webpack-dev-server(常用)
二、webpack-dev-server
三、对devserver进行一些配置：
在webpack.config.js中，写上
devServer:{ contantBase:"./abc" } 如果index.html里
， 打包时会去找abc/aaa.js,这就是contantBase的作用，可以理解为去源代码里找文件，一般值是”./public”
因为webpack.config.js中配置了webcopyPlugin,如果没有配置，那么就不会
拷贝图片等静态文件，这时候就需要去public文件夹中寻找。
四、模块热替换HMR
target:"web" devserver:{ contantBase:"./abc", hot:true，//热更新 open:true,//build自动打开浏览器 host://默认lolaohost，也可0.0.0.0，这样同一网段的主机都能通过ip访问 port:7777//访问项目时的端口号 compress:true浏览器请求静态资源时压缩一下，打开浏览器的检查时可以看到bundle.js的content-encoding是gzip，浏览器自动解压 } main.js中，import "./js/element":改为 import "./js/element": if(module.hot){ module.hot.accept("./js/element.js",()=>{ console.log("模块发生更新了") } } 五、跨域访问问题：
六、webpack的resolve：
import时后边的括号可以写：
- 相对路径
- 绝对路径
- node_module
七、区分开发环境和生产环境
npm install webpack-merge
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={ 公共的一些配置留在这个文件里 } 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218830.html原文链接：https://javaforall.net
