webpack打包器小结（1）

================================================ 

【1】intro to webpack 

官网：

webpack官网: http://webpack.github.io/
webpack3文档(英文):  https://webpack.js.org/
webpack3文档(中文): https://doc.webpack-china.org/
 

================================================

【2】 自动化构建工具webpack_打包js,json文件

step1、创建文件夹 mywebpack ;

step2、在mywebpack 新建 package.json ，然后编辑， 填充如下配置：

{"name": "mywebpack","version": "1.0.0"
}

step3、安装webpack（ npm install webpack --save-dev ）完成后（或许还需要安装 webpack-cli 命令如下 npm install webpack-cli --save-dev ），package.json 变成这个样子： 且生成了一个文件 package-lock.json 

{"name": "mywebpack","version": "1.0.0","devDependencies": {"webpack": "^4.41.2"}
}

D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm install webpack-cli --save-dev
npm WARN mywebpack@1.0.0 No description
npm WARN mywebpack@1.0.0 No repository field.
npm WARN mywebpack@1.0.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ webpack-cli@3.3.10
added 24 packages from 22 contributors and audited 8972 packages in 19.616s
found 0 vulnerabilities

step4、开发index.js 首页，引入了js， css， json 文件；

目录结构如下：

文件明细如下：

index.js 

import {multiply, mod} from './math.js'
import '../css/test.css'
import user from '../data/user.json'
import data from "../../../webpack_test/src/data/test";document.write("hello world")
document.write(multiply(2, 2, ))
document.write(mod(1000, 33, ))
document.write(JSON.stringify(user))

math.js 


export function multiply(x, y) {return x * y
}export function mod(x, y) {return x % y
}

test.css

body{background: blue;
}#box1{width: 300px;height: 300px;background-image: url('../image/001.png');
}#box2{width: 300px;height: 300px;background-image: url('../image/002.png');
}

user.json 

{"name": "zhangsan","age" :100
}

step5、使用webpack打包， 如下：

打包命令如下： webpack src/js/index.js --output-filename bundle.js --output-path dist/js --mode development  

打包结果如下：

D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack src/js/index.js --output-filename bundle.js --output-path dist/js --mode development
Hash: d59b081e19a4db8cdb0d
Version: webpack 4.41.2
Time: 98ms
Built at: 2019-11-09 11:10:41 AMAsset      Size  Chunks             Chunk Names
bundle.js  6.42 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/css/test.css] 266 bytes {main} [built] [failed] [1 error]
[./src/data/user.json] 45 bytes {main} [built]
[./src/js/index.js] 243 bytes {main} [built]
[./src/js/math.js] 107 bytes {main} [built]ERROR in ./src/css/test.css 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> body{
|     background: blue;
| }@ ./src/js/index.js 2:0-24

错误信息说， 打包css文件需要css loader 加载器；

这里我们先注释掉 引入 css文件哪一行， 再次打包，成功， bingo。如下：

D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack src/js/index.js --output-filename bundle.js --output-path dist/js --mode development
Hash: fc7aed1243c6e0d706d5
Version: webpack 4.41.2
Time: 100ms
Built at: 2019-11-09 11:12:03 AMAsset      Size  Chunks             Chunk Names
bundle.js  5.63 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/data/user.json] 45 bytes {main} [built]
[./src/js/index.js] 246 bytes {main} [built]
[./src/js/math.js] 107 bytes {main} [built]

step6、打包结果如下：

step6.1 在dist文件夹下新建 index.html命令，然后引入 bundle.js , 如下：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的webpack首页</title>
</head>
<body><script type="text/javascript" src="js/bundle.js"></script>
</body>
</html>

 

================================================

【3】自动化构建工具webpack_config配置

1、写在前面：为什么需要引入 webpack.config.js 文件？ 
因为webpack的打包命令太复杂了，如 webpack src/js/entry.js --output-filename bundle.js --output-path dist/js --mode development 
而使用了 webpack.config.js 之后，只需要在命令行执行 webpack 即可。

2、webpack.config.js 如下，与package.json 放在同级目录下：

参考官网配置： https://webpack.docschina.org/guides/getting-started/#%E4%BD%BF%E7%94%A8%E4%B8%80%E4%B8%AA%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6

webpack.config.js// node内置的模块用来去设置路径的
const path = require('path');module.exports = {// 入口文件配置， 当前项目的主文件entry: './src/js/index.js',// 出口/输出的配置output: {// 输出的文件名filename: 'bundle.js',// 输出文件路径, resolve 路径拼接path: path.resolve(__dirname, 'dist/js/')}
};

3、使用 webpack --mode development 进行打包，如下：

命令执行结果 D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack --mode development
Hash: fc7aed1243c6e0d706d5
Version: webpack 4.41.2
Time: 95ms
Built at: 2019-11-09 11:31:20 AMAsset      Size  Chunks             Chunk Names
bundle.js  5.63 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/data/user.json] 45 bytes {main} [built]
[./src/js/index.js] 246 bytes {main} [built]
[./src/js/math.js] 107 bytes {main} [built]

================================================ 

【4】 自动化构建工具webpack_打包 css 文件

刚刚没能打包css文件，因为没有引入css 加载器， 现在引入，如下：

可以参考官网 https://webpack.docschina.org/loaders/css-loader/ 

step1：安装css加载器，  npm install --save-dev css-loader style-loader file-loader url-loader 

D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm install --save-dev css-loader style-loader file-loader url-loader
npm WARN mywebpack@1.0.0 No description
npm WARN mywebpack@1.0.0 No repository field.
npm WARN mywebpack@1.0.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ file-loader@4.2.0
+ url-loader@2.2.0
+ style-loader@1.0.0
+ css-loader@3.2.0
added 30 packages from 50 contributors and audited 4389 packages in 15.235s
found 0 vulnerabilities

补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

step2： 引入css文件，取消 index.js 的 css引入注释；如下： 

index.js import {multiply, mod} from './math.js'
import '../css/test.css'
import user from '../data/user.json'document.write("hello world")
document.write(multiply(2, 2, ))
document.write(mod(1000, 33, ))
document.write(JSON.stringify(user))

step2.1、在 webpack.config.js 中引入css-loader 加载器 ， 如下：

又 css文件中引入了图片， 而打包图片，使用url-loader，如下：

// node内置的模块用来去设置路径的
const path = require('path');module.exports = {// 入口文件配置， 当前项目的主文件entry: './src/js/index.js',// 出口/输出的配置output: {// 输出的文件名filename: 'bundle.js',// 输出文件路径, resolve 路径拼接path: path.resolve(__dirname, 'dist/js/')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]}],},
};

 

执行 webpack --mode development 打包， 如下：

D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack --mode development
Hash: 78ffadd980c422773682
Version: webpack 4.41.2
Time: 624ms
Built at: 2019-11-09 12:04:20 PMAsset      Size  Chunks             Chunk Names
97b6ad90c25f31b0314ddbfa4ef67807.png  50.5 KiB          [emitted]bundle.js  20.5 KiB    main  [emitted]  main
f0551938a716cfe4c727aeba0f8c9ecd.png  96.6 KiB          [emitted]
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./src/css/test.css] 653 bytes {main} [built]
[./src/css/test.css] 408 bytes {main} [built]
[./src/data/user.json] 41 bytes {main} [built]
[./src/image/001.png] 82 bytes {main} [built]
[./src/image/002.png] 82 bytes {main} [built]
[./src/js/index.js] 241 bytes {main} [built]
[./src/js/math.js] 107 bytes {main} [built]+ 3 hidden modules

打包结果如下：

【访问结果如下】 文字正常显示，css正常显示，但图片找不到， 报404； 

补充，webpack打包图片时，有个问题：
1、若图片大小小于8K，则使用base64算法把图片转换字符串存储（本例是存放在 bundle.js 里面 ）；
2、若图片大于8K， 则不会生成字符串，而是以图片形式存储（这时，entry.js 就找不到图片的具体位置）；
【解决方法】 在 webpack.config.js 中添加 publicPath 属性，设置 index.html 搜索图片的路径；但不推荐使用这种方法， 因为带有强制性；

添加 publichPath 属性后的 webpack.config.js 如下： 

// node内置的模块用来去设置路径的
const path = require('path');module.exports = {// 入口文件配置， 当前项目的主文件entry: './src/js/index.js',// 出口/输出的配置output: {// 输出的文件名filename: 'bundle.js',publicPath: 'js/',  // （添加publicPath属性）设置为index.html提供资源服务的时候带有强制性// 输出文件路径, resolve 路径拼接path: path.resolve(__dirname, 'dist/js/')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]}],},
};

可以正常访问。 bingo。

 

================================================ 

【5】基于webpack-dev-server实现自动编译打包（自动化构建工具webpack_热加载实现）

可以参考官网： https://webpack.docschina.org/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server  

also， 你可以参考我的博文： https://blog.csdn.net/PacosonSWJTU/article/details/102983394 

具体步骤如下：

step1： 安装webpakc-dev-server  npm install --save-dev webpack-dev-server

D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack --mode development
Hash: c0ef08ceddc1663b2fc1
Version: webpack 4.41.2
Time: 613ms
Built at: 2019-11-09 12:23:00 PMAsset      Size  Chunks             Chunk Names
97b6ad90c25f31b0314ddbfa4ef67807.png  50.5 KiB          [emitted]bundle.js  20.5 KiB    main  [emitted]  main
f0551938a716cfe4c727aeba0f8c9ecd.png  96.6 KiB          [emitted]
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./src/css/test.css] 653 bytes {main} [built]
[./src/css/test.css] 408 bytes {main} [built]
[./src/data/user.json] 41 bytes {main} [built]
[./src/image/001.png] 82 bytes {main} [built]
[./src/image/002.png] 82 bytes {main} [built]
[./src/js/index.js] 241 bytes {main} [built]
[./src/js/math.js] 107 bytes {main} [built]+ 3 hidden modulesD:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm install --save-dev webpack-dev-server
npm WARN mywebpack@1.0.0 No description
npm WARN mywebpack@1.0.0 No repository field.
npm WARN mywebpack@1.0.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ webpack-dev-server@3.9.0
added 204 packages from 166 contributors and audited 7911 packages in 48.761s
found 0 vulnerabilities

step2： package.json 多了一个属性：webpack-dev-server ；

package.json  {"name": "mywebpack","version": "1.0.0","devDependencies": {"css-loader": "^3.2.0","file-loader": "^4.2.0","style-loader": "^1.0.0","url-loader": "^2.2.0","webpack": "^4.41.2","webpack-dev-server": "^3.9.0"}
}

直接运行 webpack-dev-server， 报错如下：

 

step3： 在 package.json 文件下添加 scripts 属性，修改webpack.config.js （添加devServer ） 如下：

package.json {"name": "mywebpack","version": "1.0.0","devDependencies": {"css-loader": "^3.2.0","file-loader": "^4.2.0","style-loader": "^1.0.0","url-loader": "^2.2.0","webpack": "^4.41.2","webpack-dev-server": "^3.9.0"},"scripts": {"dev": "webpack-dev-server --open"} 
}

webpack.config.js // node内置的模块用来去设置路径的
const path = require('path');module.exports = {// 入口文件配置， 当前项目的主文件entry: './src/js/entry.js',// 出口/输出的配置output: {// 输出的文件名filename: 'bundle.js',// publicPath: 'js/',  // 设置为index.html提供资源服务的时候带有强制性（会对自动打包有影响）// 输出文件路径, resolve 路径拼接path: path.resolve(__dirname, 'dist/js/'),},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]}],},devServer: {contentBase: './dist/' // webpack-dev-server 默认服务于根路径下的index.html},
};

step4：再次运行命令  npm run dev 

D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm run dev> mywebpack@1.0.0 dev D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack
> webpack-dev-server --openi ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /js/
i ｢wds｣: Content not from webpack is served from ./dist/
i ｢wdm｣: Hash: 373307dc3fd94b391432
Version: webpack 4.41.2
Time: 1658ms
Built at: 2019-11-09 12:43:49 PMAsset      Size  Chunks             Chunk Names
97b6ad90c25f31b0314ddbfa4ef67807.png  50.5 KiB          [emitted]bundle.js   377 KiB    main  [emitted]  main
f0551938a716cfe4c727aeba0f8c9ecd.png  96.6 KiB          [emitted]
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/js/index.js 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/css/test.css] 408 bytes {main} [built]
[./src/data/user.json] 41 bytes {main} [built]
[./src/js/index.js] 241 bytes {main} [built]
[./src/js/math.js] 107 bytes {main} [built]+ 27 hidden modules
i ｢wdm｣: Compiled successfully.

webpack-dev-server 会启动一个服务器，开放8080端口访问。 

随便修改 index.js 中的代码，添加一行代码如下：

document.write("小唐")；

webpack都会自动编译，如下： 

访问效果：

 

================================================ 

【6】添加webpack插件

1、参考官网： https://webpack.docschina.org/plugins/html-webpack-plugin/ ；

2、下载插件： 

D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm install --save-dev html-webpack-plugin clean-webpack-plugin
npm WARN mywebpack@1.0.0 No description
npm WARN mywebpack@1.0.0 No repository field.
npm WARN mywebpack@1.0.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ clean-webpack-plugin@3.0.0
+ html-webpack-plugin@3.2.0
added 56 packages from 84 contributors and audited 9120 packages in 29.171s
found 0 vulnerabilities

3、修改webpack.config.js 的配置，添加插件配置：

// node内置的模块用来去设置路径的
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动生成 html 文件插件
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清除之前打包的文件module.exports = {// 入口文件配置， 当前项目的主文件entry: './src/js/index.js',// 出口/输出的配置output: {// 输出的文件名filename: 'bundle.js',publicPath: 'js/',  // （添加publicPath属性）设置为index.html提供资源服务的时候带有强制性// 输出文件路径, resolve 路径拼接path: path.resolve(__dirname, 'dist/js/')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]}],},devServer: {contentBase: './dist/' // webpack-dev-server 默认服务于根路径下的index.html},plugins: [new HtmlWebpackPlugin({template: './dist/index.html'}),],
};

 

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/330455.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Spring快速开启计划任务

Spring快速开启计划任务

转载自 Spring快速开启计划任务 Spring3.1开始让计划任务变得非常简单&#xff0c;只需要几个注解就能快速开启计划任务的支持。 EnableScheduling Target(ElementType.TYPE) Retention(RetentionPolicy.RUNTIME) Import(SchedulingConfiguration.class) Documented public i…
阅读更多...
ACM训练4

ACM训练4

AB Problem INPUT Each line will contain two integers A and B. Process to end of file. OUTPUT For each case, output A B in one line. 问题连接&#xff1a;https://vjudge.net/problem/hdu-1000?tdsourcetags_pctim_aiomsg AC代码如下&#xff1a; #include &…
阅读更多...
Spring Aware容器感知技术

Spring Aware容器感知技术

转载自 Spring Aware容器感知技术 Spring Aware是什么 Spring提供Aware接口能让Bean感知Spring容器的存在&#xff0c;即让Bean可以使用Spring容器所提供的资源。 Spring Aware的分类 几种常用的Aware接口如下。 Aware接口说明ApplicationContextAware能获取Application Co…
阅读更多...
json详解

json详解

JSON的全称是”JavaScript Object Notation”&#xff0c;意思是JavaScript对象表示法&#xff0c;它是一种基于文本&#xff0c;独立于语言的轻量级数据交换格式。XML也是一种数据交换格式&#xff0c;为什么没有选择XML呢&#xff1f;因为XML虽然可以作为跨平台的数据交换格式…
阅读更多...
Error in nextTick: “TypeError: Cannot read properties of undefined (reading ‘clearValidate‘)“

Error in nextTick: “TypeError: Cannot read properties of undefined (reading ‘clearValidate‘)“

我在打开对话框清除表单校验的时候报了这个错 我的解决办法是加个if判断有没有 这是原来的 加个if
阅读更多...
ACM训练题6

ACM训练题6

ASCII码排序 Problem Description INPUT 输入三个字符后&#xff0c;按各字符的ASCII码从小到大的顺序输出这三个字符。 OUTPUT 对于每组输入数据&#xff0c;输出一行&#xff0c;字符中间用一个空格分开. 问题连接&#xff1a;https://vjudge.net/problem/hdu-2000 AC…
阅读更多...
Spring Enable*高级应用及原理

Spring Enable*高级应用及原理

转载自 Spring Enable*高级应用及原理 Enable* 之前的文章用到了一些Enable*开头的注解&#xff0c;比如EnableAsync、EnableScheduling、EnableAspectJAutoProxy、EnableCaching等&#xff0c;Enable表示开启/允许一项功能。 Enable*工作原理 我们只需要几个很简单的注解就…
阅读更多...
ACM训练题7

ACM训练题7

计算球体积 Problem Description 根据输入半径输出球的体积 INPUT 输入数据有多组&#xff0c;每组占一行&#xff0c;每行包括一个实数&#xff0c;表示球的半径。 OUTPUT 输出对应的球的体积&#xff0c;对于每组输入数据&#xff0c;输出一行&#xff0c;计算结果保留…
阅读更多...
JSON与JS对象的区别

JSON与JS对象的区别

和一些同学一样&#xff1a;总是感觉json对象(其实json不是对象)和js对象的字面量表示法相同&#xff0c;最近学习json&#xff0c;真心搞不懂&#xff0c;js对象和json有什么区别&#xff1f;就是感觉json的key要用” “括起来&#xff0c;但是js对象的字面量表示法不需要。 　…
阅读更多...
Spring Boot开启的2种方式

Spring Boot开启的2种方式

转载自 Spring Boot开启的2种方式Spring Boot依赖 使用Spring Boot很简单&#xff0c;先添加基础依赖包&#xff0c;有以下两种方式 1. 继承spring-boot-starter-parent项目 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-b…
阅读更多...
JSON | JSON字符串和JSON对象的区别

JSON | JSON字符串和JSON对象的区别

最近在学习Vue.js&#xff0c;里面有个存储、读取本地缓存的功能&#xff0c;不停地用JSON.parse()&#xff0c;和JSON.stringify()来转换JSON字符串和JSON对象。自己有点晕&#xff0c;不明白两者的区别&#xff0c;看起来感觉是一样的&#xff0c;也不知道为什么一定要转换才…
阅读更多...
Spring Boot Starters启动器

Spring Boot Starters启动器

转载自 Spring Boot Starters启动器 Starters是什么&#xff1f; Starters可以理解为启动器&#xff0c;它包含了一系列可以集成到应用里面的依赖包&#xff0c;你可以一站式集成Spring及其他技术&#xff0c;而不需要到处找示例代码和依赖包。如你想使用Spring JPA访问数据库&…
阅读更多...
数列有序

数列有序

Promble Description 有n(n<100)个整数&#xff0c;已经按照从小到大顺序排列好&#xff0c;现在另外给一个整数x&#xff0c;请将该数插入到序列中&#xff0c;并使新的序列仍然有序。 INPUT 输入数据包含多个测试实例&#xff0c;每组数据由两行组成&#xff0c;第一行…
阅读更多...
Spring Boot自动配置原理、实战

Spring Boot自动配置原理、实战

转载自 Spring Boot自动配置原理、实战 Spring Boot自动配置原理 Spring Boot的自动配置注解是EnableAutoConfiguration&#xff0c;从上面的Import的类可以找到下面自动加载自动配置的映射。 org.springframework.core.io.support.SpringFactoriesLoader.loadFactoryNames(Cla…
阅读更多...
ES6 Map对象的使用

ES6 Map对象的使用

转自&#xff1a; https://blog.csdn.net/u012664198/article/details/97373751 Map对象保存键值对,任何值(对象或者原始值) 都可以作为一个键或一个值 key和value可以是字符串等数据类型&#xff0c;也可以是对象&#xff0c;函数&#xff0c;NaN。 set&#xff1a;insert ke…
阅读更多...
水仙花数

水仙花数

Problem Description 春天是鲜花的季节&#xff0c;水仙花就是其中最迷人的代表&#xff0c;数学上有个水仙花数&#xff0c;他是这样定义的&#xff1a; “水仙花数”是指一个三位数&#xff0c;它的各位数字的立方和等于其本身&#xff0c;比如&#xff1a;1531^35^33^3。 现…
阅读更多...
JDBC元数据操作（一）-- DatabaseMetaData接口详解

JDBC元数据操作（一）-- DatabaseMetaData接口详解

转自&#xff1a; https://blog.csdn.net/chen_zw/article/details/18816599 1. 前言 在JDBC技术规范中&#xff0c;提供了Connection&#xff0c;Statement,ResultSet这三个开发过程中经常用到的接口。针对与每个接口&#xff0c;JDBC规范提供了相应的接口描述对象&#…
阅读更多...
Spring Boot核心配置

Spring Boot核心配置

转载自 Spring Boot核心配置 启动类 在包根目录下添加启动类&#xff0c;必须包含main方法&#xff0c;再添加Spring Boot启动方法&#xff1a; SpringApplication.run(SampleController.class, args); 或者流式API new SpringApplicationBuilder().run(args); 下面是一个典型的…
阅读更多...
空心三角形

空心三角形

Problem Description 把一个字符三角形掏空&#xff0c;就能节省材料成本&#xff0c;减轻重量&#xff0c;但关键是为了追求另一种视觉效果。在设计的过程中&#xff0c;需要给出各种花纹的材料和大小尺寸的三角形样板&#xff0c;通过电脑临时做出来&#xff0c;以便看看效…
阅读更多...
Dom4j完整教程详解

Dom4j完整教程详解

转自&#xff1a; https://blog.csdn.net/qq_41860497/article/details/84339091 目录 1、DOM4J简介 2、XML文档操作1 2.1、读取XML文档&#xff1a; 2.2、获取根节点 2.3、. 新增一个节点以及其下的子节点与数据 2.4、 写入XML文件 2. 5、 遍历xml节点 2.6、创建xml文件 2.…
阅读更多...
最新文章

Copyright @ 2022~2023