webpack&&linux

2018-07-13 本文已影响0人 tency小七

１．　为什么需要模块化
如果有下面这种情况

util.js文件里面定义了下面这个函数

    function getFormatDate(a,b){
      return a+b;
    }

a-util.js中需要用到util.js里面的getFormatDate这个函数

    function aGetFormatDate(c){
      return　aGetFormatDateFormatDate(2,c);
    }

a.js里面需要用到a-util里面的aGetFormatDate()这个函数

    function get(){
      console.log(aGetFormatDate(7));
    }

如果我们采用原始的方法，用

    <script src="util.js"></script>
    <script src="a-util.js"></script>
    <script src="a.js"></script>

会出现这样的问题：
因为用<script>标签是按顺序加载的，必须保证a-util.js在util.js后面，函数中变量必须是全局变量，这样才能暴露出来给其他函数使用，容易造成全局变量污染。

而且当你只需要a.js的时候，你只知道依赖a-util.js，你不知道需要依赖util.js，还是会出现错误。你必须很清楚他们之间的依赖关系。

当使用模块化的时候，就不会有这样的问题。

      util.js
      export{
      getFormatDate:function(a,b){
                    return a+b}}  //将你要暴露的函数暴露出来

      a-util.js
      var getFormatDate=require('util,js')//引用所依赖的文件，取到你要用的函数
      export{
      aGetFormatDate:function(c)       
              return getFormatDate(2,c);
                }
       }

    a.js
    var aGetFormatDate=require('a.js')//引用所依赖的文件'a,js'，取到要用的函数aGetFormatDate
    console.log(aGetFormatDate(7));

这个时候我们只要直接引用 <script src="a.js"></script>这个最表面的ｊｓ文件即可，其他根据依赖关系自动加载。

每个ｊｓ文件都知道自己依赖什么其他文件，让他们自动加载即可　
而且也不用做成全局变量
ＡＭＤ　中ｒｅｑｕｉｒｅ．ｊｓ规范

image.png

要下载ｒｅｑｕｉｒｅ．ｍｉｎ．ｊｓ这个包，再引入入口文件，也就是我们看到的最表层的文件，ｍａｉｎ．ｊｓ

看一下我们的ｒｅｑｕｉｒｅ实例

image.png

不需要依赖任何一个其他文件的ｕｔｉｌ

image.png
需要依赖ｕｔｉｌ的ａ－ｕｔｉｌ

image.png

最后在控制台打印出４

ＡＭＤ是异步加载Ｃｏｍｍｏｎｊｓ是一次性全部加载

在html网页中，浏览器通过<script>标签加载js脚本。

ES6模块允许内嵌在网页中，也就是在＜ｓｃｒｉｐｔ＞标签里面，语法行为与加载外部脚本一致；
如下：

    <script type="module"> 
    import utils from "./utils.js"; // other code
    </script>

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

本机开启

image.png

主要命令为：

      cnpm install http-server -g　　／／开启服务
      http-server -p 8088　　　／／选择端口

关于ｗｅｂｐａｃｋ的配置

自己新建一个webpack.config.js文件
在里面进行入口文件和输出文件的设置

    const path = require("path")  //定义一个路径，这个是一定要写的，可以不用管他,就当作是我们这一整个webpack项目的位置

    module.exports={

    entry:path.join(__dirname,"src/script/main.js"),  //设置了程序的入口.就在这个项目src下面的script下面的main.js,注意dirname前面是__

    output:{

    filename:"bundle.js",    //输出的文件名为bundle.js

    path:path.join(__dirname,"dist")     //设置了输出文件名的路径，在本项目的dist文件夹下面，没有的话webpack会自己建的
     }
  }
    //module.exports就要要想外界暴露的部分，外面的人可以根据这个来进行操作

简而言之，构建一个ｗｅｂｐａｃｋ应用的步骤如下：
１.　新建一个文件夹，这里我给他起个名字叫　web
２.　在web的路径下用命令行
　　cnpm install webpack --save-dev　　／／我已经用淘宝镜像了ｃｎｐｍ
３.　自己新建ｗｅｂｐａｃｋ．ｃｏｎｆｉｇ．ｊｓ定义入口和出口文件
４.　弄个ｊｓ文件什么的打包
在web的路径下用命令行
　　　webpack
就可以了

打包出来的ｂｕｎｄｌｅ．ｊｓ为什么有那么多乱七八糟的内容？
只要是为了封装ｊｓ，使其支持ｃｏｍｍｏｎｊｓ的模块化
ｃｏｍｍｏｎｊｓ是要依赖于ｎｏｄｅｊｓ　ｗｅｂｐａｃｋ的

image.png

调用的时候是这样的
上面的这个文件名叫ａ－ｕｔｉｌ
引用出来的对象的名字是ａＵｔｉｌ
看两张图好好感受一下

image.png

0713

commonjs中：
module对象：在每一个模块中，module对象代表该模块自身。
export属性：module对象的一个属性，它向外提供接口。

实例：
建立了一个模块，向外面暴露出f1函数

image.png

    module.exports = {
    f1:function(){
    console.log(1234);
    }
}

image.png

var util=require('./util.js');
util.f1();

用webpack命令打包之后，可以index页面的控制台打印出1234
成功
文件目录如下：

image.png

如何用webpack压缩js代码

首先在webpack.config.js中引入

 const uglify = require('uglifyjs-webpack-plugin');

2.然后在entry和output后面加上

  plugins:[
    new uglify()
 ]

image.png

然后再执行“webpack”命令编译一下

image.png

被压缩啦

webpack都做了哪些事情？

模块化
打包依赖
webpack支持commonjs,如果没有模块化，用<script>标签引入，我们要完全搞清楚每个模块之间的依赖关系，要保证你依赖的js文件在你这个文件的前面，搞错一个依赖关系就完蛋，而且要定义很多全局变量，会造成全局变量污染。
webpack的理念就是一切皆模块，把那一大堆css,js在我的一个总入口文件require引入，剩下的事情webpack会自动处理，包括所有模块的前后依赖关系去下载啊处理

压缩Js代码
先了解一下Webpack从构建到输出文件结果的过程：
1.解析配置参数，合并从shell传入和webpack.config.js文件的配置信息，输出最终的配置信息
2.注册配置中的插件，好让插件监听webpack构建生命周期中的事件节点，做出对应的反应
3.解析配置文件中entry入口文件，并找出每个文件依赖的文件，递归下去
4.在递归每个文件的过程中，根据文件类型和配置文件中loader找出相对应的loader对文件进行转换
5.递归结束之后得到每个文件最终的结果，根据entry配置生成代码chunk
6.输出所有chunk到文件系统

linux常见命令

windows系统下面可以直接用git bash,命令就是shell命令
mkdir src在当前目录下面新建一个名字叫src文件夹
ls 查看当前路径下面的文件夹
ll 跟ls差不多，比ls详细一点
vi a.js 如果a,js不存在就新建，如果存在就编辑
这个是文本编辑器，执行这个命令之后会进入编辑页面，要先按 i 才能进入输入模式，按esc就又不在输入模式下面了。
比如在编辑完了就按esc，然后再输入:w(这个是显示在下面的）,w是保存
：q 是退出。
cat a.js 不用进入编辑模式就是查看文本内容
head a.js 不用进入编辑模式就是查看文本的前部分内容
tail a,js 不用进入编辑模式就是查看文本的前部分内容
head -n 1 a.js 查看第一行内容
tail -n 2 a.js 查看后面两行内容
grep "2" a.js 在a.js里面寻找有2的内容
rm a.js 对某个文件进行删除
mv a.js src/a.js 将a.js移动到src文件夹下面

项目的上线回滚过程：

将测试完成的代码提交到git版本库的master分支
将当前服务器的代码全部打包并记录版本号，备份
将master分支的代码提交覆盖到线上服务器，生成新版本号

回滚流程要点：

将当前服务器的代码打包并记录版本号，备份
将备份的上一个版本号解压，覆盖到线上服务器，并生成新的版本号

输入url到浏览器出现相关页面，这中间发生了什么

浏览器将域名发给DNS服务器进行解析，然后DNS返回给浏览器对应的IP地址。
浏览器向这个IP的机器发送HTTP请求（建立在TCP连接上面）
服务器收到，处理并且返回http请求
浏览器得到返回内容
浏览器渲染页面的过程

根据HTML结构生成DOM TREE
根据CSS生成CSSOM（结构化处理形成CSS对象模型）
将CSSOM和DOM整合起来形成RenderTree(渲染树）
浏览器根据RenderTree进行渲染展示
遇到<script>会执行并且阻塞渲染，因为js有能力改变dom,不能一边渲染一边改变dom，浏览器会混乱的。

webpack&&linux

webpack都做了哪些事情？

linux常见命令

猜你喜欢

热点阅读