nrm的安装使用
作用：提供了一些最NPM包镜像地址，能够让我们快速的切换安装包时候的服务请地址
什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样：
- 运行==npm i nrm -g==全局安装==nrm==包
- 使用==nrm ls==查看当前所有可用的镜像源地址以及当前所使用的镜像源地址
- 使用==nrm use npm==或==nrm use tacobao==切换不同的镜像源地址
如图所示：
在这里插入图片描述
注意：nrm只是单纯的提供了几个常用的下载包的url地址，并能够让我们在这几个地址之间，很方便的进行切换，但是，我们每次安装包的时候，使用的工具都是npm
Webpack
问题：
-
在网页中会引用哪些常见的静态资源？
-
JS
- .js .jsx .coffee .ts(TypeScript 类C# 语言)
-
CSS
- .css .less .sass .scss(.sass的更新版)
-
Images
- .jpg .png .gif .svg .bmp
-
字体文件（Fonts）
- .svg .ttf .eot .woff .woff2
-
模板文件
- .ejs .jade .vue【这是在webpack中定义组件的当时，推荐这么用】
-
-
网页中引入的静态资源多了以后有什么问题？
- 网页加载速度慢，因为我们要发起很多二次请求
- 要处理错综复杂的依赖关系
-
如何解决上述两个问题？
- 合并，压缩，精灵图，图片的Bass64编码
- 可以使用requireJS、也可以使用webpack各个包之间的错综复杂的依赖关系
-
什么是webpack？
- webpack是前端的一个项目构建工具，它是基于Node.js开发出来的一个前端工具
-
如何完美解决上述2种解决方案？
- 使用Gulp，是基于task任务的
- 使用webpack，是基于整个项目进行构建的
- 借助于webpack这个前端栽花构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能
利用“列表变色项目”了解webpack的使用
webpack的安装方式
使用npm，建议使用npm的源，全局安装
- 利用nrm：nrm ls查看当前所有的源和正在使用的源
- nrm use npm：切换源到npm
- npm install webpack -g
- npm insall webpack-cli -g
项目文件夹简介
-
src文件夹：源代码
- css文件夹
- js文件夹
- images文件夹
- index.html文件：网站首页
- main.js文件：这个文件是项目的js入口文件。一般来说，所有的导包都写在这里面
-
dist文件夹：完成后的产品级的内容
利用npm安装jquery
有了上面的一些文件夹之后，在项目文件夹内：
- npm init -y
- npm install jquery -g
然后在项目文件夹下就会有：
- node_modules文件夹（这里面就会有常用的包，包括上面安装的jquery）
- package-lock.json文件
- package.json文件
注意：不推荐在index.html中引用任何包和任何css文件。可以把所有的东西都在main中去写，将来，页面直接引用一个main即可
index.html文件的内容
<!-- index是网站的首页 -->
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<!-- <script type="text/javascript" src="./main.js"></script> -->
<!-- 因为main中的代码涉及到了ES6中的新语法，浏览器不识别，所以不能直接引用 -->
<!-- 通过webpack这个前端构建工具，把main.js做了一下处理，生成了bundle.js文件 -->
<!-- 需要将其引入文件中 -->
<script type="text/javascript" src="./dist/bundle.js"></script>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
</ul>
</body>
</html>
main.js文件
// 这个main.js是我们项目的入口文件
// 1. 导入jquery
import $ from 'jquery'
// 由于ES6的语法太高级了，浏览器解析不了，所以这一行执行会出问题
// 需要使用webpack对这个文件进行处理
// 凡是浏览器不能识别的文件，都需要用webpack对其进行处理，处理过后浏览器就可以识别了
$(function(){
// 入口函数
$('li:odd').css('backgroundColor','lightblue')
$('li:even').css('backgroundColor',function(){
return '#' + 'D97634'//在函数内部拼接出一个16进制的颜色值
})
})
使用webpack对main.js文件进行处理的截图【当时dist文件夹的路径错了，应该是和src同一级别】
在这里插入图片描述
在main.js中导入jquery的方法：==import 符号来接收
【注意：import from是ES6中导入其他模块的方式】
效果图：
在这里插入图片描述
经过刚才的演示：webpack可以做什么事情？
- webpack能够处理js文件中的互相依赖关系（即：整个网站，只要有一个main.js就行了，在main.js中导入自己想要的任何包，然后用webpack处理后就只有一个js）
- webpack能够处理js的兼容问题，把高级的浏览器不识别的语法转为低级的浏览器能识别的语法
- 利用webpack处理浏览器不能识别的文件的命令：==webpack 要处理的文件名 -o 处理后的文件名（注意指定路径）==
webpack最基本配置文件的使用
在项目文件文件夹下，新建文件：webpack.config.js，里面的内容与说明如下：
const path = require('path')
module.exports = {
// 这是node里面的语法
// webpack是基于node来构建的，能够写任何node规范的语法
// 这个配置文件，其实就是一个js文件，通过node中的模块操作，向外暴露了一个配置对象
// 在这个配置文件中，需要手动指定 入口 和 出口，即webpack xxx -o xxx中前面的文件和后面的文件
entry: path.join(__dirname, './src/main.js'),//入口，表示要使用的webpack打包哪个文件
output:{ //输出文件的相关配置
path:path.join(__dirname, './src/dist'),//指定打包好的文件要输出到哪个路径中去，这里因为开始dist文件夹路径错了（应该和src同一级别），所以这里将错就错
filename:'bundle.js',//指定输出的文件的名称
}
}
// 有了这个配置文件：在命令行中直接输入webpack就能够直接对main.js文件进行处理，输出为bundle.js
当我们在控制台，直接输入webpack命令执行时，webpack做了以下几步：
- 首先，webpack发现，我们并没有通过命令的形式，给它制定入口和出口
- webpack就会去项目的根目录中，，查找一个叫做webpack.config.js的配置文件
- 当找到配置文件后，webpack会去解析执行这个配置文件，解析执行完后，就得到了配置文件中，导出的配置对象
- 当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建
webpack-dev-server的基本使用
因为每次修改代码后，都需要自己手动运行webpack进行处理，太麻烦，我们希望webpack能够自己监听我们代码的改变并自己进行处理
使用webpack-dev-server这个工具，就能够实现自动打包编译的功能
- 运行npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖，也可以直接使用cnpm
- 安装完毕后，这个工具的用法，和webpack命令的用法完全一样
- 由于我们是在项目中本地安装的webpack-dev-server，所以我们无法把它当作脚本命令，在shell终端中直接运行（只有安装到全局-g的工具才能在终端中正常执行）
- 在package.json中的“scripts“项下，添加=="dev":webpack-dev-server"==
- 然后在命令行输入：==npm run dev==，webpack就会一直运行监听我们文件的更改，一旦有了更改，就会自动编译
注意：
- 每次自动编译后，可以通过localhost:8080，然后点击src查看项目
- 我们在文件中引入的是==../dist/bundle.js==，但是编译生成的js是根目录下的bundle.js，所以无法生效。要使更改生效，就需要将文件中的引入dist下的js更改为引入根目录下的js，即==/bundle.js==
- webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘，而是直接托管到了电脑的内存中，所以我们在项目的根目录中，根本找不到bundle.js文件
- webpack-dev-server这个工具，如果想要正常运行，要求，在本地项目中，必须安装webpack
网友评论