![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 89
webpack的使用方法详细解析
麦乐乐
这个作者很懒,什么都没留下…
展开
-
【无标题】
如果 npm 包导出的是 ESM 规范的包,使用 module如果 npm 包只在 web 端使用,并且严禁在 server 端使用,使用 browser。如果 npm 包只在 server 端使用,使用 main如果 npm 包在 web 端和 server 端都允许使用,使用 browser 和 main其他更加复杂的情况,如npm 包需要提供 commonJS 与 ESM 等多个规范的代码文件,请参考上述使用场景或流程图。原创 2023-02-23 19:09:47 · 369 阅读 · 1 评论 -
深入浅出webpack-打包优化
10 代码分割多个html文件,多个入口var extractTextCss=require('extract-text-webpack-plugin');var htmlWebpackPlugin=require('html-webpack-plugin');module.exports= { mode:'production', entry:{ app:"./src/app.js", app2: "./src/app2.js" }, output:{ path:_原创 2020-10-13 20:49:07 · 2012 阅读 · 0 评论 -
深入浅出webpack -- loader和plugin原理及区别
loader原理概念loader就像一个翻译员,能将源文件翻译后输出新的结果,并且一个文件可以链式的经过几个翻译员。以.scss文件为例子:先将.scss文件内容交给sass-loader翻译为css 在将翻译后的css交给css-loader,找出css中依赖的资源,压缩css 再将css-loader输出的内容交给style-loader,转化为通过脚本加载的JavaScript代码const path = require('path');var HtmlWebpackPlug原创 2020-10-12 20:32:21 · 4409 阅读 · 1 评论 -
深入浅出webpack -- webpack-dev-server 常用配置及原理
一、初始化项目《深入浅出webpack-热更新》二、devServer常用的配置1、host: '0.0.0.0'devServer.host配置项用于配置DevServer服务监听的地址,只能通 过命令行参数传入。host的默认值是 127.0.0.1,即只有本地可以访问DevServer的HTTP服务。若想让局域网中的其他设备访问自己的本地 服务,则可以在启动DevServer时带上--host 0.0.0.0。2、opendevServer.open用于在DevServer启动原创 2020-10-09 15:37:06 · 2035 阅读 · 0 评论 -
深入浅出webpack-热更新
什么是热更新?使用vue或者react框架开发的时,只要项目启动了,无论修改js代码还是css代码,浏览器都会更新,可能有很多童鞋会认为这就是热更新,实际上这个你看到的并不是热更新,只是模块的刷新。下面通过代码来认识一下什么是模块刷新?什么是热更新?初始化项目npm inittouch index.htmltouch app.jsnpm i webpack webpack-cli webpack-dev-server --D注意:这里使用的是webpack 4.x,如果直接使用原创 2020-10-09 09:37:52 · 396 阅读 · 0 评论 -
webpack构建离线应用 Service Workers
1 简介Service Workers是一个在浏览器后台运行的脚本,它的生命周期完 全独立于网页。它无法直接访问DOM,但可以通过postMessage接口发 送消息来和UI进程通信。拦截网络请求是Service Workers的重要功能, 通过Service Workers能完成离线缓存、编辑响应、过滤响应等功能。2 兼容性判断浏览器是否支持Service Workers的最简单方法...原创 2020-03-03 10:05:45 · 1074 阅读 · 0 评论 -
webpack的使用进阶--ssr和发布NPM
3.1webpack搭建服务端渲染现在大多数单页应用的视图都是通过JavaScript代码在浏览器端渲染 出来的,但在浏览器端渲染的坏处如下。· 搜索引擎无法收录我们的网页,因为展示的数据都是在浏览器端 异步渲染出来的,大部分爬虫无法获取这些数据。· 对于复杂的单页应用,渲染过程的计算量大,对于低端移动设备 来说可能会有性能问题,用户能明显感知首屏的渲染延迟。为了解决以上问题,有人...原创 2020-02-26 10:05:40 · 302 阅读 · 0 评论 -
webpack管理多个单页面应用
实际应用中一个完整的 系统不会将所有功能都做到一个网页中,因为这会导致网页性能不佳。 实际的做法是按照功能模块划分成多个单页应用,每个单页应用生成一 个 HTML 文件。并且随着业务的发展,更多的单页应用可能会被逐渐 加入项目中。看下面的项目目录结构这是webpack的一个多页面应用例子,只有一个html,pages里面的每一个文件夹都是一个页面。需要构建出的目录结构如下:这样...原创 2020-02-19 12:31:04 · 794 阅读 · 0 评论 -
深入浅出webpack—基础配置
目录1 webpack的打包命令2 js的编译babel-loader @babel/core@babel/preset-envbabel-polyfillbabel-transform-runtime3 css编译style-loadercss-loaderless和sass css的预处理语言把css文件提取为单独的文件post...原创 2019-10-10 11:28:47 · 575 阅读 · 0 评论