湖州民生建设有限公司网站,软件下载网站怎么赚钱,十堰微网站建设多少钱,苏州网站开发公司一、基本配置
在开始使用 webpack 之前#xff0c;我们需要对 webpack 的配置有一定的认识
1、5大核心概念
1#xff09;entry #xff08;入口#xff09;
指示 webpack 从哪个文件开始打包
2#xff09;output#xff08;输出#xff09;
制视 webpack 打包完的…一、基本配置
在开始使用 webpack 之前我们需要对 webpack 的配置有一定的认识
1、5大核心概念
1entry 入口
指示 webpack 从哪个文件开始打包
2output输出
制视 webpack 打包完的文件输出到那里去如何命名等
3loader加载器
webpack 本身只能处理 js、json 等资源其他资源需要借助 loader webpack 才能解析
4plugins插件
扩展 webpack 的功能
5mode模式
主要有两种模式 开发模式development 生产环境production
2、配置文件
项目中添加 文件命名为 webpack.config.js
const path require(path)module.exports {// 入口entry: ./main.js,// 相对路径// 输出output: {// __dirname 是 nodejs 的遍历代表当前文件的文件夹目录path: path.resolve(__dirname, dist),// 绝对路径filename: main.js},// 加载器module: {rules: [// loader 的配置]},// 插件plugins: [],// 模式mode: development, // 开发模式
}二、开发模式介绍
开发模式顾名思义就是我们开发代码时使用的模式。 这个模式下我们主要做两件事情
1、编译代码使浏览器能够识别运行
开发时我们有样式资源、字体图标、图片压缩、html资源等webpack 默认都不能处理这些资源所以我们要加载配置来编译这些资源
2、代码质量检查树立代码规范
提前检查代码的一些隐患让代码运行时能更加健壮 提前检查代码规范和格式统一团队编码风格让代码更优雅美观
三、处理样式资源
csslesssassscss styl 等样式资源
SCSS/SASS 相对于 CSS 的优势
变量支持
// 定义变量
$primary-color: #3498db;
$font-size: 16px;// 使用变量
body {font-size: $font-size;color: $primary-color;
}更好的样式嵌套
.nav {ul {list-style: none;}li {display: inline-block;a {color: $primary-color;}}
}可复用的混合宏Mixins
mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;
}.box { include border-radius(10px);
}样式继承
.btn {padding: 10px;background-color: $primary-color;
}
.btn-primary {extend .btn;
}条件语句和循环
$theme: light;
body {if $theme light {background-color: white;} else {background-color: black;}
}
// 循环生成多个类
for $i from 1 to 5 {.item-#{$i} {width: 100px * $i;}
}样式模块化Partials
// _variables.scss
$primary-color: #3498db;//index.scss
import variables;数学运算
.container {width: 100% - 20px;margin: 10px * 2;
}更强的性能优化能力 SCSS/SASS 在编译时会压缩和优化代码移除多余的空格、注释等从而减少最终生成的 CSS 文件的大小提高页面加载性能。
CSS 需要手动进行优化或者依赖外部工具进行压缩。
支持模块系统use 和 forward
// _colors.scss
$primary-color: #3498db;
// main.scss
use colors;
body {color: colors.$primary-color;
}1、介绍
webpack 本身是不能识别样式资源的所以我们需要借助 Loader 来帮助 webpack 解析样式资源 我们找 Loader 都应该去官方文档中查找使用 官方文档https://webpack.docschina.org/concepts/#loaders
2、处理 css 资源
1下载包
npm i css-loader style-loader -D 注意需要下载两个 loader
2功能介绍
css-loader 负责将 css 文件编译成 webpack 能识别的模块
style-loader会动态创建一个 style 标签里面放置webpack 中 css 模块内容
此时样式就会以 style 标签的形式在页面上生效
3配置
module.exports {module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader],},],},
};const path require(path)module.exports {// 入口entry: ./main.js,// 相对路径// 输出output: {// __dirname 是 nodejs 的遍历代表当前文件的文件夹目录path: path.resolve(__dirname, dist),// 绝对路径filename: main.js},// 加载器module: {rules: [// loader 的配置{test: /\.css$/i,// 正则检测哪些文件// use 的执行顺序 从右往左从下到上 use: [style-loader, // 通过创建style 标签添加到html 文件中生效css-loader // 将css 资源编译成 commonjs的模块到 js 中],},]},// 插件plugins: [],// 模式mode: development, // 开发模式
}3、处理 less 资源
1安装
npm install less less-loader --save-dev 将 less 文件编译成 css 文件
2配置(webpack.config.js)
module.exports {module: {rules: [{test: /\.less$/i,use: [// compiles Less to CSSstyle-loader,css-loader,less-loader,],},],},
};4、处理 scss/sass 资源
1安装
npm install sass-loader sass webpack --save-dev
2配置
module.exports {module: {rules: [{test: /\.s[ac]ss$/i,//匹配 sass/scss 两种文件use: [// 将 JS 字符串生成为 style 节点style-loader,// 将 CSS 转化成 CommonJS 模块css-loader,// 将 Sass 编译成 CSSsass-loader,],},],},
};5、处理 Styl 资源
1安装
npm i stylus-loader -D
2配置
module.exports {module: {rules: [{test: /\.styl$/i,//匹配 sass/scss 两种文件use: [// 将 JS 字符串生成为 style 节点style-loader,// 将 CSS 转化成 CommonJS 模块css-loader,// 将 Sass 编译成 CSSstylus-loader,],},],},
};四、处理图片资源
过去在 webpack4 时我们处理图片资源通过 file-loader 和 url-loader 进行处理
现在 webpack5 已经将两个 Loader 功能内置到 webpack 里了我们只需要简单配置即可处理图片资源
1、配置
const path require(path)
module.exports {entry: ./main.js,output: {path: path.resolve(__dirname, dist),filename: main.js},module: {rules: [{test: /\.(png|jpg|webp|svg|jpeg|gif)/,type: asset,parser: {dataUrlCondition: {// 小于 10kb 的图片转换成 base64.maxSize: 10 * 1024 }}}]}
}图片转成 base64 的优势是 减少请求数量缺点是体积会变大。 一般小图片会考虑转成 base64 大图还是请求如果也转换 base64 的话就导致页面加载缓慢
有转换的时候图片在打包后的文件夹里会少一些
2、修改不同资源的输出目录比如图片到 image css 到 css 文件夹
const path require(path)
module.exports {entry: ./main.js,output: {path: path.resolve(__dirname, dist),filename: static/js/main.js// 入口的文件打包以后输出到 js 中},module: {rules: [{test: /\.(png|jpg|webp|svg|jpeg|gif)/,type: asset,parser: {dataUrlCondition: {// 小于 10kb 的图片转换成 base64.maxSize: 10 * 1024 }},generator: {//hash 值 ext 扩展名 query 一些其他的参数 hash:10表示hash值取前10位不写就是全部filename: static/image/[hash:10][ext][query]}}]}
}3、自动清空上次打包的内容
webpack4 需要 clearwebpackplugin 的插件来处理webpack5 加一个 clean 参数即可
const path require(path)
module.exports {entry: ./main.js,output: {path: path.resolve(__dirname, dist),filename: static/js/main.js,// 入口的文件打包以后输出到 js 中clean: true // 原理到抱歉将path 整个目录内容清空},module: {rules: [{test: /\.(png|jpg|webp|svg|jpeg|gif)/,type: asset,parser: {dataUrlCondition: {// 小于 10kb 的图片转换成 base64.maxSize: 10 * 1024 }},generator: {//hash 值 ext 扩展名 query 一些其他的参数 hash:10表示hash值取前10位不写就是全部filename: static/image/[hash:10][ext][query]}}]}
}五、处理字体图标资源
1、下载字体图标并引入到 main.js 中
iconfont可以在阿里巴巴的矢量图中下载。
const path require(path);
module.exports {entry: ./main.js,output: {path: path.resolve(__dirname, dist),filename: static/js/main.js,// 入口的文件打包以后输出到 js 中clean: true // 原理到抱歉将path 整个目录内容清空},module: {rules: [{test: /\.(png|jpg|webp|svg|jpeg|gif)/,type: asset, // 会转成base64parser: {dataUrlCondition: {// 小于 10kb 的图片转换成 base64.maxSize: 10 * 1024 }},generator: {//hash 值 ext 扩展名 query 一些其他的参数 hash:10表示hash值取前10位不写就是全部filename: static/image/[hash:10][ext][query]}},{test: /\.(ttf|woff2?)/,type: asset/resource, // 原样输出不再转换parser: {dataUrlCondition: {// 小于 10kb 的图片转换成 base64.maxSize: 10 * 1024 }},generator: {//hash 值 ext 扩展名 query 一些其他的参数 hash:10表示hash值取前10位不写就是全部filename: static/fonts/[hash:10][ext][query]}}]}
}六、处理 js 资源
为什么还需要处理 js资源 原因是 webpack 对 js 处理是有限的只能编译 js 中 ES 模块化语法不能编译其他语法导致 js 不能在 IE 等浏览器运行所以还需要做一些兼容性处理
1、Eslint
可组装的 JavaScript 和 JSX 检查工具。
这句话意思就是它用来检测 js 和 jsx 的工具可以配置各项功能
1.1 配置文件
配置文件有很多写法
eslintrc.* 新建文件位于项目根目录 .eslintrc .eslintrc.js .eslintrc.json 区别在于配置格式不一样
ESlint会查找和自动读取他们所以以上配置文件只需要存在一个即可
1.2 具体配置
以 .eslintrc.js 配置文件为例
module.exports {// 解析选项parserOptions: {ecamVersion: 6,// ES 语法版本sourceType: module,// ES 模块化ecmaFeatures: {// ES 其他特性jsx: true, // 如果是 React 项目就需要开启 jsx 语法}},// 具体检查规则rules: {// off 或 0关闭规则// warn 或 1开启规则使用警告级别的错误warn 不会导致程序退出// “error”或2开启规则使用错误级别的错误error 当被触发的时候程序会退出semi: error, // 禁止使用分号array-callback-return: warn,// 强制数组方法的回调函数中有 return 语句否则警告default-case: [warn,{commonentPattern: ^no default$} // 允许在最后注释 no default 就不会有警告了],eqeqeq: [warn, // 强制使用 和 ! 否则警告smart]},// 继承其他规则直接使用 网站上别人写好的规则或者是官方写好的规则extends: []
}
