const HtmlWebpackPlugin = require; // html打包。// 从所有 JavaScript 条目中提取现有源映射。// 这包括内联源映射以及通过 URL 链接的地图。所有源地图数据都传递给 Webpack 进行处理

viewportWidth也是vw布局从配置上来说比rem布局简洁了很多，bu需要配置安装lib，也不需要增加一个rem.js文件。在vue.config.js中找到loaderOptions，如果没有的话需要在css属性下增加postcss. selec

为一个网站选择类型尺寸是项艰巨的任务. 标题和段落的尺寸在网页布局和可读性方面处理起来很棘手. 谢天谢地, 我们有模块化缩放可以引导我们.在版面中应用的模块化比例实现了视觉层次效果与和谐的比例。它们提供了一组数值作为字体尺寸和间距的方针。在web内容中实施

//css兼容性处理：postcss --> postcss-loader postcss-preset-env. //帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式

在 这里 display:flex 需要兼容性处理，webpack 编译打包时，需要使用postcss-loader 这个loader 和 postcss-preset-env 这个插件，它帮postcss找到package.json中browsersli

postcss-pxtorem是一款将px转换成rem格式的方式，本质上是以html标签的fontsize值为基准，动态改变元素的各种计量单位。网上看到在安装后vue项目根目录下会自动生成一个postcss.config.js的配置文件，但是笔者在安装导入

介绍postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值。下面提供了两种方法解决这种第三方框架的组件出现缩小的问题，下面均以vant-ui为例：。在根目录下新建postcs

rem是根元素中的font-size值。rem布局不多赘述，有很多详细说明rem布局原理的资料。简单的说，通过JS获取设备宽度动态设定rem值，以实现在不同宽度的页面中使用rem作为单位的元素自适应的效果。const baseSize = 192; //

刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功，后来经过自己不断尝试之后终于成功了。

webpack4.0从零开始单页（多页）应用配置 (一)webpack4.0从零开始单页（多页）应用配置(二). 一些css3样式需要添加各个厂家的前缀才能生效，而现在css3运用比较长见，显然我们没必要在每个地方去添加前缀。相对在extract-text

vue-cli3 项目postcss-pxtorem的配置放在vue.config.js中。selectorBlackList: [".van"],// 要忽略的选择器并保留为px。propList: ["*"],

最近基于vue-cli2 学习webpack，将vue-cli2的webpack配置强撸了一遍，感觉身体已被掏空。。。但还是收获不少的，起码掌握了webpack的一些基本套路、开发环境和生产环境的概念、根据不同的环境写不同的webpack配置、和一些常用插

然后再，安装postcss-px2rem插件

...是es6的对象扩容运算符，目前babel暂不支持，需要引入新的包来解决，要安装一个babel插件翻译对象展开运算符语法。"plugins": ["transform-object-rest-spread"] /

再聊移动端页面适配，rem和vw适配方案！基准：750设计稿；目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；――最大程度减少工作。很久之前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性

焦点比较页面渲染的方式来自谷歌团队的页面渲染实践总结。从服务端渲染到客户端渲染，不同的页面渲染方式，对页面性能、用户体验和 SEO 都有不同程度的影响。没有银弹，开发者应该根据实际情况来选择。教程JS 开发者成长的9个阶段作者概述了 JS 开发者从入门到精

节点类型postcss会将我们的css生成ast，然后会去遍历它，在遍历的过程中会传给我们一些不同类型的节点对象，我们主要需要了解的几个类型：

写在前面的话前端工程化日益成熟今天，我们对于工具越来越深的封装。不管是从vue-cli的3.0版本起，还是umi、bigfish 等前端脚手架，对于webpack都封装在内，对于工程化无疑是高效的，但也在一定程度上让新手们者失去了从零配置一个项目的机会，所

不过我个人习惯仅安装在项目中，于是我没有选择安装CLI，而是直接在项目中安装PostCSS，

package.json来制定名单，需要哪些npm包来参与到项目中来，npm install命令根据这个配置文件增减来管理本地的安装包。这里面存放着我们项目的配置项，比如引入的依赖、项目作者、项目版本、项目编译启动的命令、还有就是dependencies和