现代前端 --- 各种问题解答

在网页中会引用哪些静态资源

• JS文件

.js .jsx .coffee .ts

浏览器只能解析运行js文件，其他后缀只能通过编译器编译成js文件，浏览器才能识别

• CSS文件

.css .less .sass(已废弃) .scss

浏览器只能解析css文件，其他后缀只能通过编译器编译成css文件，浏览器才能识别

• 图片文件

.png .jpg .jpeg .bmp .svg .gif

• 字体图标文件

.ttf .svg .eot .woff .woff2

• 模板文件

.ejs .jade（太别扭） .vue【在webpack中定义组件的方式，推荐这样用】

npm 全局安装与局部安装之间区别

全局安装

• 安装命令

npm i xxx -g

• 安装位置

安装在node目录下node_modules目录中

1. npm install -g @vue/cli 安装vue包到 node安装目录/node_modules

2. 查找vue包的package.json中的bin属性。

3. 将vue命令的执行文件添加到 `/usr/locla/bin`中。

4. 在命令行中执行 `vue create vue-test`，命令被识别。

• 模块命令与执行

直接在命令行中执行模块命令

• 模块导入

import axios from 'axios'

局部安装

• 安装命令

生产环境：npm i xxx -S
开发环境：npm i xxx -D

• 安装位置

模块安装在某个项目的node_moduels目录下，推荐使用这种方法，这样就不会因为升级，带来版本兼容问题

• 模块命令与执行

在这个项目中直接执行包中的命令，就会发现控制台报错，告诉你这个命令找不到。这时候有两个解决方法：

1、使用npx执行：npx出现主要解决的问题就是调用项目内部安装的模块命令
2、在package.json文件中配置：

"scripts": {
    "包命令": "包命令"
}
在本地安装一个包之后，这个包的命令会被添加到项目的`node_modules/.bin`文件中。

• 模块导入

与全局安装一样

模块化

webpack

目的

1、文件的压缩合并混淆
2、解决语法兼容性问题
3、性能优化

安装与基本配置

• 安装

// 使用npm来初始化一个项目
npm init -y

// 安装webpack
npm i webpack webpack-cli -D

// 在项目根目录中创建webpack.config.js配置文件
module.export = {
    mode: 'development'
}

JS文件中导入CSS文件

• 传统动态导入css文件

使用js动态插入<link>标签，全局作用

<script> 
    var new_element = document.createElement('link');
    new_element.setAttribute('rel', 'stylesheet');
    new_element.setAttribute('href', 'main.css');
    document.body.appendChild(new_element); 
</script>

• webpack中模块化导入css文件

把css文件作为模块导入，也是全局作用

import '@/css/xxx.css'

原理也是把css文件内容导到html文件的<style></style>标签中，或者导到<link></link>标签