VueJs（十五）

最新推荐文章于 2022-04-25 13:13:21 发布

mwwb

最新推荐文章于 2022-04-25 13:13:21 发布

阅读量87

点赞数

分类专栏： VueJS 文章标签： vue

本文链接：https://blog.csdn.net/qq_43278421/article/details/107915071

版权

VueJS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

今天开始学习webpack

这是当前比较热门的js应用程序的模块打包工具

它依赖于node.js和NPM

前端自动化工程主要解决以下问题：

js、css代码的合并和压缩
css预处理：less、sass、Stylus的编译
生成雪碧图（css sprite）
ES 6转ES 5
模块化

webpack打包后的代码已经不是你的代码，其中夹杂了更多webpack自身的模块处理代码

这部分内容最重要的是编译这个概念

各种格式的文件通过特定加载器编译后最终统一称为js，css，png等静态资源文件

在webpack中，一张图片，一个css，一个字体都称为模块，彼此存在依赖关系

举个例子，平时加载CSS大多通过<link>标签引入css文件，而在webpack中，直接在一个.js文件中导入
比如：

import 'src/styles/index.css';

平时的话.js文件和.css应该是同一地位的，都是html文件的导入对象
上面的语句也可以写成
require(‘src/style/index.css’);

在打包的时候，index.css会被打包进一个js文件里面，通过动态创建<style>的形式来加载css样式，在打包编译的时候把所有css都提取出来，生成一个css的文件

webpack的使用场景是单页面富应用（spa）
SPA通常是有一个html文件和一堆需要加载的js组成，它的html结构可能会非常简单


<head>
      <link rel="stylesheet" href="dist/main.css">
</head>

<body>
     <div id="app"></div>
     <script type="text/javascript" src="dist/main.js"></scicpt>
</body>

只有一个div节点，所有的代码都集成在了main.js中

export和import
这两个是用来导入和导出模块的
一个模块就是一个js文件，它拥有独立的作用域，里面定义的变量外部是无法获取的
下面是将一个配置文件作为模块导出

导出使用export

//config.js

var Config = {
      version:'1.0.0'
};
export {Config };

或者

//config.js
export var Config = {
     version:'1.0.0'
};
                             //差不多就是定义了一个变量然后用export

然后使用import导入

//main.js

import {Config}  from  './config.js';
import {add}   from  './add.js';

console.log(Config);  // {version:'1.0.0'}
console.log(add(1,1));    //2

以上的示例，导入的模块名称都是在export的文件中设置的，也就是说用户必须预先知道这个名称叫什么，比如Config、add，默认的模块可以使用export default来输出
示例代码如下：

//config.js
export default{
      version:  '1.0.0'
};

//add.js
export default function(a,b){
    return a+b;
};

mwwb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VueJs（十五）

今天开始学习webpack这是当前比较热门的js应用程序的模块打包工具它依赖于node.js和NPM前端自动化工程主要解决以下问题：js、css代码的和平和压缩css预处理：less、sass、Stylus的编译生成雪碧图（css sprite）ES 6转ES 5模块划webpack打包后的代码已经不是你的代码，其中夹杂了更多webpack自身的模块处理代码这部分内容最重要的是编译这个概念各种格式的文件通过特定加载器编译后最终统一称为js，css，png等静态资源文件在webpack
复制链接

扫一扫

专栏目录