![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 59
coder_yihua
这个作者很懒,什么都没留下…
展开
-
15-压缩
HTTP压缩是一种内置在服务器和客户端 之间的,以改进传输速度和带宽利用率的方式;HTTP压缩的流程什么呢?HTTP数据在服务器发送前就已经被压缩了兼容的浏览器在向服务器发送请求时,会告知服务器自己支持哪些压缩格式服务器在浏览器支持的压缩格式下,直接返回对应的压缩后的文件,并且在响应头中告知浏览器。原创 2023-06-22 16:08:39 · 252 阅读 · 0 评论 -
14-代码分离
代码分离(Code Splitting)是webpack一个非常重要的特性。它主要的目的是将代码分离到不同的bundle中,之后我们可以按需加载,或者并行加载这些文件。比如默认情况下,所有的JavaScript代码(业务代码、第三方依赖、暂时没有用到的模块)在首页全部都加载, 就会影响首页的加载速度。代码分离可以分出出更小的bundle,以及控制资源加载优先级,提供代码的加载性能Webpack中常用的代码分离有三种模式:配置一个index.js和main.js的入口;他们分别有自己的代码逻辑。Entry原创 2023-06-22 15:45:25 · 120 阅读 · 0 评论 -
13-环境区分
注意babel的配置文件,由于需要判断环境,所以我们在webpack.common.js进行process.env.NODE_ENV的挂载,在babel.config.js拿到进行判断不同环境,babel不同的配置。编写两个不同的配置文件,开发和生成时,分别加载不同的配置文件即可。在不同的配置文件中使用变量来说明环境,也可以通过配置脚本带上–env production来表明开发环境,这样就可以在webpack.config.js中导出的函数中通过参数判断环境,当然最终返回的还是对象。原创 2023-06-21 17:04:18 · 64 阅读 · 0 评论 -
12-resolve模块解析
另一个非常好用的功能是配置别名alias。extensions和alias配置。webpack能解析三种文件路径。原创 2023-06-21 16:59:00 · 43 阅读 · 0 评论 -
11-historyApiFallback
historyApiFallback是开发中一个非常常见的属性,它主要的作用是解决SPA页面在路由跳转之后,进行页面刷新 时,返回404的错误。如果设置为true,那么在刷新时,返回404错误时,会自动返回 index.html 的内容;可以配置from来匹配路径,决定要跳转到哪一个页面。boolean值:默认是false。原创 2023-06-21 16:59:30 · 65 阅读 · 0 评论 -
10-devServer与watch
webpack-dev-middleware 是一个封装器(wrapper),它可以把 webpack 处理过的文件发送到一个 server。安装加载vue所需要的依赖:npm install vue-loader vue-template-compiler -D。比如在index.html中,我们需要依赖一个 abc.js 文件,这个文件我们存放在 public文件 中;Vue的加载我们需要使用vue-loader,而vue-loader加载的组件默认会帮助我们进行HMR的处理。host设置主机地址。原创 2023-06-21 16:55:39 · 398 阅读 · 0 评论 -
09-ESlint
ESLint是一个静态代码分析工具(Static program analysis,在没有任何程序执行的情况下,对代码进行分析);ESLint可以帮助我们在项目中建立统一的团队代码规范,保持正确、统一的代码风格,提高代码的可读性、可维护 性;并且ESLint的规则是可配置的,我们可以自定义属于自己的规则;原创 2023-06-21 16:44:59 · 414 阅读 · 0 评论 -
08-babel
babel本身可以作为一个独立的工具(和postcss一样),不和webpack等构建工具配置来单独使用。那么我们就需要去安装相关的依赖:npm install babel-loader @babel/core。在实际开发中,我们通常会在构建工具中通过配置babel来对其进行使用的,比如在webpack中。比如我们需要转换箭头函数,那么我们就可以使用箭头函数转换相关的插件。如果我们希望在命令行尝试使用babel,需要安装如下库。使用babel来处理我们的源代码。原创 2023-06-21 16:41:34 · 686 阅读 · 0 评论 -
07-source-map
浏览器会根据我们的注释,查找响应的source-map,并且根据source-map还原我们的代码,方便进行调试。source-map是从已转换的代码,映射到原始的源文件。根据源文件,生成source-map文件,webpack在打包时,可以通过配置生成source-map;在Chrome中,我们可以按照如下的方式打开source-map,默认是打开的(浏览器小齿轮设置)在转换后的代码,最后添加一个注释,它指向sourcemap;目前的source-map长什么样子呢?原创 2023-06-21 16:23:05 · 190 阅读 · 0 评论 -
06-asset-module-type
【代码】06-asset-module-type。原创 2023-06-21 15:06:45 · 100 阅读 · 0 评论 -
03-loader使用
loader其实就是解析器,用来解析模块的,前面说到过webpack只认识js和json文件。原创 2023-06-20 22:13:39 · 830 阅读 · 0 评论 -
04-webpack中使用plugin
loader是用于特定的模块的类型转换,plugin用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等。原创 2023-06-20 22:16:30 · 457 阅读 · 0 评论 -
05-Browserslist
浏览器市场占有率:https://caniuse.com/usage-table。就是当我们设置了一个条件:> 1%;我们表达的意思是css要兼容市场占有率大于1%的浏览器,js也要兼容市场占有率大于1%的浏览器;如果我们是通过工具来达到这种兼容性的,比如后面我们会讲到的postcss-prest-env、babel、autoprefixer等如何可以让他们共享我们的配置呢?Browserslist是一个在不同的前端工具之间,共享目标浏览器和Node.js版本的配置。原创 2023-06-21 14:27:41 · 585 阅读 · 0 评论 -
02-通过webpack搭建一个基础的项目
经过上述操作,我们进行打包就可以看到dist文件夹下帮除了帮我们生成bundle.js之后,还生成了index.html文件,此时我们通过浏览器打开生成后的html就可以看到效果了。在经过上述操作之后我们的项目还是需要通过open live server来打开html,此时我们可以通过webpack-dev-server来提供服务。对项目进行打包,并在dist文件夹下可以看到打包后的代码。在webpack.config.js中加入下面的代码。文件夹用来存放项目的逻辑代码,并在src文件夹下新建。原创 2023-06-20 20:15:24 · 1544 阅读 · 1 评论 -
01-初识webpack
每找到一个 Module ,就会根据配置的 Loader 去找出对应的转换规则,对 Module 进行转换后, 再解析出当前 Module 依赖的 Module 这些模块会以 Entry为单位进行分组,Entry及其 所有依赖的 Module 被分到一个组也就是 Chunk。1.webpack的安裝目前分为两个:webpack、webpack-cli(非必须安装,webpack-cli会读取webpack.config.js的内 容然后进行解析,再传入webpack,vue有自己的实现)。原创 2023-06-20 20:04:13 · 1104 阅读 · 0 评论