1、项目结构 2、部分代码 module.js index文件夹下的index.js login文件夹下的index.js 3、webpack.config.js 4、测试 （1）webpack.config.js 输出： （2）
转载
2017-09-20 09:55:00
91阅读
2评论
提取页面公共资源 基础库分离 思路：将react、react-dom基础包通过cdn引入，不打
转载
2021-08-09 21:04:00
442阅读
2评论
前端页面基础资源 有些页面使用的基础库是一样的，并且也有公共的模块 对于这些资源如果打包的时候每个都打一份，会导致打包的体积比较大 webpack提取页面公共资源，比如公共包，公共模块？ webpack 提取页面公共资源 基础库分离 思路: 将react、react-dom通过cdn引入,不打入bu ...
转载
2021-09-28 19:44:00
1227阅读
2评论
提取公共js代码前言项目中我们常遇到项目中有多个入口文件的情况，这时候如果有两个入口文件引用了相同的模块，这时候如果我们没有做任何处理的话，在打包时就会把这个相同的模块打包两次，这样既影响了性能，又降低了我们的代码质量，本文就介绍一种解决该现象的插件，来提取公共的js代码。条件该方法只适用于多入口js文件优点减少代码冗余提高用户加载速度webpack4新特性(splitChunks)splitCh
转载
2020-11-06 13:36:00
308阅读
2评论
1、使用的插件 MiniCssExtractPlugin：https://webpack.js.org/plugins/mini-css-extract-plugin/#src/components/Sidebar/Sidebar.jsx 注意：在webapck4中使用的是MiniCssExtrac
转载
2018-12-17 14:22:00
398阅读
2评论
推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：提取CSS，指定CSS和图片的目录因为
原创
2021-09-02 10:40:06
897阅读
方式一，传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js 方式二，有选择的提取公共代码 方式三，有选择性的提取（对象方式传参） 推荐 通过Commons
转载
2018-04-23 22:14:00
94阅读
2评论
前言 开发多页应用的时候，如果不对webpack打包进行优化，当某个模块被多个入口模块引用时，它就会被打包多次（在最终打包出来的某几个文件里，它们都会有一份相同的代码）。当项目业务越来越复杂，打包出来的代码会非常冗余，文件体积会非常庞大。大体积文件会增加编译时间，影响开发效率；如果直接上线，还会拉长
转载
2020-10-17 15:05:00
963阅读
2评论
说明玩转webpack课程学习笔记。基础库分离思路：将 react、react-dom 基础包通过 cdn 引⼊，不打⼊ bundle 中⽅法
原创
2022-08-18 03:03:50
316阅读
http://interview.poetries.top/随着浏览器的日新月异，网页的性能和速度越来越好，并且对于用户体验来说也越来越重要。现在有很多优化页面的办法，比如：静态资源的合并和压缩，code splitting，DNS预读取等等本文介绍的是另一种优化方法：首屏阻塞css优化原理：首先我们了解一下页面的基本渲染流程webkit渲染过程：Gecko渲染
转载
2022-11-14 12:28:02
76阅读
cnpm install webpack@^5.23.0 --save-dev cnpm i webpack-cli@^4.5.0 --save-dev cnpm i less-loader@6.0.0 --save-dev cnpm i style-loader --save-dev cnpm i
转载
2021-07-07 11:01:00
174阅读
2评论
1、编写src/css/main.css#app a{ display: inline-block; width: 150px; line-height: 30px; background-color: dodgerblue; col...
原创
2023-07-17 14:22:54
72阅读
1、安装插件 common.css为： flex.css为： app.js为： 4、执行编译&查看结果
转载
2017-09-15 10:49:00
175阅读
2评论
私有前缀postcss-loader(样式处理工具) autoprefixer(私有前缀的插件)npm install postcss-loader autoprefixer -D//postcss.config.jsmodule.exports = {plugins: [require('autoprefixer')
]
}复制代码//.browserslistrccover 99.5
转载
2021-01-24 20:35:30
235阅读
2评论
css文件处理-准备工作 (以下项目配置都是基于上一篇webpack(4)的基础上) 在项目开发中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。 这里我们就在src目录中创建一个normal.css文件，代码如下： body{ background-color: aqua; }
原创
2021-07-13 11:08:12
1032阅读
随着浏览器的日新月异，网页的性能和速度越来越好，并且对于用户体验来说也越来越重要。现在有很多优化页面的办法，比如：静态资源的合并和压缩，code splitting，DNS预读取等等本文介绍的是另一种优化方法：首屏阻塞css优化
原理：
首先我们了解一下页面的基本渲染流程webkit渲染过程：Gecko渲染过程:那么，为什么要做这种优化呢？上面的流程图就是原因：首先
原创
2022-03-25 15:50:44
370阅读
当 webpack 生成 bundle 时， 它同时维护一个 manifest 文件。你可以在生成的 vendor bundle 中找到它。manifest 文件描述了哪些文件需要 webpack 加载。 如果 webpack 生成的 hash 发生改变，manifest 文件也会发生改变。因此，v
转载
2018-12-12 15:50:00
270阅读
2评论
/*** 公共css类* made by jiefu 旺旺：杰夫* 2009.2.1**/
/***********通用基本类************/
/*css reset*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;
转载
2009-02-01 13:01:00
94阅读
2评论
global.css | reset.css（格式化样式） common.css（公共组件样式） layout.css（当前页面样式）清除全站所有页面的浏览器默认样式，保证在初始样式在所有浏览器下一致。common.css（公共组件样式）一般一个网站所有页面头部、底部样式都是一致的，而且很长时间不会有大的改变，改变的大概就是产品、运营的经常需要添加、去掉某些入口的需求，要保证全
原创
2017-06-21 10:20:10
821阅读
