webpack-(plugin，本地服务器，路径别名，安装vue)

安装vue

npm i vue-loader -D npm i vue

编写一个vue文件：
在这里插入图片描述
在index.html中设置 一个id为app的div
在这里插入图片描述
将vue文件挂载到app中

在这里插入图片描述
vue比较特殊，除了使用loader外，还使用了plugin

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test:/\.vue/,
        use:"vue-loader"
      }
    ],
  },
  plugins: [new VueLoaderPlugin()],
};

webpack中 resolve模块的解析和拓展名

resolve用于模块的解析，在开发中使用各种的模块依赖，resolve可以帮助我们从它们的require/import语句中找到合适的代码。webpack使用 enhanced-resolve来解析文件路径。
webpack能解析的三种路径：
**绝对路径：**已经获取文件的绝对路径，不会再解析。

相对路径：在这种情况下 使用Import或require导入的资源所处的目录会被当成上下文目录。import/require中的相对路径会和上下文目录的路径拼接，形成绝对路径。

模块路径：（import {createApp} from “vue”）默认是从 node_modules中查找。可以通过设置别名的方式来识别模块路径。

如果一个文件有拓展名会直接打包例如import index from "./vue/index.vue";会直接打包，如果没有(import index from "./vue/index")则需要需要使用resolve.extensions选项来作为文件的拓展名。

resolve中的 extensions和alias

extensions:自动添加拓展名，在导入文件是可以不用带拓展名如import index from "./vue/index.vue"可以写为import index from "./vue/index",他会自动补齐拓展名。

alias：配置路径别名。在导入时可能会有 …/…/这样的，当路径特别长时会很麻烦.

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  resolve: {
    extensions: [".js", ".ts", ".tsx", ".jsx", ".cjs", ".vue"],
    //这里的"./src/vue"路径 是相对于webpack的，以webpack.config.js为基准的。
    // 路径别名:  xxx路径
    alias: {
      "@": path.resolve(__dirname, "./src/vue"),
    },
  },
  module: {
    rules: [],
  },
  plugins: [],
};

plugin

loader只能用于特定模块的转化，plugin插件比loader的用途更广，他还可以进行打包优化，变量的注入等。
在这里插入图片描述

cleanwebpackplugin 打包前会自动删除上次打包后的文件

npm i clean-webpack-plugin -D

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  resolve: {
    extensions: [],
    alias: { },
  },
  module: {
    rules: [],
  },
  plugins: [new VueLoaderPlugin(), new CleanWebpackPlugin()],
};

打包前还有之前的img（这两个目录是之前使用图片时设置的）目录
在这里插入图片描述
打包后可以看到之前的Img目录已经删除
在这里插入图片描述

另外output.clean也可以在打包前清空之前的目录https://www.webpackjs.com/configuration/output/#outputclean
在这里插入图片描述

html-webpack-plugin

打包后的文件中他本身因该有一个html文件而不是通过index.html访问
npm i html-webpack-plugin -D

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  resolve: {},
  module: {
    rules: [ ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    //可以指定生成的html的模板
    new HtmlWebpackPlugin({
      title: "test项目",
      template: "./src/index.html",
    }),
  ],
};

这个模板中还可以使用一些变量<%= xxx%>,htmlWebpackPlugin.options可以获取在HtmlWebpackPlugin中定义的title

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="icon" href="favicon.ico" />
  </head>
  <body>
    <div id="app"></div>
    <div><%= htmlWebpackPlugin.options.title %></div>
    <script src="../build/bundle.js"></script>
  </body>
</html>

definePlugin

允许在编译时配置一些全局变量，不用安装

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  resolve: {},
  module: {
    rules: [],
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new DefinePlugin({
      BASE_URL: "'./'",
    }),
    new HtmlWebpackPlugin({
      title: "test项目",
      template: "./src/index.html",
    }),
  ],
};

在html中使用
在这里插入图片描述
打包后的结果：
在这里插入图片描述
还可以在js中使用例如console.log(BASE_URL)

mode

设置开发或生产模式，默认是production。
可选值有 none|production|development

在这里插入图片描述

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  resolve: {},
  module: {
    rules: [],
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new DefinePlugin({
      BASE_URL: "'./'",
    }),
    new HtmlWebpackPlugin({
      title: "test项目",
      template: "./src/index.html",
    }),
  ],
};

在这里插入图片描述

搭建本地服务器

一般有两种方式访问查看html:

  1. 使用npm run build 打包后再访问Html
  2. 使用vscode的插件live server或直接打开html.
    这些方式都不能实时的监听页面的变化，改动文件后，要刷新页面或重新打包，webpack提供了三种方式可以完成自动编译：
    1.webpack watch mode
  3. webpack-dev-server(常用)
    3.webpack-dev-middleware

webpack-dev-serer

npm i webpack-dev-server -D
在配置中加上devServer
在这里插入图片描述
添加server命令

  "scripts": {
    "build": "npx webpack --config wk.config.js",
    "server": "npx webpack server --config wk.config.js "
  },

启动命令后还需要手动打开网址访问
在这里插入图片描述

热更新 HMR

Hot Module Replacement:模块热替换，在程序运行的过程中，会替换、添加、删除模块，不用刷新页面。
热更新通过以下方式提高开发速度：
在这里插入图片描述
默认情况下已经提供了HMR，只需要开启就行：

  devServer:{
     hot:true
  }

对于一些框架，早已经有了成熟的解决方案，安装脚手架时已经配好不需要再配置。

host设置主机地址（了解）

默认时localhost,还可以设置成其他的例如0.0.0.0
在这里插入图片描述

localhost和0.0.0.0的区别：
在这里插入图片描述

port open compress

port:监听的端口号默认是8080
open: 是否打开浏览器，默认是false
compress:是否为静态文件开启gzip compression

  devServer: {
    hot: true,
    port: "7070",
    host: "127.0.0.1",
    compress: true,
    open: true,
  },

代理服务器

  devServer: {
 
        proxy: {
 
            '/api': {
 
                target: 'http://localhost:3000',
 
                pathRewrite: {'^/api' : ''} ///api 被替换成""
 
            }
 
        }
   //axios("/api/user") =  http://localhost:3000/user

到目前为止所有配置

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  resolve: {
    extensions: [".js", ".ts", ".tsx", ".jsx", ".cjs", ".vue"],
    alias: {
      "@": path.resolve(__dirname, "./src/vue"),
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
        generator: {
          filename: "img/[hash][ext]",
        },
      },
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.vue/,
        use: "vue-loader",
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new DefinePlugin({
      BASE_URL: "'./'",
    }),
    new HtmlWebpackPlugin({
      title: "test项目",
      template: "./src/index.html",
    }),
  ],
  devServer: {
    hot: true,
  //  port: "7070",
  ///  host: "127.0.0.1",
  //  compress: true,
  //  open: true,
  proxy: {
 
     '/api': {
 
      target: 'http://localhost:3000',
 
      pathRewrite: {'^/api' : ''}
 
    }
  },
};

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/544500.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

zabbix 使用 dataease 做数据大屏

zabbix 使用 dataease 做数据大屏

1、环境介绍 操作系统&#xff1a;龙蜥os 7.9 软件&#xff1a;dataease v1.18.18 zabbix&#xff1a; 6.0 2、软件下载 https://community.fit2cloud.com/#/products/dataease/downloads 3、将软件包上传到服务器并解压缩 tar -xvf dataease-v1.18.18-offline.tar.gz4、修改…
阅读更多...
鸿蒙端云一体化开发--开发云函数--适合小白体制

鸿蒙端云一体化开发--开发云函数--适合小白体制

开发云函数 那什么是云函数&#xff1f;我们将来又怎么去使用这个云函数呢&#xff1f; 答&#xff1a;我们之前要编写一些服务端的业务逻辑代码&#xff0c;那现在&#xff0c;在这种端云一体化的开发模式下&#xff0c;我们是把服务端的业务逻辑代码&#xff0c;通过云函数来…
阅读更多...
Mybatis中SqlSession接口中的selectList方法

Mybatis中SqlSession接口中的selectList方法

1、SqlSession SqlSession是Mybatis持久层框架提供的接口&#xff0c;该接口中包含了大量的CRUD操作方法&#xff08;既增删改查方法&#xff09;。 2、selectList方法 selectList方法是用于查询的方法&#xff0c;该方法具有多态性&#xff0c;如图所示&#xff08;打开myb…
阅读更多...
qemu源码解析一

qemu源码解析一

基于qemu9.0.0 简介 QEMU是一个开源的虚拟化软件&#xff0c;它能够模拟各种硬件设备&#xff0c;支持多种虚拟化技术&#xff0c;如TCG、Xen、KVM等 TCG 是 QEMU 中的一个组件&#xff0c;它可以将高级语言编写的代码&#xff08;例如 C 代码&#xff09;转换为可在虚拟机中…
阅读更多...
51单片机-独立按键模块

51单片机-独立按键模块

1. 独立按键控制LED状态 轻触按键实现原理&#xff1a;按下时&#xff0c;接通&#xff0c;通过金属弹片受力弹动来实现接通和断开。 松开按键 按下之后&#xff1a;就会被连接 同时按下K1和K2时&#xff0c;P2_0,接口所连LED灯才亮。 #include <REGX52.H> void ma…
阅读更多...
python-numpy(3)-线性代数

python-numpy(3)-线性代数

一、方程求解 参考资料 对于Ax b 这种方程&#xff1a; np.linalg.inv(A).dot(B)np.linalg.solve(A,b) 1.1 求解多元一次方程一个直观的例子 # AXB # X A^(-1)*B A np.array([[7, 3, 0, 1], [0, 1, 0, -1], [1, 0, 6, -3], [1, 1, -1, -1]]) B np.array([8, 6, -3, 1]…
阅读更多...
Vue - 6（ 13000 字 Vue3 入门级教程）

Vue - 6（ 13000 字 Vue3 入门级教程）

一 &#xff1a;Vue3 1.1 Vue3简介 2020年9月18日&#xff0c;Vue.js发布3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;海贼王&#xff09;耗时2年多、2600次提交、30个RFC、600次PR、99位贡献者github上的tags地址&#xff1a;https://github.com/vuejs/vue-ne…
阅读更多...
Android ParcelFileDescriptor实现进程间通信

Android ParcelFileDescriptor实现进程间通信

需求 一个通信通道&#xff0c;实现跨进程的的Socket网络通信。 具体的通信通道的图如下。 需求分析 我们需要一个进程一直做通信通道的事情&#xff0c;业务进程把数据通过进程间通信交给通信进程。通信进程通过Socket通道将数据发给网络另外一端的通信进程。接收端的通信进…
阅读更多...
RedisTemplate

RedisTemplate

3.3.RedisTemplate 在Sentinel集群监管下的Redis主从集群&#xff0c;其节点会因为自动故障转移而发生变化&#xff0c;Redis的客户端必须感知这种变化&#xff0c;及时更新连接信息。Spring的RedisTemplate底层利用lettuce实现了节点的感知和自动切换。 下面&#xff0c;我们…
阅读更多...
家庭网络防御系统搭建-虚拟机安装siem/securityonion网络连接问题汇总

家庭网络防御系统搭建-虚拟机安装siem/securityonion网络连接问题汇总

由于我是在虚拟机中安装的security onion&#xff0c;在此过程中&#xff0c;遇到很多的网络访问不通的问题&#xff0c;通过该文章把网络连接问题做一下梳理。如果直接把securityonion 安装在物理机上&#xff0c;网络问题则会少很多。 NAT无法访问虚拟机 security onion虚拟…
阅读更多...
ssm051网上医院预约挂号系统+jsp

ssm051网上医院预约挂号系统+jsp

网上医院预约挂号系统设计与实现 摘 要 如今的信息时代&#xff0c;对信息的共享性&#xff0c;信息的流通性有着较高要求&#xff0c;因此传统管理方式就不适合。为了让医院预约挂号信息的管理模式进行升级&#xff0c;也为了更好的维护医院预约挂号信息&#xff0c;网上医院…
阅读更多...
dbeaver数据库语言编辑器设置jdbc驱动

dbeaver数据库语言编辑器设置jdbc驱动

打开 dbeaver 软件 数据库 -> 驱动管理器 以mysql为例 双击 MySQL -> 库 -> 添加工件 然后 打开maven组件库 官网 找到mysql驱动对应的maven工件地址 复制进去然后确认就行了 参考 大神博客
阅读更多...
＜计算机网络自顶向下＞ TCPUDP套接字编程

＜计算机网络自顶向下＞ TCPUDP套接字编程

应用实现&#xff1a;源端的应用进程交换报文实现应用协议&#xff0c;来实现各种各样的网络应用&#xff08;dash&#xff0c;email, etc&#xff09; 而应用层通信不可以直接通信&#xff0c;需要借助下层的服务才可以进行&#xff0c;通过层间接口交给下层&#xff0c;通过…
阅读更多...
Hadoop概述及集群搭建

Hadoop概述及集群搭建

文章目录 一、Hadoop介绍二、Hadoop发展简史三、Hadoop核心组件四、Hadoop架构变迁1、Hadoop 1.02、Hadoop 2.03、Hadoop 3.0 五、Hadoop集群简介六、Hadoop部署模式七、Hadoop 集群搭建第一步&#xff1a;创建虚拟机第二步&#xff1a;安装Linux镜像第三步&#xff1a;网络配置…
阅读更多...
Go微服务: go-micro集成consul的注册中心和配置中心

Go微服务: go-micro集成consul的注册中心和配置中心

微服务与注册中心的关系图 这个图很好说明了微服务之间的关系&#xff0c;以及consul注册中心的重要性 环境准备 1 &#xff09;consul 集群 假设consul 集群已经搭建&#xff0c;已有5台server和2台client这里2台client被nginx做负载均衡&#xff0c;假设最终本地的访问地址…
阅读更多...
了解 Vue 工程化开发中的组件通信

了解 Vue 工程化开发中的组件通信

目录 1. 组件通信语法 1.1. 什么是组件通信&#xff1f; 1.2. 为什么要使用组件通信&#xff1f; 1.3. 组件之间有哪些关系&#xff08;组件关系分类&#xff09;&#xff1f; 1.4. 组件通信方案有哪几类 &#xff1f; 2. 父子通信流程图 3. 父传子 3.1. 父传子核心流程…
阅读更多...
1. 信息存储

1. 信息存储

系列文章目录 信息的表示和处理 : Information Storage&#xff08;信息存储&#xff09;Integer Representation&#xff08;整数表示&#xff09;Integer Arithmetic&#xff08;整数运算&#xff09;Floating Point&#xff08;浮点数&#xff09; 文章目录 系列文章目录前…
阅读更多...
网络网络层之(2)ARP协议

网络网络层之(2)ARP协议

网络网络层之(2)ARP协议 Author&#xff1a;Once Day Date: 2024年4月1日 漫漫长路&#xff0c;有人对你笑过嘛… 全系列文档可参考专栏&#xff1a;通信网络技术_Once-Day的博客-CSDN博客。 参考文档: 《TCP/IP详解卷一》arp(8) - Linux manual page (man7.org)彻底搞懂系…
阅读更多...
专业照片编辑软件ON1 Photo RAW 2024 mac/win

专业照片编辑软件ON1 Photo RAW 2024 mac/win

ON1 Photo RAW 2024 for Mac是一款集专业性与易用性于一体的照片编辑软件。它拥有简洁直观的用户界面&#xff0c;即便对于摄影新手&#xff0c;也能快速上手。软件支持RAW格式照片处理&#xff0c;能够完整保留照片原始信息&#xff0c;让后期调整更加灵活。 在功能方面&#…
阅读更多...
利用Sentinel解决雪崩问题（一）流量控制

利用Sentinel解决雪崩问题（一）流量控制

1、解决雪崩问题的常见方式有四种: 超时处理:设定超时时间&#xff0c;请求超过一定时间没有响应就返回错误信息&#xff0c;不会无休止等待;舱壁模式:限定每个业务能使用的线程数&#xff0c;避免耗尽整个tomcat的资源&#xff0c;因此也叫线程隔离;熔断降级:由断路器统计业务…
阅读更多...
最新文章

Copyright @ 2022~2023