程序员

webpack，http整理篇

2020-06-09  本文已影响0人  Taco_King

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

const path = require('path');
module.exports = {
  // 单/多入口 entry: string|Array<string>|{[entryChunkName: string]: string|Array<string>} 
  entry: './src/index.js',   // 或 entry: {main: './src/index.js'}
  // 输出 output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'my-first-webpack.bundle.js'
  },
  // loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      }
    ]
  },
  // 插件可用于打包优化，资源管理，注入环境变量等
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ],
  // 模式，4.0版本新增， development|production|none
  mode: 'production',  //默认
  // 开发服务器配置
  devServer: {
    index: 'index.html',
    lazy: true,  // 懒惰模式，不监视任何文件修改
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    host: '0.0.0.0',
    hot: true
  }
};

grunt，gulp，webpack

前端工程化的早期，主要是解决重复任务的问题。Grunt、Gulp就是其中代表。比如: 压缩、编译less、sass、地址添加hash、替换等，而如今的Webpack更像一套前端工程化解决方案。利用强大插件机制，解决前端静态资源依赖管理的问题。

 Grunt和Gulp属于任务流工具Tast Runner，Gulp吸取了Grunt的优点，拥有更简便的写法，通过流（Stream）的概念来简化多任务之间的配置和输出，让任务更加简洁和容易上手；webpack属于模块打包工具 Bundler

Webpack作者Tobias回复与 Grunt Gulp NPM脚本的比较

Grunt与Gulp性能比较

// Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    // js格式检查任务
    jshint: {
      src: 'src/test.js'
    }
    //  代码压缩打包任务
    uglify: {}
  });
  // 导入任务插件
  grunt.loadnpmTasks('grunt-contrib-uglify');
  // 注册自定义任务, 如果有多个任务可以添加到数组中
  grunt.regusterTask('default', ['jshint'])
}

// gulpfile.js
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');

// 代码检查任务 gulp 采取了pipe 方法，用流的方法直接往下传递
gulp.task('lint', function() {
  return gulp.src('src/test.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// 压缩代码任务
gulp.task('compress'， function() {
  return gulp.src('src/test.js')
    .pipe(uglify())
    .pipe(gulp.dest('build'));
});

// 将代码检查和压缩组合，新建一个任务
gulp.task('default', ['lint', 'compress']);

运行机制

Gulp vs Grunt

http

概念：超文本传输​​协议（HTTP）是一个用于传输超媒体文档（例如 HTML）的应用层协议。它是为 Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其他目的。HTTP 遵循经典的客户端-服务端模型，客户端打开一个连接以发出请求，然后等待它收到服务器端响应。HTTP 是无状态协议，这意味着服务器不会在两个请求之间保留任何数据（状态）。该协议虽然通常基于 TCP/IP 层，但可以在任何可靠的传输层上使用；也就是说，不像 UDP，它是一个不会静默丢失消息的协议。RUDP——作为 UDP 的可靠化升级版本——是一种合适的替代选择

http特性：

1.HTTP 是无连接无状态的

2.HTTP 一般构建于 TCP/IP 协议之上，默认端口号是 80

3.HTTP 可以分为两个部分，即请求和响应。

http请求：

常见的状态码：

在浏览器地址栏输入URL之后回车的过程

http与https的区别

  1. https协议需要到ca申请证书，一般免费证书较少，需要付费
  2. http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议
  3. http默认80端口，https默认443端口
  4. http是无状态连接；https协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，安全性更高

缓存 SessionStorage，localStorage，Cookie

存储方式

存储大小

过期时间

作用域

上一篇下一篇

猜你喜欢

热点阅读