webpack、vue-cli是什么、创建项目结构分析

最新推荐文章于 2024-06-10 15:05:54 发布

喵俺第一专栏

最新推荐文章于 2024-06-10 15:05:54 发布

阅读量886

点赞数 2

分类专栏： # Vue总结文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/dengfengling999/article/details/126064280

版权

Vue总结专栏收录该内容

43 篇文章 3 订阅

订阅专栏

当前web开发面临的困境
1. 文件依赖关系错综复杂
2. 静态资源请求效率低
3. 模块化支持不友好
4. 浏览器对高级JavaScript特性兼容度较低
Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

1.webpack是什么？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

是一个模块化打包工具，将不同的资源和文件，进行打包，合并在一个文件里。

2、为什要使用WebPack

今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

.........

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

3、WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

优点：模块化

在webpack看来一切都是模块！这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。

1、CSS

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

需要分别安装：npm install --save-dev style-loader css-loader

2、CSS modules

在过去的一些年里，JavaScript通过一些新的语言特性，更好的工具以及更好的实践方法（比如说模块化）发展得非常迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，且基于优化工具，依赖管理和加载管理可以自动完成。
不过前端的另外一部分，CSS发展就相对慢一些，大多的样式表却依旧是巨大且充满了全局类名，这使得维护和修改都非常困难和复杂。

最近有一个叫做 CSS modules 的技术就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所需要做的一切就是把”modules“传递都所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中具有相同的类名可能会造成的问题。具体的代码如下

这样相同的类名也不会互相污染

二、webpack-pulgins

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

1、如何使用插件？

要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组），我们添加了一个实现版权声明的插件。如HtmlWebpackPugin插件，

该插件的作用是依据一个简单的模板，帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。

//安装

npm install --save-dev html-webpack-pugin

2.作用

（1）重新加载编译，将浏览器不认识的语法编译成浏览器认识的语法。less编译成css,ES6语法转换成ES5。

（2）减少io请求。发送请求，会发挥一个html到浏览器，这是，打开控制台会发现html页面通过script,link等标签引用的静态，浏览器会再次发出请求去获取这些资源。如何webpack打包，将所有的静态资源都合并好了，减少了io请求。

2.vue-cli是什么？

vue-cli 是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，分为vue init webpack-simple 项目名和vue init webpack 项目名两种。

首先你的安装vue，webpack，node等一些必要的环境

vue init webpack-simple 生成项目，项目目录为：

vue init webpack生成项目，项目目录为：

当然生成之后项目肯定是不能运行的，为什么呢？因为很多依赖并没有安装（package.json就是你项目所有的依赖声明）

（这些命令安装成功之后也会提示，这非常好。）

cd projectname （定位到这个项目）

输入命令 npm install 来安装项目所需要的依赖。

安装成功之后

输入命令："npm - run - dev" 命令来运行项目。

而命令--"npm-run-bulid" 是执行发布的。

最后运行，如果出现这样的界面，你就成功了。

3.项目结构分析：

一、main.js是我们的入口文件，主要作用是初始化vue实例，并引入所需要的插件

main.js为vue项目的入口文件，加载了各种公共组件(需要引用和初始化组件实例)。比如app.vue

main.js中引入相关资源文件

引入Vue实际完整写法是 import Vue from "…/node_modules/vue/dist/vue.js，即从node_modules中加载相应名称的模块

import App from './App’就是引入同目录层次下的App.vue文件

import router from ‘./router’，引入路由文件

初始化组件实例

其中new Vue的参数，解释如下：

el：官方解释为实例提供挂载的元素。此处为index.html中的

router：为router:router,的简写，指向引入文件中的routes:[]

components：注册哪些组件，需在顶部引入文件。

template：替换挂载元素的模板组件，而挂载元素的内容都将被忽略。即用template替换index.html里面的

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

二、App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。可以理解为所有的路由router也是App.vue的子组件。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

三、index.html文件入口

index.xml为vue项目默认首页，里面默认引用了app.vue根组件

四、src放置组件和入口文件

五、node_modules为依赖的模块

六、config中配置了路径端口值等

七、build中配置了webpack的基本配置、开发环境配置、生产环境配置等

八：Index.js: index.js路由文件

内容主要包含引入相关资源以及初始化路由两部分

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用

喵俺第一专栏

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
webpack、vue-cli是什么、创建项目结构分析

Webpack从一开始就对CSS模块化提供了支持，在CSSloader中进行配置后，你所需要做的一切就是把”modules“传递都所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中具有相同的类名可能会造成的问题。其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。...
复制链接

扫一扫