nrm与webpack的使用

2019-09-29  本文已影响0人  jxvl假装

nrm的安装使用

作用：提供了一些最NPM包镜像地址，能够让我们快速的切换安装包时候的服务请地址

什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样：

  1. 运行==npm i nrm -g==全局安装==nrm==包
  2. 使用==nrm ls==查看当前所有可用的镜像源地址以及当前所使用的镜像源地址
  3. 使用==nrm use npm==或==nrm use tacobao==切换不同的镜像源地址

如图所示：


在这里插入图片描述

注意：nrm只是单纯的提供了几个常用的下载包的url地址，并能够让我们在这几个地址之间，很方便的进行切换，但是，我们每次安装包的时候，使用的工具都是npm

Webpack

问题：

  1. 在网页中会引用哪些常见的静态资源？

    1. JS

      • .js .jsx .coffee .ts(TypeScript 类C# 语言)

    2. CSS

      • .css .less .sass .scss(.sass的更新版)

    3. Images

      • .jpg .png .gif .svg .bmp

    4. 字体文件（Fonts）

      • .svg .ttf .eot .woff .woff2

    5. 模板文件

      • .ejs .jade .vue【这是在webpack中定义组件的当时，推荐这么用】

  1. 网页中引入的静态资源多了以后有什么问题？

    1. 网页加载速度慢，因为我们要发起很多二次请求
    2. 要处理错综复杂的依赖关系

  2. 如何解决上述两个问题？

    1. 合并，压缩，精灵图，图片的Bass64编码
    2. 可以使用requireJS、也可以使用webpack各个包之间的错综复杂的依赖关系

  1. 什么是webpack？

    • webpack是前端的一个项目构建工具，它是基于Node.js开发出来的一个前端工具

  2. 如何完美解决上述2种解决方案？

    1. 使用Gulp，是基于task任务的
    2. 使用webpack，是基于整个项目进行构建的
    3. 借助于webpack这个前端栽花构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能

利用“列表变色项目”了解webpack的使用

webpack的安装方式

使用npm，建议使用npm的源，全局安装

  1. 利用nrm：nrm ls查看当前所有的源和正在使用的源
  2. nrm use npm：切换源到npm
  3. npm install webpack -g
  4. npm insall webpack-cli -g

项目文件夹简介

  1. src文件夹：源代码

    • css文件夹
    • js文件夹
    • images文件夹
    • index.html文件：网站首页
    • main.js文件：这个文件是项目的js入口文件。一般来说，所有的导包都写在这里面

  2. dist文件夹：完成后的产品级的内容

利用npm安装jquery

有了上面的一些文件夹之后，在项目文件夹内：

  1. npm init -y
  2. npm install jquery -g

然后在项目文件夹下就会有：

  1. node_modules文件夹（这里面就会有常用的包，包括上面安装的jquery）
  2. package-lock.json文件
  3. 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 from 'jquery'==，表示从node_modules中导入jquery包，并使用符号来接收
【注意：import from是ES6中导入其他模块的方式】

效果图：


在这里插入图片描述

经过刚才的演示：webpack可以做什么事情？

  1. webpack能够处理js文件中的互相依赖关系（即：整个网站，只要有一个main.js就行了，在main.js中导入自己想要的任何包，然后用webpack处理后就只有一个js）
  2. webpack能够处理js的兼容问题，把高级的浏览器不识别的语法转为低级的浏览器能识别的语法
  3. 利用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做了以下几步：

  1. 首先，webpack发现，我们并没有通过命令的形式，给它制定入口和出口
  2. webpack就会去项目的根目录中，，查找一个叫做webpack.config.js的配置文件
  3. 当找到配置文件后，webpack会去解析执行这个配置文件，解析执行完后，就得到了配置文件中，导出的配置对象
  4. 当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建

webpack-dev-server的基本使用

因为每次修改代码后，都需要自己手动运行webpack进行处理，太麻烦，我们希望webpack能够自己监听我们代码的改变并自己进行处理

使用webpack-dev-server这个工具，就能够实现自动打包编译的功能

  1. 运行npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖，也可以直接使用cnpm
  2. 安装完毕后，这个工具的用法，和webpack命令的用法完全一样
  3. 由于我们是在项目中本地安装的webpack-dev-server，所以我们无法把它当作脚本命令，在shell终端中直接运行（只有安装到全局-g的工具才能在终端中正常执行）
  4. 在package.json中的“scripts“项下，添加=="dev":webpack-dev-server"==
  5. 然后在命令行输入：==npm run dev==，webpack就会一直运行监听我们文件的更改，一旦有了更改，就会自动编译

注意：

  1. 每次自动编译后，可以通过localhost:8080，然后点击src查看项目
  2. 我们在文件中引入的是==../dist/bundle.js==，但是编译生成的js是根目录下的bundle.js，所以无法生效。要使更改生效，就需要将文件中的引入dist下的js更改为引入根目录下的js，即==/bundle.js==
  3. webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘，而是直接托管到了电脑的内存中，所以我们在项目的根目录中，根本找不到bundle.js文件
  4. webpack-dev-server这个工具，如果想要正常运行，要求，在本地项目中，必须安装webpack
上一篇下一篇

猜你喜欢

热点阅读