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