随笔分类 -  webpack

自学webpack笔记
webpack自我提升 - 优化篇(2)
摘要：1、树摇 tree shaking 在应用程序中去除没有使用的代码，使代码的体积更小 前提： 1、必须使用ES6模块 2、开启production环境 配合package.json使用 package.json中配置： "sideEffects":false , //表示所有代码都没有副作用（都可以 阅读全文
posted @ 2021-07-23 19:18 HandsomeGuy 阅读(68) 评论(0) 推荐(0)
webpack自我提升 - 优化篇(1)
摘要：1、HMR = hot module replacement　( 热模块替换/模块热替换 ) 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大提升构建速度 devServer:{ ... , hot:true,//开启HMR功能 } 注意： 1、样式文件：可以使用HMR（因 阅读全文
posted @ 2021-07-23 17:24 HandsomeGuy 阅读(56) 评论(0) 推荐(0)
webpack 自我提升笔记 -- 6 html和js压缩 、生产环境基本配置
摘要：策略兵法： 1、js压缩：生产环境下会自动压缩js代码（mode:"production"） 2、html压缩：配合html-webpack-plugin插件 奋起冲锋：html压缩 wepack.config.js配置 const { resolve } = require("path"); co 阅读全文
posted @ 2021-07-14 17:49 HandsomeGuy 阅读(189) 评论(0) 推荐(0)
webpack 自我提升笔记 -- 5 js语法检查(eslint) & js兼容
摘要：功法大纲： js语法检查eslint依赖：eslint、eslint-plugin-import、eslint-config-airbnb-base、eslint-loader jsa兼容（不同浏览器）：babel-loader 内功心法第一章：js语法检查 webpack.config.js配置 阅读全文
posted @ 2021-07-14 14:32 HandsomeGuy 阅读(278) 评论(0) 推荐(0)
webpack 自学笔记 ---4 提取css文件&css兼容&压缩css
摘要：乾坤符箓： 提取css文件为单独文件（mini-css-extract-plugin） css兼容（postcss） 压缩css(optimize-css-assets-webpack-plugin) 1、提取css文件为单独文件 const { resolve } = require("path" 阅读全文
posted @ 2021-07-13 21:43 HandsomeGuy 阅读(169) 评论(0) 推荐(0)
webpack自学文档 --3 打包其他资源 && 开发服务器(webpack-dev-serve页面不刷新问题=>fix)
摘要：通天妖文：打包其他资源 && 开发服务器 打包其他资源（其他配置再写一遍，就当温习，代码还是要多敲，毕竟脑子这个东西不咋滴！） const { resolve } = require("path"); //建议学webpack前还是学习下node.js,毕竟里面会用到里面的属性和方法 const H 阅读全文
posted @ 2021-07-13 17:49 HandsomeGuy 阅读(88) 评论(0) 推荐(0)
webpack自学笔记 -- 2 打包css\js\html\图片资源
摘要：本章箴言：打包其他资源配置 注意：loader：下载、使用（配置loader） plugins: 下载、引入、使用（可能还需要与package.json配合） 打包html、css、less文件： 例如：文件分布 html: css: 我们主要学习的就是webpack.config.js的配置 co 阅读全文
posted @ 2021-07-13 16:00 HandsomeGuy 阅读(184) 评论(0) 推荐(0)
webpack自学文档 -- 1 基础API
摘要：铭文真义 一种前端资源构建工具，一个静态模块打包器。它会根据模块的依赖关系进行静态分析，打包生成对应的静态资源。 五大神将 1、entry:打包入口 入口指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图 2、output:打包出口 输出（output）指示webpack打包后的资源 阅读全文
posted @ 2021-07-13 14:07 HandsomeGuy 阅读(112) 评论(0) 推荐(0)