北京建设门户网站ppt模板免费下载哪个网站好

当前位置： 首页 > news >正文

北京建设门户网站,ppt模板免费下载哪个网站好,网络维护工作室 员工职务,单页面应用优化目录 一、loader简介1.1 使用 loader1.1.1 配置文件方式1.1.2 内联方式 1.2 loader 特性1.3 解析 loader1.4 命名规范 二、css loader的安装和使用2.1 安装2.2 配置2.3 测试 三、 less-loader 的安装和使用3.1 安装3.2 配置3.3 测试3.4 附件3.4.1 webpack.config.js3.4.2 index… 目录 一、loader简介1.1 使用 loader1.1.1 配置文件方式1.1.2 内联方式 1.2 loader 特性1.3 解析 loader1.4 命名规范 二、css loader的安装和使用2.1 安装2.2 配置2.3 测试 三、 less-loader 的安装和使用3.1 安装3.2 配置3.3 测试3.4 附件3.4.1 webpack.config.js3.4.2 index.js3.4.3 package.json 四、 url-loader的安装和使用4.1 Base64图片4.2 安装4.3 配置4.4 测试4.4.1 index.js4.4.2 index.html4.4.3 执行 五、babel-loader5.1 安装5.2 配置5.3 babel.config.js5.4 测试 Webpack 本身只能处理 JavaScript 模块如果要处理其他类型的文件就需要使用loader进行转换。 Loader 可以理解为是模块和资源的转换器它本身是一个函数接受源文件作为参数返回转换的结果。这样我们就可以通过 require 来加载任何类型的模块或文件比如 CoffeeScript、 JSX、 LESS 或图片。 一、loader简介 loader 用于对模块的源代码进行转换。loader 可以使你在​import​或 “load(加载)” 模块时预处理文件。因此loader 类似于其他构建工具中“任务(task)”并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言如 TypeScript转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 ​import​ CSS 文件 1.1 使用 loader 在你的应用程序中有两种使用 loader 的方式 配置方式推荐在 webpack.config.js 文件中指定 loader。内联方式在每个 ​import​ 语句中显式指定 loader。 注意在 webpack v4 版本可以通过 CLI 使用 loader但是在 webpack v5 中被弃用。 1.1.1 配置文件方式 ​module.rules​ 允许你在 webpack 配置中指定多个 loader。 这种方式是展示 loader 的一种简明方式并且有助于使代码变得简洁和易于维护。同时让你对各个 loader 有个全局概览 module.exports {module: {rules: [{test: /.css\(/,use: [{ loader: style-loader },{loader: css-loader,options: {modules: true,},},{ loader: sass-loader },],},],}, };loader 从右到左或从下到上地取值(evaluate)/执行(execute)。在下面的示例中从 sass-loader 开始执行然后继续执行 css-loader最后以 style-loader 为结束。 1.1.2 内联方式 可以在 ​import​ 语句或任何 与 “import” 方法同等的引用方式 中指定 loader。使用 ​!​ 将资源中的 loader 分开。每个部分都会相对于当前目录解析。 import Styles from style-loader!css-loader?modules!./styles.css;1.2 loader 特性 loader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果也就是应用过转换后的资源传递给下一个 loader依此类推。最后链中的最后一个 loader返回 webpack 所期望的 JavaScript。loader 可以是同步的也可以是异步的。loader 运行在 ​Node.js​ 中并且能够执行任何操作。loader 可以通过 ​options​ 对象配置仍然支持使用 ​query​ 参数来设置选项但是这种方式已被废弃。除了常见的通过 ​package.json​ 的 ​main​ 来将一个 npm 模块导出为 loader还可以在 module.rules 中使用 loader 字段直接引用一个模块。插件(plugin)可以为loader带来更多特性。loader 能够产生额外的任意文件。 可以通过 loader 的预处理函数为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑例如压缩、打包、语言转译或编译和 更多其他特性。 1.3 解析 loader loader 遵循标准 模块解析 规则。多数情况下loader 将从 模块路径 加载通常是从 ​npm​ ​install​, ​node_modules​ 进行加载。 我们预期 loader 模块导出为一个函数并且编写为 Node.js 兼容的 JavaScript。通常使用 npm 进行管理 loader但是也可以将应用程序中的文件作为自定义 loader。 1.4 命名规范 按照约定loader 通常被命名为 ​xxx-loader​例如 ​json-loader​ 在引用 loader 的时候可以使用全名 json-loader或者使用短名 json。这个命名规则和搜索优先级顺序在 webpack 的 resolveLoader.moduleTemplates api 中定义。 Default: [*-webpack-loader, *-web-loader, *-loader, *]二、css loader的安装和使用 css-loader 会对 import 和 url() 进行处理就像 js 解析 import/require() 一样 参考文档css-loader文档 2.1 安装 不指定版本安装npm i style-loader css-loader -D指定版本安装npm i style-loader3.3.3 css-loader6.8.1 -Di 为 install的简写 D:\A_MyWork\M05.MYCode\vscode\javascript\webpacknpm i style-loader css-loader -Dadded 16 packages in 2sD:\A_MyWork\M05.MYCode\vscode\javascript\webpack2.2 配置 修改配置文件webpack.config.js新增module节点。 test表示匹配文件的类型use表示对应要调用的loader多个loader的调用顺序是从后往前调用 module.exports {module: {// 定义了不同模块的loaderrules: [{test: /\.css\)/i,use: [style-loader, css-loader],}]} }2.3 测试 在src目录下新建css目录并在css目录下新建index.css li {list-style: none; }在源代码index.js中导入样式 import ./css/index.css执行打包命令npm run dev查看效果 三、 less-loader 的安装和使用 less-loader是webpack 将 Less 编译为 CSS 的 loader。 参考链接中文文档 3.1 安装 不指定版本安装npm i less-loader less -D指定版本安装npm i less-loader11.1.3 less4.1.3 -D D:\A_MyWork\M05.MYCode\vscode\javascript\webpacknpm i less-loader less -Dadded 16 packages in 4sD:\A_MyWork\M05.MYCode\vscode\javascript\webpack3.2 配置 修改配置文件webpack.config.js新增module节点及less的匹配规则。 module.exports {module: {// 定义了不同模块的loaderrules: [{test: /.css\(/i,use: [style-loader, css-loader],},{test: /\.less\)/i,use: [// compiles Less to CSSstyle-loader,css-loader,less-loader,],},]} }3.3 测试 在src目录下新建css目录并在css目录下新建index.less

• {margin: 0;padding: 0;li {line-height: 30px;padding-left: 20px;font-size: 12px;} }在源代码index.js中导入样式 import ./css/index.less执行打包命令npm run dev查看效果 3.4 附件 3.4.1 webpack.config.js // 导入node.js中专门操作路径的模块 const path require(path)
  const HtmlWebpackPlugin require(html-webpack-plugin) // 创建插件的实例对象 const htmlPlugin new HtmlWebpackPlugin({// 指定复制源文件的路径template:./src/index.html,// 指定创建文件的生成路径filename:./index.html }) module.exports {mode:development,// 打包入口的文件路径dirname表示当前文件的存放路径即工程路径entry:path.join(dirname,./src/index.js),output: {// 输出文件的存放路径path: path.join(dirname,./dist),// 输出文件的名称filename: bundle.js},devServer: {static: {directory: path.join(dirname, /),},// compress: true,port: 8080,host:127.0.0.1,open:true},plugins:[htmlPlugin],module: {// 定义了不同模块的loaderrules: [{test: /.css\(/i,use: [style-loader, css-loader],},{test: /\.less\)/i,use: [// compiles Less to CSSstyle-loader,css-loader,less-loader,],},]} }3.4.2 index.js import \( from jquery import ./css/index.css import ./css/index.less\)(function () {\((li:odd).css(background-color,red)\)(li:even).css(background-color,pink) })3.4.3 package.json {name: webpack,version: 1.0.0,description: ,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1,dev: webpack serve},keywords: [],author: ,license: ISC,dependencies: {jquery: ^3.7.0},devDependencies: {css-loader: ^6.8.1,html-webpack-plugin: ^5.5.3,less: ^4.1.3,less-loader: ^11.1.3,style-loader: ^3.3.3,webpack: ^5.88.2,webpack-cli: ^5.1.4,webpack-dev-server: ^4.15.1} }四、 url-loader的安装和使用 4.1 Base64图片 base64 编码是一种图片处理格式通过特定的算法将图片编码成一个长串字符串在页面上显示的时候可以用该字符串来代替图片的url属性。 优点 1、减少一个图片的http请求。网页中使用base64格式的图片时不用再请求服务器调用图片资源减少了服务器访问次数。 2、base64编码的字符串更适合不同平台、不同语言的传输 缺点 1、根据base64的编码原理编码后的大小会比原文件大小大1/3,如果把大图片编码到html/css中不仅会造成文件体积增加影响文件的加载速度还会增加浏览器对html或css文件解析渲染的时间。 2、使用base64无法直接缓存要缓存只能缓存包含base64的文件比如HTML或者CSS这相比于直接缓存图片的效果要差很多。 3、兼容性的问题ie8以前的浏览器不支持。一般一些网站的小图标可以使用base64图片来引入。 base64图片格式格式举例 data:image/png;base64,iVBORw0KGgoAAAANSUh…4.2 安装 不指定版本安装npm i url-loader file-loader -D指定版本安装npm i url-loader4.1.1 file-loader6.2.0 -D 参考文档url-loader文档 D:\A_MyWork\M05.MYCode\vscode\javascript\webpacknpm i url-loader file-loader -Dadded 6 packages in 23sD:\A_MyWork\M05.MYCode\vscode\javascript\webpack4.3 配置 修改配置文件webpack.config.js新增module节点。配置匹配规则url-loader?limit4734其中?之后的是loader的参数项。 limit 用来指定图片的大小单位是字节byte只有 limit大小的图片才会被转为base64格式的图片 module.exports {module: {// 定义了不同模块的loaderrules: [{test: /.css\(/i,use: [style-loader, css-loader],},{test: /\.less\)/i,use: [// compiles Less to CSSstyle-loader,css-loader,less-loader,],},{test: /.(png|jpg|gif)\(/,// 如果loader只有一个只传递一个字符串即可use : url-loader?limit4734}]} }4.4 测试 4.4.1 index.js import \) from jquery import ./css/index.css import ./css/index.less import logo from ./images/logo.png\((function () {\)(#img).attr(src,logo)\((li:odd).css(background-color,red)\)(li:even).css(background-color,pink) })4.4.2 index.html !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!– script src./index.js/script –!– 加载和引用内存里的bundle.js –!– script src/bundle.js/script – /head bodyulli1/lili2/lili3/lili4/lili5/lili6/lili7/lili8/lili9/li/ulimg src alt idimg/ /body /html4.4.3 执行 执行打包命令npm run dev查看效果 五、babel-loader webpack 只能打包处理一部分高级的javascript语法对于那些webpack无法处理的高级js语法需要借助于babel-loader进行打包处理。 参考文档 babel-loader文档babel/plugin-proposal-decorators文档 5.1 安装 不指定版本安装npm i babel-loader babel/core babel/plugin-proposal-decorators -D指定版本安装npm i babel-loader9.1.3 babel/core7.22.9 babel/plugin-proposal-decorators7.22.7 -D D:\A_MyWork\M05.MYCode\vscode\javascript\webpacknpm i babel-loader babel/core babel/plugin-proposal-decorators -Dadded 67 packages in 6sD:\A_MyWork\M05.MYCode\vscode\javascript\webpack5.2 配置 修改配置文件webpack.config.js新增module节点。配置匹配规则. 注意必须使用exclude指定排除项因为node_modules目录下的第三方包不需要被打包无需程序员关心,程序员只需要把自己的代码转换即可。 module.exports {module: {// 定义了不同模块的loaderrules: [{test: /.m?js$/,// 必须使用exclude指定排除项因为node_modules目录下的第三方包不需要被打包无需程序员关心,程序员只需要把自己的代码转换即可exclude: /(node_modules|bower_components)/,use:babel-loader}]} }5.3 babel.config.js 在项目根目录下新建 babel.config.js配置文件定义babel的配置项可参考网址: babel/plugin-proposal-decorators文档 module.exports {// 声明 babel 可用插件// 将来webpack 在调用 babel-loader 的时候会先加载 plugins 插件来使用plugins: [[babel/plugin-proposal-decorators, { version: legacy }]] }5.4 测试 修改index.js新增如下代码定义了一个装饰器语法 function info(target) {target.info Person info. }info class Person{}console.log(Person.info);执行打包命令npm run dev查看效果