【webpack前端工程化】 - 随笔分类 - KIU的博客

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)

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

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的博客阅读(4098) 评论(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)

简单学习【1】——使用webpack

摘要：使用webpack webpack命令 webpack配置第三方脚手架 1.webpack命令 webpack - h (webpack 所有的选项) webpack -v (查看webpack的版本) webpack <entry> [<entry>] <output> (完成以西最简单的打包) 阅读全文

posted @ 2019-08-24 22:03 KIU的博客阅读(129) 评论(0) 推荐(0)

webpack前期了解

摘要：webpack的核心概念（四个）入口（entry）输出（output） loader 插件（plugins） Entry(入口)——指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。代码的入口，打包的入口，一个或多个，可以通过代码的入口找到他依赖的模块或者间接找到 outpu 阅读全文

posted @ 2019-08-24 21:24 KIU的博客阅读(129) 评论(0) 推荐(0)

KIU的博客

随笔分类 - 【webpack前端工程化】

公告