网站建设推广ppt模板,用red5做直播网站,wordpress主题后台设置,阿克苏网站建设优化1 初识Webpack
1.1 什么是Webpack
Webpack打包工具对项目中的复杂文件进行打包处理#xff0c;可以实现项目的自动化构建#xff0c;并且给前端开发人员带来了极大的便利。 目前#xff0c;企业中的绝大多数前端项目是基于Webpack打包工具来进行开发的。
1.2 Webpack的安…1 初识Webpack
1.1 什么是Webpack
Webpack打包工具对项目中的复杂文件进行打包处理可以实现项目的自动化构建并且给前端开发人员带来了极大的便利。 目前企业中的绝大多数前端项目是基于Webpack打包工具来进行开发的。
1.2 Webpack的安装与使用
使用npm包管理工具安装webpack和webpack-cli两个模块。 npm install webpack webpack-cli -D 目录下新建webpack.config.js文件
// 使用module.exports方式导出配置对象。
// mode用来指定构建模式
module.exports {mode: development
};// package.json
// 设置dev为webpack
// 表示当我们使用npm run dev命令时
// 就可以执行script节点下dev选项的脚本来启动Webpack对项目进行打包处理。
dev: webpack在Webpack的4.x版本中默认约定entry打包的入口文件为src下的index.jsoutput打包的输出文件为dist下的main.js。
1.3 手动配置入口和出口文件
配置Webpack默认入口和出口文件配置是通过手动设置webpack.config.js文件中的配置对象的entry和output属性来定义新的入口和出口文件。
// webpack.config.js
// 导入操作文件路径的模块
const path require(path);
module.exports {mode: development,// 打包入口文件的路径entry: path.join(__dirname, ./src/index.js),output: {path: path.join(__dirname, ./dist), // 输出文件的存放路径filename: bundle.js // 输出文件的名称}
};1.4 使用Webpack实现列表隔行换色效果
利用Webpack中jQuery插件来实现列表隔行换色的页面效果。
安装jQuery插件 npm install jquery -S 使用$.css()方法实现页面效果打包index.js新建index.html文件查看列表隔行换色效果
// index.js
// 使用ES6模块化语法导入jquery插件
import $ from jquery;
$(function() {$(li:odd).css(backgroundColor, lightgreen);$(li:even).css(backgroundColor, lightblue);
});1.5 Webpack与Gulp对比
gulp是工具链、构建工具。可以配合各种插件做js压缩css压缩less编译等可以替代手工实现自动化工作而webpack是文件打包工具可以把项目的各种js文件、css文件等打包合并成一个或多个文件主要用于模块化方案预编译模块的方案。在定义和使用类比中两者都有各的用途同时webpack为初级编译程序gulp为高级编译程序在功能上要比webpack应用程序中多。webpack可以很方便使用node_module、es6或者样式注入等功能作为最初级的功能定位性价比最高webpack输入输出都以js为主对html兼顾较少可用组件不多很难达到可用的程度。gulp在编程方面较为复杂但是可用的组件也会更多手动编译的情况下耗时较长同时此软件不适合初级入门者使用。Gulp侧重于前端开发的整个过程的控制管理像是流水线我们可以通过给gulp配置不通的task通过Gulp中的gulp.task()方法配置比如启动server、sass/less预编译、文件的合并压缩等等来让gulp实现不同的功能从而构建整个前端开发流程。Webpack模块打包机 由此也可以看出Webpack更侧重于模块打包当然我们可以把开发中的所有资源图片、js文件、css文件等都可以看成模块最初Webpack本身就是为前端JS代码打包而设计的后来被扩展到其他资源的打包处理。Webpack是通过loader加载器和plugins插件对资源进行处理的。 | | Gulp | Webpack | | — | — | — | | 定位 | 基于流的自动化构建工具 | 一个万能模块打包器 | | 目标 | 自动化和优化开发工作流为通用 website 开发而生 | 通用模块打包加载器为移动端大型 SPA 应用而生 | | 学习难度 | 易于学习易于使用 api 总共只有 5 个方法 | 有大量新的概念和 api 学习成本高 | | 适用场景 | 基于流的作业方式适合多页面应用开发 | 一切皆模块的特点适合单页面应用开发 | | 作业方式 | 对输入 gulp.src 的 jstsscssless等源文件一次执行打包bundle、编译complie、压缩、重命名等处理后输出gulp.dest到指定目录中去为了构建而打包 | 对入口文件 entry 递归解析生成依赖关系图然后将所有依赖打包在一起在打包之前会将所有依赖转译成可打包的 js 模块为了打包而构建 | | 使用方式 | 常规 js 开发编写一系列构建任务( task ) | 编辑各种 JSON 配置项优点 | | 优点 | 适合多页面开发易于学习易于使用接口优雅 | 可以打包一切资源适配各种模块系统 | | 缺点 | 单页面应用方面输出乏力而且对流行的单页技术有些难以处理比如 Vue 单文件组件使用 gulp 处理就会很困难而webpack 一个 Ioader 就能轻松搞定 | 不适合多页应用开发灵活度高但同时配置很繁琐复杂。“打包一切”这个优点对于 HTTP/1.1 尤其重要因为所有资源打包在一起能明显减少浏览器访问页面时的资源请求数量从而减少应用程序必须等待的时间。但这个优点可能会随着 HTTP/2 的流行而变得不那么突出因为 HTTP/2 的多路复用可以有效解决客户端并行请求时的瓶颈问题。 | | 结论 | 浏览器多页面应用MPA首选方案 | 浏览器单页面SPA首选方案 |
2 Webpack自动打包
2.1 配置webpack-dev-server
webpack-dev-server可以支持项目自动打包的工具可以启动一个实时打包的HTTP服务器使用webpack-dev-server来实现项目的自动打包功能。
安装webpack-dev-server插件 npm install webpack-dev-server -D 修改package.json中scripts选项中的dev命令 dev: webpack-dev-server 自动打包bundle.js npm run dev在命令执行后会自动生成bundle.js文件它不会放到物理磁盘上而是放到了内存中是一个虚拟的看不见的bundle.js文件。 在index.html文件中引入bundle.js script src/bundle.js/script引入的根目录下的bundle.jsbundle.js文件可以通过localhost:8080/bundle.js可以访问到代码。 查看页面效果
2.2 配置html-webpack-plugin
html-webpack-plugin插件用来生成预览的页面。
安装html-webpack-plugin插件 npm install html-webpack-plugin -D 实例化HtmlWebpackPlugin()配置html-webpack-plugin插件重新进行打包查看页面效果
// webpack.config.js
// 导入生成预览页面的插件得到一个构造函数
const HtmlWebpackPlugin require(html-webpack-plugin);
// 创建插件的实例对象
const htmlPlugin new HtmlWebpackPlugin({// 指定要用到的模板文件template: ./src/index.html, // 指定生成的文件的名称该文件存在于内存中在目录中不显示filename: index.html
});// plugins数组是webpack打包期间会用到的一些插件列表
module.exports {// 原代码plugins: [ htmlPlugin ]
};// package.json
// 修改scripts选项中的dev命令
// --open参数用来实现打包完成后自动打开浏览器页面功能
// --host参数用来配置IP地址127.0.0.1
// --port参数用来配置端口号3000。
dev: webpack-dev-server --open --host 127.0.0.1 --port 30003 Webpack中的加载器
3.1 css-loader和style-loader加载器
在默认的情况下Webpack能打包处理一些以.js后缀名结尾的简单模块而其他非.js后缀名结尾的复杂模块是不能打包处理的需要通过调用特定的加载器来打包处理相应文件模块否则会报错。 常用加载器
css-loader加载器和style-loader加载器sass-loader加载器less-loader加载器postcss-loader加载器url-loader加载器babel-loader加载器
在Webpack中同时使用css-loader和style-loader加载器来打包处理CSS文件。
新建index.css 初始化li元素的默认样式li {list-style: none;} 引入index.css 引入当前目录下的css目录中的index.css模块打开index.js文件在该文件的头部区域添加代码import ./css/index.css;报错是因为没有安装处理CSS文件的相关loader加载器 运行报错 保存文件后查看运行结果 配置loader 安装style-loader和css-loader加载器并配置loader规则npm install style-loader css-loader -D 查看页面效果 保存文件后使用npm run dev命令重新启动服务器打开webpack.config.js文件添加module属性“/\.css$/”表示匹配文件名后缀为.css的文件use表示调用对应的loader加载器。
module: {rules: [{test: /\.css$/, use: [style-loader, css-loader]},]
}3.2 sass-loader加载器
SassSyntactically Awesome Stylesheets是一个成熟、稳定、功能强大的专业级CSS扩展语言。使用Sass语言以及Sass的样式库如 Compass有助于更好地组织管理样式文件并更高效地开发项目。 在Webpack中sass-loader加载器可以用来打包处理Sass文件。
在css目录中新建index.scss文件编写Sass代码。 ul {font-size: 12px; li{line-height: 30px;}} 安装处理.scss文件的sass-loader加载器和node-sass模块 npm install sass-loader node-sass -Dnode-sass是sass-loader的内置依赖项当使用sass-loader时必须同时安装node-sass模块。 在rules数组列表中添加处理index.scss文件的loader规则 打开webpack.config.js文件{test: /\.scss$/,use: [style-loader, css-loader, sass-loader]},“/\.scss$/”表示匹配文件名后缀为.scss的文件use中的sass-loader首先被调用处理匹配到的Sass文件然后将返回结果依次向前传递直到结束。 打开index.js文件在该文件的头部区域添加代码 import ./css/index.scss;使用npm run dev命令重新启动服务器
3.3 less-loader加载器
LessLeaner Style Sheets是一门CSS扩展语言也称为CSS预处理器。作为CSS的一种形式的扩展它并没有减少CSS的功能而是在现有的CSS语法上为CSS加入程序式语言的特性。 在Webpack中可以使用less-loader加载器来打包处理Less文件。
在css目录中新建index.less文件编写less代码。 body {margin: 0;padding: 0; ul {padding: 0;margin: 0;}} 安装处理.less文件的less-loader加载器和less模块 npm install less-loader less -Dless模块是less-loader加载器的内置依赖项当使用less-loader时必须同时安装less模块。 在rules数组列表中添加处理index.less文件的loader规则 { test: /\.less$/, use: [style-loader, css-loader, less-loader]},“/\.less$/”表示匹配文件名后缀为.less的文件less-loader加载器用来处理匹配到的.less文件 打开index.js文件在该文件的头部区域添加代码 import ./css/index.less;使用npm run dev命令重新启动服务器
3.4 postcss-loader加载器
PostCSS是一个用JavaScript工具和插件转换CSS代码的工具类似于Babel对JavaScript的处理。 PostCSS的功能如下
使用下一代CSS语法自动补全浏览器的前缀自动把px单位转换成rem压缩CSS代码
autoprefixer是一个后处理程序插件它经常与postcss-loader加载器一起配合使用会自动为普通的CSS添加浏览器前缀并且支持W3C最新的规范。
定义input搜索框 bodyinput typetext placeholder搜索//body设置input输入框的placeholder属性的值为“搜索” 定义占位文本的字体颜色为红色效果 ::placeholder{color: red;}伪元素::placeholder选择器用来选择一个表单元素的占位文本 运行程序 Chome浏览器中的“搜索”字体颜色显示为红色IE11浏览器中的“搜索”字体颜色显示为灰色 安装postcss-loader加载器和autoprefixer插件 npm install postcss-loader autoprefixer -Dpostcss-loader和autoprefixer可以自动添加CSS的浏览器兼容性前缀 引入autoprefixer插件配置插件autoprefixer插件 新建postcss.config.js文件编写JavaScript代码设置属性的值为数组列表并在数组列表挂载一个autoprefixer插件
const autoprefixer require(autoprefixer); // 导入自动添加前缀的插件
module.exports {plugins: [ autoprefixer ] // 挂载插件
};修改处理index.css文件的loader规则 打开webpack.config.js文件编写代码{ test: /\.css$/, use: [style-loader, css-loader, postcss-loader]},在use数组的最后添加一个postcss-loader加载器用来自动为普通的CSS添加浏览器前缀 使用npm run dev命令重新启动服务器
3.5 url-loader加载器
url-loader加载器用来打包处理CSS中与URL路径地址相关的图片和字体文件并将图片和字体文件转换成为base64图片形式。
定义背景图片 定义id值为box的div元素bodydiv idbox/div/body设置id值为box的div元素的背景图片#box{width: 580px;height: 340px;background: url(../images/1.jpg);} 配置url-loader规则 安装url-loader和file-loader加载器npm install url-loader file-loader -Durl-loader和file-loader能处理图片和字体文件添加处理图片和字体文件的loader规则打开webpack.config.js文件编写代码{test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use: url-loader?limit16940},test的值表示匹配不同格式的图片和字体文件“?”符号与参数项“limit16940”连接。limit参数用来指定图片的大小单位是字节byte。当图片小于16940时才会被转为base64图片 查看图片效果 使用npm run dev命令重新启动服务器
3.6 babel-loader加载器
项目开发过程中当编写JavaScript代码时有时候会使用JavaScript高级语法这些高级语法存在兼容性的问题。我们可以使用babel-loader加载器对JavaScript高级语法进行打包处理如class语法。
创建Person类 使用class关键字创建Person类class Person {static name 张三};console.log(Person.name);保存文件后运行结果报错是因为没有安装处理JavaScript高级语法的babel-loader加载器和插件 配置babel-loader规则 安装babel-loader、 babel/core等插件npm install babel-loader babel/core babel/runtime -D安装处理JavaScript高级语法的插件npm install babel/preset-env babel/plugin-transform-runtime babel/plugin-proposal-class-properties -D babel/preset-env 是一个智能预设可让开发人员使用最新的JavaScript而无须微观管理目标环境所需的语法转换。babel/plugin-transform-runtime 是Babel 转换器相关的插件。babel/plugin-proposal-class-properties 插件用于编译class。 初始化babel基本配置新建babel.config.js文件编写JavaScript代码配置对象中的presets属性的值为数组列表并在数组中添加安装后的babel/preset-env智能预设
module.exports {presets: [ babel/preset-env ],plugins: [ babel/plugin-transform-runtime, babel/plugin-proposal-class-properties ]
};添加处理JavaScript高级语法的loader规则{ test: /\.js$/, use: babel-loader, exclude: /node_modules/},“/\.js$/”表示匹配文件名后缀为.js的文件,设置exclude属性的值为“/node_modules/”表示babel-loader加载器不需要处理node_modules中的JavaScript文件。查看控制台打印结果 使用npm run dev命令重新启动服务器index.html文件中已经手动引入过bundle.js
