webpack
webpack相关知识
AldarLin
不积跬步,无以至千里
展开
-
webpack 代码分割和动态import
一、代码分割和异步加载的意义 代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中。通过这些可以减少js文件的大小,并加快首屏渲染的速度 二、实现 // 安装 npm i @babel/plugin-syntax-dynamic-import -D // .babelrc { "presets": [ "@babel/p...原创 2019-12-30 10:56:24 · 440 阅读 · 0 评论 -
webpack 实现自动化多页面打包
一、为什么要使用自动化多页面打包 二、实现 三、结果 一、为什么要使用自动化多页面打包 当我们有多个入口时,若是手动一个个去配置,无疑是一个巨大的工作量,也容易出错。webpack提供了 glob 插件,可以让我们通过指定规则的方式,自动打包多页面文件。 二、 实现 通过动态获取entry和设置 html-webpack-plugin数量 // 安装 glob npm i g...原创 2019-12-29 15:16:15 · 542 阅读 · 0 评论 -
webpack 源代码调试
在线上环境中,由于项目代码都被打包到了一个文件中,难以调试和定位。此时可以通过source map来实现项目代码的定位和调试。 一般开发环境中默认source map打开,但线上环境必须关闭 一、 为什么要使用 source map 没有source map时: 使用了source map时: 可以明显看到,调试时显示的是真实代码 二、关键字 eval: 使用eval包...原创 2019-12-29 14:41:40 · 1120 阅读 · 0 评论 -
webpack 静态资源内联
一、什么是静态资源内联 二、使用 2.1raw-loader 内联 html 2.2raw-loader 内联 JS 2.3html-inline-css-webpack-plugin 实现CSS内联 三、现象 一、什么是静态资源内联 静态资源内联,即将css、js、图片等资源,内联到html。我们可以通过静态资源内联来减少文件请求数量,优化加载速度 代码...原创 2019-12-29 14:53:43 · 1209 阅读 · 7 评论 -
webpack使用手册
一、webpack安装 1. 生成初始化package.json npm init -y 2. 安装webpack npm install webpack webpack-cli --save-dev 测试安装是否成功 .\node_modules\.bin\webpack -v 二、核心概念 2.1 Bundle、Module、Chunk 2.1.1 Bundle Bu...原创 2019-12-24 11:39:22 · 303 阅读 · 0 评论