JS全栈-webpack
文章平均质量分 72
JS全栈-webpack
uikoo9
这个作者很懒,什么都没留下…
展开
-
webpack随笔07-bootstrap
上一篇讲了webpack集成bulma这个css框架,本文讲下webpack集成bootstrap框架上文:webpack随笔06-bulma_uikoo9的博客-CSDN博客 bulma:Bulma: Free, open source, and modern CSS framework based on Flexboxbootstrap:Bootstrap · The most popular HTML, CSS, and JS library in the world.通过文件的方式引入css,js就原创 2022-06-15 23:00:00 · 513 阅读 · 1 评论 -
webpack随笔06-bulma
推荐一个网站:Find the best package for you and test it online, Analyze tech stack for your project. | DEVTOOL.TECH这里可以看到npm包各种信息,比如按npm包star数排行,下载数排行,以及npm包详细信息等 npm包详情内,有很多聚合的信息这个网站比较有意思,可以看到目前流行的npm包是哪些流行npm包(star排行)中,css类前三:bootstrap(老牌大哥),element-ui,bulma,Bu原创 2022-06-14 23:00:00 · 422 阅读 · 0 评论 -
webpack随笔05-less-loader
【前言】 less也是用的比较多的css预编译语音的一种,详见:Getting started | Less.js 最早是因为大名鼎鼎的bootstrap使用less,所以比较有名 【less-loader】 webpack解析less文件需要使用到less-loader,详见:less-loader - npm 用法也比较简单,如下 module.exports = { module: { rules: [ { test: /\.less$/i..原创 2022-05-20 20:16:12 · 719 阅读 · 0 评论 -
webpack随笔04-webpack5压缩js&css
【前言】 webpack5的压缩大致和webpack4相似,稍微有一些不同 【不压缩css】 dev模式下不需要压缩css,且讲css以style的形式注入到html即可 rules: [ { test: /\.css$/, include: [ /node_modules[\\/]antd/, /node_modules[\\/]normalize\.css/, /iconfont\.cs...原创 2022-05-07 18:47:11 · 2010 阅读 · 0 评论 -
webpack随笔03-sass
【前言】 sass,css预编译语言的一种,还有less,stylus等,详见:Sass: Syntactically Awesome Style Sheets 简单来说就是自定义了一种语言,可以很方便的写css,并且最终会编译为css文件, 简单对比一下, less,由于bootstrap使用,所以用的人比较多,但是没有sass好用 sass,比较好用,之前基于ruby的问题,sass缩进的问题都有改善 【几种版本】 在官网上可以看到sass有几种版本 dart sass,这...原创 2022-03-22 18:06:37 · 1200 阅读 · 0 评论 -
webpack随笔02-babel-loader
【前言】 使用webpack,或者说前端开发逃不开babel,Babel · The compiler for next generation JavaScript 简单的说,目前浏览器的环境不支持一些高级js特性,babel用来抹平这些特性, 通过babel可以讲高级特性写的js代码转为浏览器支持的版本,比如将es6的代码转为es5的代码 【babel支持react】 假设目前有一段简单的react代码,如下 由于其中采用了jsx语法,如何使webpack支持jsx语法,...原创 2022-03-14 19:32:01 · 888 阅读 · 0 评论 -
webpack随笔01-html-webpack-plugin
【前言】 看过webpack手册系列(翻译官方webpack guides,并添加示例)后基本可以上手webpack, 其中有一章讲到使用html-webpack-plugin这个插件生成html, webpack手册-03-Output Management_uikoo9的专栏-CSDN博客 但是使用相对比较简单,遇到一些复杂的场景就不知道怎么操作了, 本章介绍一下html-webpack-plugin这个插件 github地址:GitHub - jantimon/html-webpack..原创 2022-03-14 17:29:10 · 1844 阅读 · 0 评论 -
webpack手册-12-Shimming&End
Shimming webpack支持es6的模块化,commonjs的模块化和amd的模块化,但是有一些库不是这几种模块化,且需要一些前置依赖,比如jquery的$一样,本章讲这些前置依赖 Shimming Globals 全局的前置依赖,基于ProvidePlugin提供全局的前置依赖 代码修改和配置文件修改 构建没问题 效果ok 代码见:GitHub - uikoo9/webpack-guides at 0.3.6 ...原创 2021-12-07 21:18:26 · 376 阅读 · 0 评论 -
webpack手册-11-Production&Lazy Loading
Production 开始讲生产环境如何配置了~ Setup 由于生产环境和开发环境的述求不同,一般会准备两个webpack的配置文件,对应不同的环境, 由于会有一部分公共的配置,所以还需要一个公共的配置文件 说实话,之前没看过webpack这个手册,直接看的api,后期实践中确实也是这么分的,哈哈 由于有3个配置文件了,涉及一些merge的操作,需要用到webpack-merge的库,进行一些配置项的合并,webpack的配置项比较多,复杂 webpack.dev.js,..原创 2021-12-07 17:10:33 · 250 阅读 · 0 评论 -
webpack手册-10-Tree Shaking
Tree Shaking 去掉没有使用到的上下文代码 Add a Utility 添加一个math.js,和修改配置文件,如下 构建没问题 可以看到构建后的代码内有没有引用过的square这个方法 代码见:GitHub - uikoo9/webpack-guides at 0.3.3 ...原创 2021-12-07 15:45:35 · 101 阅读 · 0 评论 -
webpack手册-09-Hot Module Replacement
Hot Module Replacement 热更新,由于大型项目开发中会有很多组件,如果开发某个组件时,每次修改都刷新页面,一方面比较耗时,一方面比较慢,热更新会只刷新你修改的组件,在开发时算是比较有用,不过非大型项目刷新页面和hmr感知差不多 Enabling HMR 开启热更新功能,在webpack配置文件中的devServer中添加hot:true即可, webpack-dev-server在4.0.0版本后默认会开启,看了下目前已经是4.5.0版本了,所以不修改配置文件也是默认...原创 2021-12-06 21:18:13 · 645 阅读 · 0 评论 -
webpack手册-08-Build Performance
Build Performance 这章开始讲构建这个过程的一些优化技巧了,感觉结合实战来讲更好一些,可以先看看 General 通用的一些配置 Stay Up to Date 更新到最新版本,大型项目要及时更新到最新版本,如果一段时间没有更新,再次想更新就需要比较慎重的检查一下了 Loaders 每个loader最好指定使用的范围,如果没有指定webpack默认会过项目中所有文件,如果是大型项目,那么这个过程会很慢 要擅长使用include和exclude B...原创 2021-11-26 20:39:27 · 474 阅读 · 0 评论 -
webpack手册-07-Authoring Libraries
Authoring Libraries 这章相对比较有意思,也算是webpack的一个简单应用,可以发布自己的代码库,通过简单地配置兼容各种规范,比如cmd,amd,commonjs等 Authoring a Library 这章的代码结构和之前的不一样,拉一个新分支修改, 示例做了一个从阿拉伯数字转单词的代码库, 目录结构,npm安装包 Webpack Configuration Expose the Library webpack配置文件中添加了libra...原创 2021-11-26 19:47:13 · 125 阅读 · 0 评论 -
webpack手册-06-Caching
Caching Output Filenames 这个比较常用,对文件内容进行hash,这个值当做文件名,如果内容有改动,文件名就会改动,可以避免浏览器,服务器或者cdn的缓存 修改下配置文件,比较简单 构建没问题 可以看到,构建后的js文件名已经是内容hash了 代码见:https://github.com/uikoo9/webpack-guides/tree/0.2.4 ...原创 2021-11-26 16:06:51 · 263 阅读 · 0 评论 -
webpack手册-05-Code Splitting
Code Splitting 代码分离,终于讲到了webpack中比较核心的一些能力了 这章的代码沿用get started章节的代码,也就是0.0.4 tag的代码, 详见:webpack手册-01-Getting Started_uikoo9的专栏-CSDN博客 Entry Points 加了一个新js文件,修改了配置文件 主要是两个js文件都引用了lodash 构建依旧没问题 两个都引用lodash的文件内容 代码见:GitHub - uikoo...原创 2021-11-24 15:50:57 · 438 阅读 · 0 评论 -
webpack手册-04-Development
Development 总算添加了mode,要不每次构建都有提示 构建同样没问题,并且少了提示,比较清爽 代码见:GitHub - uikoo9/webpack-guides at 0.1.4 Using source maps 开始添加source map了,在真实开发中这个必不可少,要不出问题都不知道是哪里的问题, 实际开发中建议打开source map,虽然关闭可能构建会快一些。 修改配置文件,添加devtool属性 构建依旧没问题 看...原创 2021-11-12 16:44:11 · 454 阅读 · 0 评论 -
webpack手册-03-Output Management
Output Management 开始讲到output了 Preparation 先准备一下,添加了print.js,修改了之前的代码 修改了配置文件 可以关注下配置文件的修改和html的引用,entry入口修改为了两个,对应的output的filename也修改了按文件名导出bundle 构建没问题 效果也没问题,点击按钮,控制台输出 代码见:GitHub - uikoo9/webpack-guides at 0.1.1 ...原创 2021-11-12 15:49:56 · 551 阅读 · 0 评论 -
webpack手册-02-Asset Management
Asset Management Loading CSS 安装了css-loader,style-loader 对应的改了配置文件 对应的项目中加了css,和添加了引用 这一节开始讲资源管理,各种资源,都会有对应的loader,在配置文件中配置对应的module,就可以在代码内引入,构建时就可以解析, 总也来说也比较简单,跑起来,查看效果 代码见:GitHub - uikoo9/webpack-guides at 0.0.5 Loading ...原创 2021-11-11 20:45:24 · 730 阅读 · 0 评论 -
webpack手册-01-Getting Started
前言 webpack guides,webpack手册,写的挺好挺详细,也有中文翻译,但是发现没有例子中的素材,本文跟着webpack guides过一遍,准备一些素材,备大家参考。 webpack guides:Guides | webpack 本文代码地址:GitHub - uikoo9/webpack-guides Getting Started Basic Setup 创建文件夹,初始化npm,安装webpack依赖 -- 执行后会直接生成package.json,其中的值都是.原创 2021-10-20 17:52:32 · 116 阅读 · 0 评论