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

news2024/11/20 7:08:56

安装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,
  },

到目前为止所有配置

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,
  },
};

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

自动化测试-web（PO：Page Object 模式）

自动化测试-web（PO：Page Object 模式）

一、PO模式 PO&#xff1a;Page Object&#xff08;页面对象&#xff09;&#xff0c;将自动化涉及的页面或模块封装成对象。 PO能解决什么问题&#xff1f; 代码复用性便于维护&#xff08;脚本层与业务分离&#xff09;--如果元素信息发生变化了&#xff0c;也不用去修改脚…
阅读更多...
卷积学习笔记——一文直观形象弄懂

卷积学习笔记——一文直观形象弄懂

在神经网络的世界中,卷积操作犹如一个神秘的魔术师,它以一种精巧的方式提取出图像、声音等数据中的关键特征,为神经网络模型赋能。但究竟什么是卷积?我们一探究竟。 卷积(Convolution)本质上是一种数学运算操作,它可以用极简的数学形式漂亮地描述一个动态过程。我们可以用形象…
阅读更多...
【C语言】——字符串函数的使用与模拟实现（上）

【C语言】——字符串函数的使用与模拟实现（上）

【C语言】——字符串函数 前言一、 s t r l e n strlen strlen 函数1.1、函数功能1.2、函数的使用1.3、函数的模拟实现&#xff08;1&#xff09;计数法&#xff08;2&#xff09;递归法&#xff08;3&#xff09;指针 - 指针 二、 s t r c p y strcpy strcpy 函数2.1、函数功能…
阅读更多...
复习Javase 方法

复习Javase 方法

Q 1: long double float blooean 这四个都不能作为switch参数类型 Q2: 数字9出现的次数 9 19 29 |....90 91....99 前面都是个位是9&#xff0c;一共是9个9、后面十位是9&#xff0c;一共11个9 问&#xff1a;如何求个位和十位的9 如果要得到个位的9 就取余 9%1…
阅读更多...
OpenHarmony C/C++三方库移植适配

OpenHarmony C/C++三方库移植适配

简介 众所周知&#xff0c;C/C三方库相对与JS/ETS的三方组件来说&#xff0c;其运行效率高。那如何将一个C/C三方库移植到OH系统上呢&#xff1f;本文将介绍如何快速高效的移植一个C/C三方库到OpenHarmony上。 C/C三方库适配问题与解决方案 由上图可以看出&#xff0c;三方库…
阅读更多...
【8086汇编】汇编语言基础入门

【8086汇编】汇编语言基础入门

文章目录 一、汇编简介1. 汇编语言的组成2. CPU、寄存器、内存3. CPU对存储器的读写4. 拓展5. 检测6. 解析 二、寄存器1. mov、add命令2. 物理地址3. CS:IP 装段地址和偏移地址3.1 如何改变CS:IP的值 4. 数据段DS:[address]4.1 前置知识&#xff1a;字与字节4.2 DS:[address] 5…
阅读更多...
求存款本息和（C语言）

求存款本息和（C语言）

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h> # include <math.h>int main() {//初始化变量值&#xff1b;double P 1000, r1 0.015, r2 0.021, r3 0.0275, r4 0.03, r5 0.0035;int judge 0;//…
阅读更多...
MathType2024中文永久免费激活许可证

MathType2024中文永久免费激活许可证

MathType是一款专业的数学公式编辑器&#xff0c;由Design Science公司开发。它为用户提供了一个便捷的方式来创建和编辑复杂的数学公式&#xff0c;适用于各种文档和出版物。MathType与常见的文字处理软件和演示程序配合使用&#xff0c;能够在各种文档中加入复杂的数学公式&a…
阅读更多...
给自己的机器人部件安装单目摄像头并实现gazebo仿真功能

给自己的机器人部件安装单目摄像头并实现gazebo仿真功能

手术执行器添加摄像头 手术执行器文件夹surgical_new内容展示如何添加单目摄像头下载现成的机器人环境文件启动仿真环境 手术执行器文件夹surgical_new内容展示 进入src文件夹下选择进入vision_obliquity文件夹 选择launch 有两个可用gazebo中rviz展示的launch文件&#xff0…
阅读更多...
基于 net/http 抽象出 go 服务优雅停止的一般思路

基于 net/http 抽象出 go 服务优雅停止的一般思路

和其他语言相比&#xff0c;Go 中有相同也有不同&#xff0c;相同的是实现思路上和其他语言没啥差异&#xff0c;不同在于 Go 采用的是 goroutine channel 的并发模型&#xff0c;与传统的进程线程相比&#xff0c;实现细节上存在差异。 本文将从实际场景和它的一般实现方式展…
阅读更多...
【LeetCode: 705. 设计哈希集合 + 数据结构设计】

【LeetCode: 705. 设计哈希集合 + 数据结构设计】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
【数据分析】嫡权法EWM

【数据分析】嫡权法EWM

总结&#xff1a;基于熵值信息来计算出权重&#xff0c;数据具有客观性。 目录 简介 计算步骤 案例 简介 熵值法原理 熵值法的基本思路是根据指标变异性的大小来确定客观权重信息熵:信息量的期望。可以理解成不确定性的大小&#xff0c;不确定性越大&#xff0c;信息熵也就…
阅读更多...
【Liunx】什么是vim？五大模式及转换方法详解

【Liunx】什么是vim？五大模式及转换方法详解

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …
阅读更多...
基于SSM的在线学习系统的设计与实现(论文+源码)_kaic

基于SSM的在线学习系统的设计与实现(论文+源码)_kaic

基于SSM的在线学习系统的设计与实现 摘要 随着信息互联网购物的飞速发展&#xff0c;一般企业都去创建属于自己的管理系统。本文介绍了在线学习系统的开发全过程。通过分析企业对于在线学习系统的需求&#xff0c;创建了一个计算机管理在线学习系统的方案。文章介绍了在线学习系…
阅读更多...
程序员会营销，好比虎生双翅，不是牛叉，是牛叉大发了。

程序员会营销，好比虎生双翅，不是牛叉，是牛叉大发了。

Hi&#xff0c;我是贝格前端工场&#xff0c;一般来讲程序员在语言表达和营销上都是弱项&#xff0c;你看头条上那些程序员XXX&#xff0c;嘚啵嘚的能说的&#xff0c;其实都是伪程序&#xff0c;都是大商务。 不过&#xff0c;如果程序员如果能够提升自己的营销能力&#xff0…
阅读更多...
教你将配置好的conda环境迁移到其它设备

教你将配置好的conda环境迁移到其它设备

文章目录 问题分析存在的方法环境要求方法步骤1. 下载conda pack2. 打包原环境3. 新设备还原环境4. 查看环境 问题分析 好不容易配置好的conda环境&#xff0c;要在另一个设备上运行&#xff0c;还要重新配置&#xff0c;好麻烦。 存在的方法 pip install -r requirement.txt …
阅读更多...
CMD 汉字乱码处理

CMD 汉字乱码处理

windows 11 cmd汉字乱码问题处理 一 查看CMD编码 win R 输入 cmd 输入 chcp 查看回显信息 “936”代表的意思就是 GBK (汉字内码扩展规范)&#xff0c;通常情况下GBK也是cmd的默认编码。 解决乱码需要把编码改为 utf-8 二 临时修改 在 终端中输入 chcp 65001 三 永久修改…
阅读更多...
踩了一堆坑，终于掌握了postgreSQL主从流的精髓

踩了一堆坑，终于掌握了postgreSQL主从流的精髓

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…
阅读更多...
大模型化身数据魔法师，降低NLP高置信误判

大模型化身数据魔法师，降低NLP高置信误判

关注公众号【AI论文解读】回复: 论文解读 获取本文论文 引言&#xff1a;NLP模型的高置信错误与脆弱性问题 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;模型的预测性能优化往往伴随着高置信错误&#xff08;high confidence errors&#xff09;的产生&#x…
阅读更多...
【python】python汽车之家数据抓取分析可视化（代码+报告+数据）【独一无二】

【python】python汽车之家数据抓取分析可视化（代码+报告+数据）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023