Vue之webpack的使用

最新推荐文章于 2024-04-29 17:01:02 发布
最新推荐文章于 2024-04-29 17:01:02 发布
阅读量2.5k 收藏 9
点赞数
文章标签： javascript 前端 es6 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52159312/article/details/121270730
版权

文章目录

一、webpack的基本使用

解释：为什么使用webpack，主要就是为了模块化，方便管理维护代码。

  1. webpack的作用：就是把JS相互依赖的模块打包，然后把这个包直接放在服务器就可以运行了
  2. webpack基于nodejs使用，换句话说要使用webpack就需要安装nodejs
  3. 使用node的npm命令安装webpakc
//下面是模块info.js
const name = "张三"

const age = 18;

export { name, age };
---------------------------------------------
//下面是模块main.js
import { name, age } from './info'

console.log(name);

console.log(age);

------------------------
//下面是目录结构
webpakck的使用
|
|___src
|	|__info.js
|	|__main.js	
|
|___dist
|
|___index.html

//dist文件夹存放打包生成好的js文件，index.html直接引用dist生成的js文件
//src存放开发时的源码

/*
怎么打包？
解释：首先在cmd窗口或者vscode自带的终端(以管理员权限打开),进入"webpakck的使用"这个文件夹
然后使用"webpack ./src/main.js ./dist/boundle.js"命令
这个命令的意思就是：把src文件下的main.js文件打包到dist文件，并在dist文件夹下生成boundle.js文件

注意：在main.js中依赖的其他模块webpack都会自动导入。模块与模块之间的依赖网不需要我们关心

最后生成的boundle.js文件就是所有模块打包后生成的文件，在index.html中只需要使用这个文件就可以了

*/

二、webpack配置文件和指令

  1. 为什么要使用这两个配置文件，他们有什么作用

1.webpack.confing.js

关于webpack.confing.js

解释：
1.在"一"中打包使用的是具体名字具体路径：即"webpack ./src/main.js ./dist/boundle.js"命令
2.假设文件名十分长，这样写是不合理的，此时需要一个类似快捷指令的方式来代替完整指令，这个快捷指令就是webpack
3.使用快捷指令需要一个配置文件来设置这个指令所映射的路径，这个配置文件就是"webpack.confing.js"固定名字
----------------------------------
const path = require('path');

module.exports = {

  entry: "./src/main.js",

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  }
}

代码解释：
1.const path = require('path');
疑问：这里表示导入一个包，但是在上面的目录结构中并没有path
解答：因为webpack是基于node运行的，其实这里使用的是nodejs的包，需要使用npm init命令来导入
疑问：为什么要使用这个包
解答：因为入口需要绝对路径，使用这个包下面的函数可以获得绝对路径

2.module.exports={}
解答：
这是commonJs模块化规范，在webpack.confing.js只能使用commonJs规范，不能使用ES6模块化规范

ES6模块化规范举例：
export { name, age };
import { name, age } from './info'

3.entry: "./src/main.js",
表示的是从哪个文件开始打包，即打包的入口。就是"webpack ./src/main.js ./dist/boundle.js"中的"./src/main.js"

4.output:{}即打包后的文件放在哪里，也就是出口

path：这里必须是绝对路径，

path.resolve(__dirname, "dist")
使用这个函数获取绝对路径，__dirname就是当前文件的绝对路径，dist就是这个路径下的文件夹
(其实是把当前文件的绝对路径和这个dist做了拼接组成了一个新的绝对路径)

filename：这是打包后生成的文件名，是放在上面这个路径下的
----------------------------------

2.package.json

关于package.json

写了const path = require('path')这行代码之后并不是就能直接用node的核心包了，
需要执行一个指令，"node init",回车后填写一个包名，其他全默认。执行完就会产生package.json这个文件

package.json这个文件也会依赖其他的node包，此时使用"node install"指令把相关的包全部引入
此时生成"package-lock.json"（不知道有什么用）


最后使用快捷指令"webpack"来进行打包

上面全部完成后此时的目录结构

webpakck的使用
|
|___src
|	|__info.js
|	|__main.js	
|
|___dist
|	|__bundle.js
|
|___index.html
|
|___package.json
|
|___webpack.confing.js
|
|___package-lock.json

3.npn run xxx

npm run xxx映射的使用

解释：webpack命令映射了入口和出口，但是有些情况下，webpakc指令后面还需要加一堆很长的指令，
此时这个指令也可以被npm run xxx映射，映射写在package.json文件中

package.json文件代码如下
------------------------------------------
{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
需要在script中写映射命令，举个例子：此时执行npm run test执行的就是test映射的命令
------------------------------------------


------------------------------------------
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "bulid":"webpack"
  },
  此时执行npm run bulid 执行的就是webpack命令
------------------------------------------

npm run xxx 也可以映射其他命令

使用webpack命令和npm run xxx的区别
1.webpack命令：使用的是全局安装的webpack
2.npm run命令：使用的是本地安装的webpakc,没有则找全局
3.如何安装本地的webpack：使用"npm install webpack@3.6.0 --save-dev"命令

三、webpack的loader

注意：每安装一个loader都需要在webpakc.confing,js文件修改配置

1.使用loader处理css文件

  1. loader是什么：是webpack的一个核心概念，通过npm可以安装loader，不同的loader打包不同的文件
  2. 为什么使用loader：在一个项目中，不仅仅有js文件，还有css和img文件等等…，而最原始的webpack只支持打包js文件，此时使用loader可以对css，img，视频等进行打包，不同的文件使用不同
    的loader
  3. 如何使用loader对css文件进行打包
补充：webpack官网有使用教程

1.cmd进入文件夹，使用"npm install --save-dev css-loader"命令下载打包css文件的loader
注意：css的loader只负责打包加载css文件，不负责把样式渲染到页面

2.使用"npm install --save-dev css-loader"安装style的loader//style的loader负责把样式渲染到页面
注意：两个loader要和webpack版本对应

3.在webpack.confing.js文件里面配置两个loader，如下
------------------------------------------------------
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js"
  },
//这个module是style和css的loader配置
  module: {
    rules: [
      {
        test: /\.css$/,
        //webpack使用多个loader时是从右往左执行的，所以cssloader在右边
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}
4.创建一个css文件，并在main.js中导入。（不然我干嘛要下载loader？？）

5.使用npm run build 指令，使用之后会提示安装CLI，不安装无法生效。安装之后就可以js和css都可以生效了

最需要注意的就是webpakc和loader的版本对应问题，超级重要

目录结构最好js和css分离，此时的结构

webpakck的使用
|
|___src
|	|__css
|	|	|_myCss.css
|	|	
|	|__js
|	|	|_info.js
|	|	
|	|__main.js//文件的乳沟不需要写在js文件夹里
|
|___dist
|	|__bundle.js
|
|___index.html
|
|___package.json
|
|___webpack.confing.js
|
|___package-lock.json

梳理总结：
1.安装node
2.创建项目
3.终端进入项目，使用node的命令npm xxx 安装webpack
4.创建模块，就是在src/js下面写js代码，这些模块可能相互引用
5.创建主模块，即main.js
6.在css文件夹中写一下css
7.在主模块中导入css
8.创建webpack.config.js文件，写上出口和入口
9.出口需要时一个绝对路径，所以需要导入node模块path
10.初始化node模块："npm init"
11.此时生成package.json文件，在script标签映射指令，然后使用"npm install"导入文件依赖的所以包或者模块
12.安装css和style的loader
13.最后执行npm run xxx,此时会提示安装CLI，安装完成就可以了
14.把生成的js文件引入到index.html就可以使用了

2.使用loader处理图片视频等资源

  1. 遇到一个坑，webpack4之前的需要下载url-loader才能处理，后来我用的5，不需要装，直接就npm run可以使用
  2. webpack4以下需要装url-loader，但是当文件过大的时候又报错，需要装file-loader。limit来设置url-loader可处理的文件大小，大概就是这意思，我也没搞懂，反正最新版啥都不用装，用就完事了

四、webpack引入vue

  1. 引入vue的三种方式
1.文件夹引入
2.cdn
3.npm 安装

1.使用npm引入

  1. 首先使用指令npm install vue (可以直到版本)
  2. 在需要使用vue的文件夹导入，比如import Vue from "vue";
  3. 此时就可以使用vue了…吗？
  4. 此时还需要再webpakk.config.js配置，不然是不能用的
module.exports = {
  entry: "./src/main.js",

  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
   //配置这个
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}
//为什么要配置这个？
//因为vue其实是有两种版本的，一种是runtime only版本，一种是runtime compiler版本
//only版本不能编译template，compiler可以编译，这个例子中把div当成了template，而且
//默认使用的也是only版本，需要配置这个，换一下版本才能正常编译
-------------------------------
<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
-----------------------------------
import Vue from "vue";

const app = new Vue({
  el: "#app",
  data: {
    message: " this is message"
  }
});

五、.vue文件的使用

先看代码

index.html代码

<div id="app">
</div>
----------------------
js文件代码

import Vue from "vue";

const app = new Vue({
  el: "#app",
  template: `
  <div>
    <h1>{{message}}</h1>
  </div>
  `,

  data: {
    message: " this is message"
  }
});

/*
在一个vue实例中，同时存在template和el，编译后template的代码会替换el对应的html代码

为什么这样做？
解释：在真是开发中，index的代码时不会改变的，这样做是为了避免修改index.html的代码

*/

DOM图
在这里插入图片描述

第一次优化

template可以抽离成一个组件
----------------------------------------------
const App = {
  template: `
  <div>
    <h1>{{message}}</h1>
  </div>
  `,
  data () {
    return {
      message: " this is message"
    }
  }
}
//3.这些组件代码都可以单独写一个js文件导出，然后在需要使用的地方导入就可以
--------------------------------------------
import Vue from "vue";
const app = new Vue({
  el: "#app",
  //1.以前都是在html代码中的template使用组件，现在是在template属性里面使用，其实都是一样的
  //2.这个组件最终会替换el对应的html代码
  template: "<App/>",
  components: {
    App:App
  }
});
//4.如果把组件单独写了一个文件，可以在这里导入，这样就分离了，看起来不是很乱

第二次优化

下面是cpn.js文件代码

export default {
  template: `
  <div>
    <h1>{{message}}</h1>
  </div>
  `,
  data () {
    return {
      message: " this is message"
    }
  }
}

------------------------------------
下面是main.js文件代码

import Vue from "vue";
import App from "cpn.js"//导入组件并命名未App
const app = new Vue({
  el: "#app",
  template: "<App/>",
  components: {
    App:App
  }
});

第三次优化(重要)

此时发现cpn.js文件的template并没有分离，这就需要使用后缀为vue的文件来创建组件了
-----------------------------------------------------------
cpn.vue代码

<template>
    <div>
    <h1>{{message}}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: " this is message"
    }
  }
}
</script>

<style>
//这里写样式
</style>
-----------------------------------------------------------
main.js代码

import Vue from "vue";
import App from "./vue/cpn.vue"//从引入js文件到引入vue文件

const app = new Vue({
  el: "#app",
  template: "<App/>",
  components: {
    App: App
  }
});
---------------------------------------------------------
此时重新进行打包是不能运行的，因为多了一个vue文件，需要安装loader才可以
1. vue-loader 加载vue文件
2. vue-tempalte-compiler 编译vue文件
3. 使用命令：npm install vue-loader vue-tempalte-compiler --save-dev 
4.然后再webpack.config.js的module里配置vue-loader

注意：编译器和加载器需要一起安装，vue-loader13以上需要安装插件才能使用

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  },

  plugins: [
    new VueLoaderPlugin(),
  ],

}

六、Plugin的使用

解释：略

旺财飞飞飞
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中的webpack详解
Chil_G的博客
09-13 8446
内容概述 目录 认识webpack webpack的安装#webpack%E7%9A%84%E5%AE%89%E8%A3%85 webpack的起步 webpack的配置 loader的使用 webpack中配置Vue plugin的使用 搭建本地服务器 认识webpack 什么是webpack？ 我们先看看官方的解释： At its core, webpack is a static module bundler for modern JavaScript application.
vue初始化模板 vue init webpack命令下载的模板
09-13
执行vue init webpack 命令报错，连接超时是因为去github下载webpack-template 而很多公司屏蔽了github vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 使用步骤 1.c/users/xxxxx/...
前端优化中使用base64的优缺点
weixin_45766034的博客
10-09 2359
优点 （1）base64格式的图片是文本格式，占用内存小，转换后的大小比例大概为1/3，降低了资源服务器的消耗； （2）网页中使用base64格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。 缺点 （1）base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力； （2）网页加载图片虽然不用访问服务器了，但因为base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。 （3）base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css，这比直
Vue -- webpack使用
天行健 君子以自强不息，地势坤 君子以厚德载物。
05-21 733
1. Vue--webpack使用 本质上， webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle. Webpack是当下最热门的前端资源模块化管理和打包工具， 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到
Vue「一」—— webpack 的基本使用及常用配置
imByte的博客
11-17 1907
文章目录一、前端工程化1. 前端工程化概念 一、前端工程化 1. 前端工程化概念 模块化： js 的模块化、css 的模块化、资源的模块化 组件化：复用现有的 UI 结构、样式、行为 规范化：目录结构的划分、编码规范化、接口规范化、文档规范化、Git 分支管理 自动化：自动化构建、自动部署、自动化测试 ...
(万字) webpack搭Vue项目
游小北的博客
11-15 3562
1. 我们平时都是使用 vue-cli 脚手架快速搭建项目（vue-cli 基于 webpack），可是我们不知道其中的原理与细节，导致我们在遇到一些细节问题无法自己配置解决。 2. 为了让我们能更好的了解 vue-cli 实现过程，我们需要学习使用 webpack 从一个 index.html 文件从零开始创建一个完整的项目（包含 babel、样式预处理器、vue、webpack插件、dev-server、proxy代理等，各自有关的详细内容可翻看我的主页 3.重点是掌握使用 webpack
[Vue]---webpack的配置与使用
IT_qslong的博客
11-07 276
文章目录webpack概述webpack的基本使用配置打包文件的入口与出口配置webpack的自动打包功能配置html-webpack-plugin生成预览页面配置自动打包相关的参数webpack中的加载器通过loader打包非js模块loader的调用过程打包处理css文件打包处理less文件打包处理scss文件配置postCSS自动添加css的兼容前缀打包样式表中的图片和字体文件打包处理js文件中的高级语法 webpack概述 webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web开
VUE-webpack超详细教程
热门推荐
ICanWin_lll的博客
01-21 2万+
一.认识webpack 官网解释：从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 从模块化和打包两个角度来理解： 模块化： webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系，而且不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中都可以被当做模块来使用 打包: 合并成一个或多个包(Bundle),并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转
Vue_Webpack详解
qq_37534947的博客
03-31 1251
文章目录1.认识webpack2.webpack的安装3.webpack的起步4.webpack的配置5.loader的使用6.webpack中配置Vue7.plugin的使用搭建本地服务器 1.认识webpack webpack是一个现代的JavaScript应用的静态模块打包工具 1.模块化 2.打包 3.和grunt/gulp的对比 2.webpack的安装 3.webpack的起步 4.webpack的配置 5.loader的使用 6.webpack中配置Vue 7.plugin
webpack开发Vue配置
qq_33235582的博客
12-03 4559
在webpack的世界里，一张图片、一个css甚至一个字体，都成为模块（Module），彼此存在依赖关系，webpack就是来处理模块间的依赖关系的，并把它们进行打包。 webpack的主要适用场景是单页面富应用（SPA）。SPA通常是由一个html文件和一堆按需加载组成，它的html结构可能会非常简单，比如： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta
vue和webpack安装命令详解
12-11
一、安装vue相关命令 1、安装vue cnpm install vue  2、安装vue-cli cnpm install -g vue-cli...以上所述是小编给大家介绍的vue和webpack安装命令详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时
vue cli webpack中使用sass的方法
08-27
主要介绍了vue cli webpack中使用sass的方法,需要的朋友可以参考下
webpack使用Vue学习案例
08-25
webpack使用vue
vue init webpack 依赖的webpack包
09-05
解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题，方便在...2、执行vue init webpack your_vue_app --offline即可
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 396
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
vue2---修饰符
weixin_45503872的博客
04-24 1057
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 352
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
用Typescript写自动化工作流
最新发布
联蔚盘云的博客
04-29 682
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
vue vue init webpack
09-12
Vue CLI是一个官方提供的脚手架工具，用于快速搭建Vue.js项目。当你输入"vue init webpack"命令时，它会创建一个基于Webpack的Vue.js项目模板。 引用中提到了一个简单的webpack vue-loader模板，该模板不包含其他功能，可以帮助你快速搭建Vue的开发环境。而引用中提到的完整的webpack vue-loader模板则包含了更多功能，如热加载、语法检测和CSS扩展等。 在实际开发中，一般会选择使用webpack这个模板来搭建Vue项目。你可以使用以下命令来初始化项目： ``` vue init webpack my-vue-demo ``` 在初始化过程中，你可以设置项目的名称、描述和作者等信息。选择是否安装vue-router来使用Vue的路由插件，以及是否使用ESLint来限制代码错误和风格。如果需要安装单元测试和e2e测试工具，也可以选择相应的选项。 初始化完成后，你可以进入项目目录并运行以下命令来启动开发模式： ``` cd my-vue-demo npm run dev ``` 如果需要发布打包项目，可以运行以下命令： ``` npm run build ``` 以上是使用"vue init webpack"命令初始化Vue项目的基本步骤。更详细的文档可以在https://vuejs-templates.github.io/webpack找到。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值