webpack开发环境配置

“webpack-cli”: “^3.3.11”,

“webpack-dev-server”: “^3.10.3”,

}

}

二、配置入口文件 index.js并导入样式图片是在less文件中作为背景图片导入的

import ‘…/media/iconfont.css’

import ‘…/css/index.less’

import ‘…/css/style.css’

三、设置webpack.config.js文件

webpack.config.js的文件的设置主要分为以下五步：

1、入口（entry）

2、输出（output）

3、模块包设置（module）

4、插件（plugins）

5、打包模式（mode)

// webpack配置文件

// 所有的构建工具都是基于nodejs平台运行的。模块化默认采用commonjs

const path = require(‘path’); //导入path模块

const HtmlWebpackPlugin = require(“html-webpack-plugin”) //引入插件，用于直接生成html文件

module.exports = {

// webpack配置

//1、 入口

entry:‘./src/index.js’,

//2、输出

output:{

// 输出文件名

filename:‘built.js’,

// 输出路径

path:path.resolve(__dirname,‘build’)

},

//3、 loader的配置 使用方式 ：先下载后使用

module:{

// 设置配置规则

rules:[

// 配置处理样式文件loader

{

test:/.(css|less)$/,//匹配哪些文件

// 使用的处理文件的loader，执行顺序从下到上，从右到左进行解析

use:[

// 配置处理样式文件需要的loader

‘style-loader’,

‘css-loader’,

‘less-loader’

]

},

// 配置处理图片文件loader

{

test:/.(jpg|png|gif|jpeg)$/, //正则匹配图片

loader:‘url-loader’, //处理图片的loader

options:{

limit:8*1024,// 图标小于8kb，就会被base64进行处理

esModle:false,//关闭url-loader的es6模块化，使用commonjs解析

name:‘[hash:10].[ext]’ //给图片重命名，[hash:10]表示重命名hash的长度，.[ext]表示使用图片的默认后缀名

}

},

// 配置其他文件处理loader

{

exclude:/.(css|html|js|less|jpg|png|gif|jpeg)$/, //排除这样的后缀名的文件

loader:‘file-loader’, //使用的loader

options:{

name:‘[hash:10].[ext]’,

}

}

]

},

//4、 插件配置 使用方式：先下载然后引用最后使用

plugins:[

// 插件配置的信息

new HtmlWebpackPlugin({

template:‘./src/index.html’

})

],

//5、 模式

mode:‘development’ ,//配置为开发环境

// mode:“production” //配置为生产环境

// 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）

// 特点：只会在内存中编译打包，不会有任何输出

devServer:{

contentBase:path.resolve(__dirname,‘build’),//项目构建后的路径

compress:true, //启动gzip压缩

port:4000, //服务器的端口号

open:true //自动打开服务器

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法