09 2019 档案

webpack学习_模块热替换(Hot Module Peaplacement)
摘要：模块热替换(Hot Module Replacement 或 HMR) 是webpack提供的最有用的功能之一.允许在u女性是更新各种模块,而无需进行完全刷新. 启用HMR 承接之前的代码 webpack.config.js index.js print.js(其实可以不改,只是区分之前的) 运行之 阅读全文
posted @ 2019-09-12 14:33 KIU的博客 阅读(580) 评论(0) 推荐(0)
NodeJS7-1本地构建_gulp入门学习
摘要：NodeJS在前端最常用的两种方式: 1.做成webserver 2.做成前端开发的相关工具 本地构建:前端发布代码都会经过压缩(谁来处理) ,前端技术的日新月异,利用新特性代码变得易读,清晰,可是老式浏览器不支持新特性,需要部分兼容,自动化流程帮助处理了,这些自动化的流程被称为本地构建 gulp可 阅读全文
posted @ 2019-09-12 10:28 KIU的博客 阅读(184) 评论(0) 推荐(0)
webpack学习_webpack-dev-server自动编译代码
摘要：之前每次修改完之后都要执行npm run build来编译,下面有三种方式可以实现代码变化后自动编译代码,下面只重点说webpack-dev-server,其他的请看webpack开发文档 1.webpack's Watch Mode 指示 webpack "watch" 依赖图中的所有文件以进行更 阅读全文
posted @ 2019-09-11 16:48 KIU的博客 阅读(1016) 评论(0) 推荐(0)
webpack学习_使用source map
摘要：追踪错误和警告,JS提供sourcemap功能,将编译后的代码映射回原始代码(简单来说就是即使打包后,也可以检测知道该错误来自哪个JS文件).如果一个错误来自与b.js,那么source map回明确告诉你 在这里只使用inline-source-map选项(source map有很多选项,其他的请 阅读全文
posted @ 2019-09-11 15:44 KIU的博客 阅读(243) 评论(0) 推荐(0)
TypeError: CleanWebpackPlugin is not a constructor
摘要：webpack添加Cleanweb packPlugin插件,按着webpack的指南来编写会报错 TypeError: CleanWebpackPlugin is not a constructor 以上解决方法参考了下面博主的博客 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版 阅读全文
posted @ 2019-09-11 15:25 KIU的博客 阅读(191) 评论(0) 推荐(0)
Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
摘要：在webpack的管理输出的部分,设定HtmlWebpackPlugin部分,运行npm run build 会报错 Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' 解决方法: 接着再运行 执行成功!!!!!!!! 阅读全文
posted @ 2019-09-11 14:52 KIU的博客 阅读(4099) 评论(0) 推荐(0)
webpack学习_管理输出(管理资源插件)
摘要：管理输出步骤 Step1:在src新建文件print.js添加逻辑 Step2:在src/index.js import 引用新添加的逻辑 Step3:更新dist/index.html文件,修改引入的文件(引入的JS文件) Step4:对应修改webpack/.config.js配置文件(entr 阅读全文
posted @ 2019-09-09 17:18 KIU的博客 阅读(210) 评论(0) 推荐(0)
webpack学习_资源管理(loader)
摘要：webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件 引入资源步骤 Step1:安装你需要的loader Step2:在 module配置中(module中的rules)配置 Step3:import引入你的具体资源文件 Step4:执行 阅读全文
posted @ 2019-09-09 16:44 KIU的博客 阅读(201) 评论(0) 推荐(0)
webpack学习3.1由浅入深-打包JS
摘要：打包JS Step1:在新建的文件夹下新建一个sum.js文件,一个app.js文件 sum.js minus.js app.js引入sum模块 打包运行,app.js是需要打包的函数,而bundle.js是打包之后生成模块的文件,webpack 版本更改后有一点不一样(后续更新) 阅读全文
posted @ 2019-09-06 15:59 KIU的博客 阅读(145) 评论(0) 推荐(0)
webpack学习2.3webpack核心概念
摘要：核心概念(四个) 1.入口(Entry) 作用:代码的入口,打包的入口,单个或多个, 示例一:传入文件路径 示例二:传入一个数组, 向entry属性传入[ 文件路径数组 ] 将创建 " 多个主入口(multi-main entry) " 示例三:传入对象(推荐具体看webpack的API) ,与前两 阅读全文
posted @ 2019-09-06 10:57 KIU的博客 阅读(185) 评论(0) 推荐(0)
webpack学习1.1 webpack背景介绍
摘要：一.为什么要前端需要构建? 开发复杂化 框架去中心化(代码中需要的模块都可以通过npm安装佢解决一个问题,包越来越零散,根据需要来安装) 开发编译化 语言模块化 二.为什么要用webpack? 1.三大前端框架都是用webpack来构建的(趋势) 2.代码分割 3.天生模块化(任何一个资源都可以当成 阅读全文
posted @ 2019-09-05 15:58 KIU的博客 阅读(191) 评论(0) 推荐(0)
webpack学习2.2webpack简介,初步了解
摘要：webpack V1功能进化 编译打包 HMR(模块热更新) 代码分割 文件处理(loader) webpack V2功能进化 tree shaking(并欸有在项目中使用的代码不会打包到里面,打包之后体积更小) ES module(安装Babel) 动态import 新的文档 webpack V3 阅读全文
posted @ 2019-09-05 15:56 KIU的博客 阅读(164) 评论(0) 推荐(0)
webpack学习2.1 模块化开发(JS模块化&CSS模块化)
摘要：一.JS模块化 命名空间,COMMONJS,AMD/CMD/UMD,ES6 module 1.什么是命名空间 库名.类别名.方法名 弊端:在命名空间重复生命,要记住完整的路径名(而且很长) 2.什么COMMONJS (服务器端使用COMMONJS,浏览器端用不了COMMONJS的模块规范) Modu 阅读全文
posted @ 2019-09-05 15:08 KIU的博客 阅读(705) 评论(0) 推荐(0)
Node6-2单元测试 覆盖率Istanbul
摘要：Step1:安装Istanbul Step2:在package.json里面添加,具体参考Istanbul的API写法 Step3:执行npm run cover 阅读全文
posted @ 2019-09-05 11:09 KIU的博客 阅读(263) 评论(0) 推荐(0)
Node6-1单元测试mocha
摘要：1.初步简单的测试 在src新建一个math.js的文件.src/math.js 在与src同级新建一个文件夹test,test里面新建一个simple.js文件 test/simple.js 运行结果 2.使用assert(断言)来判断是否相等 [ assert.equal() ] test/si 阅读全文
posted @ 2019-09-05 10:55 KIU的博客 阅读(250) 评论(0) 推荐(0)
JS计算数组的总和
摘要：1.最简单的遍历累计 2.利用reduce(),reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 阅读全文
posted @ 2019-09-04 10:18 KIU的博客 阅读(20877) 评论(0) 推荐(0)
webpack打包出现WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. 错误
摘要：打包运行的时候出现以下错误 WARNING in configurationThe 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to ' 阅读全文
posted @ 2019-09-03 10:23 KIU的博客 阅读(4109) 评论(0) 推荐(1)