1.html-webpack-plugin Simplifies creation of HTML files to serve your webpack bundles.   主页地址: https://github.com/jantimon/html-webpack-plugin   安装方法: npm i --save-dev html-webpack-plugin   2.extract-text-webpack-plugin Extracts text from a bundle in

Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+

初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活,以适应各种应用场景,当然也大大增加了webpack的复杂性,在webpack运行的生命周期中会广播出许多事件,plugin可以hook这些事件,在合适的时机通过webpack提供的API改变其在处理过程中的输出结果. 描述 webpack是一个现代JavaScript应用程序的静态模块打包器module bundler,当webpack处理应用程序时,它会递归地构建一个依赖关系图dependency gra

前端 webpack http://www.cnblogs.com/lvdabao/

插件向第三方开发者提供了 webpack 引擎中完整的能力.使用阶段式的构建回调,开发者可以引入它们自己的行为到 webpack 构建流程中.创建插件比创建 loader 更加高级,因为你将需要理解一些 webpack 底层的内部特性来实现相应的钩子. 一.插件由以下部分构成 1.一个具名 JavaScript 函数 2.在它的原型上定义 apply 方法. 3.指定一个触及到 webpack 本身的 事件钩子. 4.操作 webpack 内部的实例特定数据. 5.在实现功能后调用 webpac

原文地址:http://wushaobin.top/2019/03/15/webpackPlugin/ 什么是Plugin? 在Webpack学习-工作原理(上)一文中我们就已经介绍了Plugin的基本概念,同时知道了webpack其实很像一条生产线,要经过一系列处理流程后才能将源文件转换成我们理想的输出结果.而webpack构建过程中,会在特定的时机广播对应的事件,插件可以监听这些事件的发生,Plugin在webpack构建流程中就是这样的一个角色.同时我们也介绍了很多整个构建流程会广播的事件

什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffeeScript或者JSX. loaders 特点: 1. 可以链式拼接.他们用在通向文件的管道,最后一个loader预期返回一个javascript,其它Loader可以返回任意格式给下一个loader. 2. loaders可以是同步的,也可以是异步的. 3. loaders是用node.js来跑,

一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用作替代品(用于样式).在XHTML或者HTML4中,我们常看到这样的代码: <!-- HTML 4-style code --><div id="wrapper"> <div id="header"> <h1>My super duper

重新安装依赖可以解决80%的webpack编译报错问题. rm -rf node_modules rm package-lock.json npm cache clear --force npm install 引起报错的一些常见原因 移动了项目的路径,比如说从D盘移动到了E盘.原因:使用npm安装依赖时,会记录node_nodules里文件的当前路径,这个路径是写死的绝对路径,不会跟随项目移动而移动,因此一旦移动项目的位置,路径错误就必须要重新安装依赖了. 使用的依赖存在漏洞,npm audi

/* * 字节编码转换 * 首先都需要转为二级制数组 (ArrayBuffer) * 然后才能转换对应的编码字符 * 前端常见编码: * base64:就是将二进制转为字符串,将每6个字节转为一个特定的字符串(A-Za-z0-9/+=). * hex:将二进制每8个字节转为对应的2个十六进制的字符串 * */ // utf8 转为 base64/hex let output = Buffer.from('utf8的字符串', 'utf8') console.log(output.toString

一.Webpack Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 二.Webpack安装 1.全局安装 npm install -g webpack webpack-cli 2.安装后查看版本号 webpack -v 三.初始化项目 1.创建webpack文件夹 进入webpack目录,执行命令 npm init -y 2.创建src文件夹 3.src下创建common.js exports.info = fu

作者:Jogis原文链接:https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 前一篇文章介绍了webpack以及安装方法,这次将会介绍webpack在单页面应用程序(Single Page Application)与多页面站点不同场合的用法. 输入与输出 跟其他模块加载器类似,webpack也是需要配置一个入口文件,比如是entry.js有几种配置方式,下面来介绍一下直接把入口文件写在配置文件 webpack.config.js: mo

相信有很多前端的朋友再布局的时候经常面对IE6咬牙切齿,尤其是刚刚入行的朋友,在这里给大家一点常见问题的解决方案,希望对大家有所帮助 1)png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.也可以引用一段脚本处理. 2)IE6双倍边距bug:在该元素中加入display:inline 或 display:block   3)像素问题 使用多个float和注释引起的 使用dislpay:inline -3px     4)超链接hover 点击后失效  使用正确的书写顺序 link

早期的构建工具grunt ,gulp 帮助我们配置一些开发环境,省去一些我们调试和重复的工作 现在我们的构建工具一般是webpack ,目前建议大家用3.0以上的版本 现在市场上比较优秀的构建工具,个人认为有2个(大神有不同意的请不要喷我

使用vue init webpack test(项目文件夹名)命令初始化一个vue项目,cd test,然后安装依赖npm install之后会生成一些默认的文件夹和文件,这些文件和文件夹中有些和配置有关的.如果去专门的了解webpack一定会云里雾里,这里简单说明一下常用的配置. 1.babelrc文件 这个文件放在根目录下面设置转码规则的.例如要想在代码中使用es6,就要在这个文件中配置"presets": ["es2015"].在项目代码中要使用jsx语法除了

我安装webpack时,出现如下错误: C:\Users\admin> npm install webpack -gnpm WARN checkPermissions Missing write access to C:\Users\admin\AppData\Roaming\npm\node_modules\webpack\node_modules\fseventsnpm ERR! path C:\Users\admin\AppData\Roaming\npm\node_modules\web

一.常见的web安全及防护原理 1.sql注入原理 就是通过把sql命令插入到web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. 防护,总的来说有以下几点: 1.永远不要信任用户的输入,要对用户的输入进行校验,可以通过正则表达式,或限制长度,对单引号双“--”进行转换等. 2.永远不要使用动态拼装sql,可以使用参数化的sql或者直接使用存储过程进行数据查询存取. 3.永远不要使用管理员权限进行数据库连接,为每个应用使用单独的权限有限的数据库连接. 4.不要

1. devtool代码调试 1. 生产模式下 source-map: 生成一个map文件,直接定位到源码的行列 ✅可以使用该模式,用于测试服务器 cheap-source-map: 只能定位到行,且只能定位到babel转码后的代码 cheap-module-source-map: 只能定位到行,但是可以定位到源码 2. 开发模式下 eval: 定位到编译后的代码 cheap-eval-source-map:  定位到babel转码后的行 cheap-module-eval-source-map

地址 : https://blog.csdn.net/jiang7701037

面试题:你所了解的web攻击? 1.xss攻击 2.CSRF攻击 3.网络劫持攻击 4.控制台注入代码 5.钓鱼 6.DDoS攻击 7.SQL注入攻击 8.点击劫持 一.xss攻击 XSS攻击:跨站脚本攻击(Cross-Site Scripting),攻击目标是为了盗取存储在客户端的cookie或者其他网站用于识别客户端身份的敏感信息.一旦获取到合法用户的信息后,攻击者甚至可以假冒合法用户与网站进行交互. 防御方法:过滤特殊字符,HttpOnly 浏览器禁止页面的JS访问带有HttpOnly属性

(1)减少http请求,尽量减少向服务器的请求数量 (2)避免重定向 (3)利用缓存:使用外联式引用CSS.JS,在实际应用中使用外部文件可以提高页面速度,因为JavaScript和CSS文件都能在浏览器中产生缓存 (4)压缩HTML.CSS.JS (5)删除JavaScript重复脚本 (6)将JavaScript脚本放在页面的底部,css文件在头部引入 (7)优化图片大小 (8)css使用<link>来代替@import (9)压缩图片,使用字体代替图片,使用雪碧图 (10)按需加载,预加