jieweiwujie的博客

each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而 是一连串的值，也就是值列表。

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。跟我们普通css里面@import的区别。在index.scss里面使用。

通过连接符与下划线 定义的同名变量为同一变量；

SASS语法嵌套规则

这是第一个这是第2个

【代码】Webpack:总结（4）vue3项目配置。

主要是分为三个文件。

生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。

【代码】Webpack:总结（1.1） 基本使用，配置，模式介绍。

【代码】Webpack:总结（2） 高阶使用。

开发模式顾名思义就是我们开发代码时使用的模式。编译代码，使浏览器能识别运行开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源代码质量检查，树立代码规范提前检查代码的一些隐患，让代码运行时能更加健壮。提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化代码运行性能优化代码打包速度。

比如这种，有的浏览器不识别，需要转换

使用demo：

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式这样对于网站来说，会出现闪屏现象，用户体验不好我们应该是单独的 Css 文件，通过 link 标签加载性能才好。

module: { rules: [ // (1) 配置css文件的解析 { // 正则: 匹配所有以css结尾的文件 test: /\.css$/, // 实际处理顺序: 从右往左 // css-loader 让webpack能够识别解析 css 文件 // style-loader 通过动态的创建style标签的方式(js), 让解析后的css内容, 能够作用到页面中 u...

一、前端模块化webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。二、打包webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）。在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将

1.数据轮播不够5条（一次五条数据切换），可以再复制一次数据，进行2次轮播展示2.css点击tab切换展示下划线

我们可以缓存之前的 Eslint 检查 和 Babel 编译结果，这样第二次打包时速度就会更快了。每次打包时 js 文件都要经过 Eslint 检查 和 Babel 编译，速度比较慢。对 Eslint 检查 和 Babel 编译结果进行缓存。

yarnaddvue-loadervue-template-compiler-D

基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem - 秋风2016 - 博客园基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem1，安装 flexible和 postcss-px2rem（命令行安装）npm install lib-flexible --savenpm install postcss-px2rem --save简要介绍这两个包的用途：flexible会为页面根据屏

HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。此时 css 样式经过 style-loader 处理，已经具备 HMR 功能了。但是 js 还不行。开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。上面这样写会很麻烦，所以实际开发我们会使用其他 loader 来解决。

开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。我们可以对图片进行压缩，减少图片体积。: 用来压缩图片的插件。

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty() 来劫持各个属性的setter , getter，在数据变动时发布消息给订阅者，触发相应的监听回调。当你把一个普通的 JavaScript 对象传入 Vue 实例作为data选项，Vue 将遍历此对象所有的 property，并使用Object.defineProperty把这些 property 全部转为getter/setter。Object.defineProperty...

一般在webpack.config.js或者vite.config.js等配置文件配置。

原来index.html。

1 需要先引入// 公共的一些配置const path = require('path')// 引入自动生成 html 的插件const HtmlWebpackPlugin = require('html-webpack-plugin')// 引入分离 css 文件的 模块const MiniCssExtractPlugin = require('mini-css-extract-plugin')// 导入清除插件, 可以在每次打包之前, 清除 dist目录的内容const { Cle..

webpack5中 默认生产模式已经开启了：html 压缩和 js 压缩。

clean: true,

BabelJavaScript 编译器。主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

顾名思义就是只能匹配上一个 loader, 剩下的就不匹配了。打包时每个文件都会经过所有 loader 处理，虽然因为。正则原因实际没有处理上，但是都要过一遍。生产模式也是如此配置。

js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理。

webpack.base.js// 公共的一些配置const path = require('path')// 引入自动生成 html 的插件const HtmlWebpackPlugin = require('html-webpack-plugin')// 引入分离 css 文件的 模块const MiniCssExtractPlugin = require('mini-css-extract-plugin')// 导入清除插件, 可以在每次打包之前, 清除 dist目录的内容c.

禁用了 Babel 自动对每个文件的 runtime 注入，而是引入。Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！Babel 对一些公共方法使用了非常小的辅助代码，比如。你可以将这些辅助代码作为一个独立模块，来避免重复引入。默认情况下会被添加到每一个需要它的文件中。并且使所有辅助代码从这里引用。

版本5 已经内置url-loader 和file-loader；

【代码】css动画过度。

【代码】css动画：div加载旋转，hover放大效果。

【代码】call，bind，apply修改this指向问题！javascript，react，原生js必备技能。

【代码】{}解构，连续解构，解构重新赋值。

【代码】js将对象转化为固定字符串；querystring库使用。