皮蛋很白
皮蛋很白

webpack学习之3.html-webpack-plugin自动创建html

介绍

插件html-webpack-plugin实现打包时生成html文件，自动引入打包的资源并可以插入hash。
还可以指定模板，默认lodash模板。

创建初始项目

webpack学习之3.html-webpack-plugin自动创建html_第1张图片

// package.json
{
  // ...
  "scripts": {
    "build": "webpack --progress",
    "server": "node server.js"
  },
  "devDependencies": {
    "css-loader": "^3.5.3",
    "express": "^4.17.1",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-hot-middleware": "^2.25.0"
  }
}

// webpack.config.js
const path = require('path');
// 加载插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const hotMiddlewareScript = 'webpack-hot-middleware/client?quiet=true';
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 加载html-webpack-plugin

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: {
        main: [hotMiddlewareScript, './src/index.js'],
        util: [hotMiddlewareScript, './src/util.js']
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 根据正则匹配.css结尾的文件
                use: [ // 配置loader，倒序使用
                    {
                    	loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: true // process.env.NODE_ENV === 'development'
                        }
                    },
                    { loader: 'css-loader' }
                ]
            }
        ]
    },
    plugins: [
        // 用 MiniCssExtractPlugin 抽离出 css 文件
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin() // 使用html-webpack-plugin
    ],
}

// server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware')

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// 告诉express使用webpack-dev-middleware并使用webpack.config.js
app.use(webpackDevMiddleware(compiler));

app.use(webpackHotMiddleware(compiler));

app.use(express.static('dist'))


// 在8080端口运行文件
app.listen(8080, function () {
  console.log('Example app listening on port 8080!\n');
});

// src/index.js
import './css/style.css';
console.log('this is index.js')

// src/util.js
let app = document.getElementById('app');
if (!app) {
    app = document.createElement('div');
    app.id = 'app';
    document.body.appendChild(app);
    app.innerText = 'I from createElement'; // 标记app为util创建的
} else {
    app.innerText = 'I from HTML element'; // 标记app是html页面已有的
}

// src/css/style.css
body{
    font-size:14px;
    line-height: 1.8em;
    color: #333;
}

打包，npm run build，查看dist
webpack学习之3.html-webpack-plugin自动创建html_第2张图片
自动生成了一个html文件，将入口文件main.js util.js按entry配置的顺序引入到body的底部，
将css文件引入到了head的底部：

// 格式化后
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Webpack App</title>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link href="main.css" rel="stylesheet">
	</head>
	<body>
		<script src="main.js"></script>
		<script src="util.js"></script>
	</body>
</html>

HtmlWebpackPlugin 配置

参数 类型 默认值 描述
title String Webpack App 用于生成HTML文档的标题
filename String ‘index.html’ 将HTML写入的文件。默认是index.html。你也可以在此处指定子目录（比如：assets/admin.html）
template String ‘’ 根据自己的指定的模板文件(相对路径或绝对路径)来生成特定的 html 文件。
模板类型可以是 html, jade, ejs, hbs 等等，默认情况下，它将使用src/index.ejs（如果存在）。
html模板可以使用lodash语法，其他模板需要安装对应的loader。
templateContent String|Function|false false 可代替模板使用以提供内联模板
templateParameters Boolean|Object|Function false 允许设置或覆盖模板中使用的参数
inject Boolean|String true 资源注入选项，将所有打包的资源注入到template或templateContent，枚举值：true | ‘body’ | ‘head’ | false。
true | ‘body’ 将js放置到body底部。
‘head’ 将js放置在head元素底部。
false 不注入任何资源（css、js以及viewport meta）
scriptLoading ‘blocking’|‘defer’ ‘blocking’ 配置script标签的defer属性。类似于将script放入文档最底部
favicon String ‘’ favicon 文件所在的路径名
meta Object {} 允许注入meta标签，例如：{viewport: ‘width=device-width, initial-scale=1’}
base Object|String|false false 插入一个base标签
minify Boolean|Object webpack mode='production’时默认为true，否则默认为false 设置是否压缩html，及如何压缩。
它使用 html-minifier-terser 压缩，当为true时使用默认配置见文档
hash Boolean false 设置为true时会在script引用的js文件(output.filename)后附加webpack的hash值，例如：
cache Boolean true 只有内容被改变时才生成文件（没明白什么意思）
showErrors Boolean true 是否显示错误提示，会在html页面中将错误信息写在一个pre标签中。
chunks ? ? 单独设置要注入的资源，用于多入口打包。
chunksSortMode String|Function auto 用于设置将chunks注入时的排序。可设置为：‘none’ | ‘auto’ | ‘manual’ | {Function}
excludeChunks Array. ‘’ 用于排除哪些资源，例如：单元测试

使用模板

// webpack.config.js
// ...
	new HtmlWebpackPlugin({
	    inject: false, // 禁用自动注入
        templateContent: ({htmlWebpackPlugin}) => `
	        
            
                
                ${htmlWebpackPlugin.tags.headTags}
                
                
                ${htmlWebpackPlugin.tags.bodyTags}
                

`
})
// ...

打包生成html文件：

<!doctype html>
<html>
	<head>
		<link href="main.css" rel="stylesheet">
	</head>
	<body>
		<script src="main.js"></script>
		<script src="util.js"></script>
	</body>
</html>

基本一致，区别是没有插入默认的title meta。配置title meta 并 增加一个自定义参数，看看如何使用：

// webpack.config.js
// ...
    new HtmlWebpackPlugin({
        inject: false, // 禁用自动注入
        title: 'my App',
	    meta: {
	    	viewport: 'width=device-width, initial-scale=1'
	    },
        templateParameters: {
            h1text: 'hello World'
        },
        templateContent: ({htmlWebpackPlugin,h1text}) => `
            
                
                ${htmlWebpackPlugin.tags.headTags}
                
                
                
${h1text}

                ${htmlWebpackPlugin.tags.bodyTags}
                
            
        `
    })
// ...

打包生成html文件：

<!doctype html>
<html>
	<head>
		<title>my App</title>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link href="main.css" rel="stylesheet">
	</head>
	<body>
		<h1>hello World</h1>
		<script src="main.js"></script>
		<script src="util.js"></script>
	</body>
</html>

模板可使用的信息

上面示例看到，html-webpack-plugin将一些对象和自定义参数传入到模板中使用。

参数名 描述
htmlWebpackPlugin 插件可用数据
htmlWebpackPlugin.options 插件的配置信息
htmlWebpackPlugin.tags 插件要注入的tag信息，包括

你可能感兴趣的:(webpack)

  • webpack.prod.js（webpack生产环境配置文件） 门板_ webpackjavascript前端
    生产环境：只打包不运行本地服务器对于在config目录下的webpack.prod.js1.在根目录下运行npxwebpack--config./config/webpack.prod.js2.在package.json文件中配置"build":"npxwebpack--config./config/webpack.prod.js"constpath=require('path')constESL
  • Webpack构建优化——区分环境 oWSQo
    为什么需要区分环境在开发网页的时候，一般都会有多套运行环境，例如：在开发过程中方便开发调试的环境。发布到线上给用户使用的运行环境。这两套不同的环境虽然都是由同一套源代码编译而来，但是代码内容却不一样，差异包括：线上代码被特殊压缩过。开发用的代码包含一些用于提示开发者的提示日志，这些日志普通用户不可能去看它。开发用的代码所连接的后端数据接口地址也可能和线上环境不同，因为要避免开发过程中造成对线上数据
  • html版本号 webpack_html-webpack-plugin详解 weixin_39994949 html版本号webpack
    引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么在项目中遇到类似上面
  • webpack-loader详解 奶昔不会射手 webpack前端node.js
    一、loader的分类1.pre:前置loader2.normal:普通loader3.inline:内联loader4.post:后置loader二、执行顺序pre>normal>inline>post,相同类型的loader执行顺序为：从右到左，从下到上module:{rules:[{enforce:"pre",//通过这个参数来定义loader的类型，默认是normal类型test:/\.j
  • webpack快速基础 风漫漫雨歇歇 webpackwebpack前端前端框架
    文章目录webpack快速基础1.概念1.1入口1.2输出(output)1.3loader1.4插件（plugin)2.建立项目，用于测试功能2.1安装webpack，2.2创建webpack配置文件,2.3配置package.json，运行项目3.配置mode开发环境4.配置entry编译入口5.配置output编译出口6.配置加载csswebpack快速基础1.概念webpack是现代Jav
  • Webpack打包 爱敲代码小黑 webpack前端node.js
    Webpack打包目录Webpack打包打包图片资源模块类型（**assetmoduletype**）url-loader的limit效果打包图片我们当前使用的webpack版本是webpack5：在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader、url-loader、file-loader；在webpack5开始，我们可以直接使用资源模块类型（ass
  • vite和webpack的区别 小王学前端️ vue3webpack前端javascript
    vite和webpack的区别从底层原理上来说，Vite是基于esbuild预构建依赖。而esbuild是采用go语言编写，因为go语言的操作是纳秒级别，而js是以毫秒计数，所以vite比用js编写的打包器快10-100倍。Vite和Webpack都是现代前端开发中的常见打包工具，但在实际使用过程中，它们存在五个主要区别：1.开发模式不同；2.打包效率不同；3.插件生态不同；4.配置复杂度不同；5
  • ReferenceError: “Promise”未定义 吃不胖的茶叶蛋
    问题现象：vue-cli项目在IE下运行，会在钩子函数出现ReferenceError:“Promise”未定义解决办法：1、安装BabelPolyfillnpminstall--savebabel-polyfill2、在webpack.base.conf.js这个文件加入代码require("babel-polyfill")3、在main.js里面添加代码import"babel-polyfil
  • vue的路由懒加载 可爱的小小小狼 vue.js前端javascript
    这样的懒加载机制确保了在初始加载时只加载必要的代码，提高了应用的性能和加载速度。当用户访问相关的懒加载路由时，相应的代码块才会被下载和执行。VueRouter的懒加载（也称为路由懒加载或异步组件加载）是一种优化手段，它允许你将路由组件按需加载，只在需要时才下载对应的代码块。这样可以减小初始加载的页面大小，提升应用的性能和加载速度。懒加载的原理基于Webpack的动态import()语法，它允许将模
  • webpack和vite的区别是什么 蚂蚁上的大象 webpack前端node.js
    Webpack和vite都是现在前端领域比较流行的打包工具，它们的相似之处在于可以帮助我们把多个JavaScript文件打包成一个可以在浏览器中加载并在生产中使用的文件。Webpack和vite主要区别：网上有很多总结大致分为三种，编译方式不同、开发效率不同、扩展性不同。其实在我看来只有一种半，一是编译方式，半个是生态。其实这半个也算是硬加上去的，以现在vite的发展势头，用不了多久它的生态不会弱
  • Git提交规范 初学者↑ git
    提交信息typefeat：新功能（feature）fix：修改bugdocs：文档修改style：代码格式修改（不影响代码运行的变动，例如分号修改），注意⚠️不是CSS修改refactor：代码重构test：测试用例修改build:影响项目构建或依赖项修改，如webpack版本升级等perf:性能优化revert:撤销之前的commitci:持续集成相关文件修改chore：其它修改（不在上述类型中
  • webpack5高级--01_提升开发体验 化作繁星 webpackwebpackjavascript前端
    提升开发体验SourceMap为什么开发时我们运行的代码是经过webpack编译后的，例如下面这个样子：/**ATTENTION:The"eval"devtoolhasbeenused(maybebydefaultinmode:"development").*Thisdevtoolisneithermadeforproductionnorforreadableoutputfiles.*Ituses
  • webpack 中 loader 和 plugin 的区别 tangdou369098655 webpackwebpack
    通俗点讲loader是转换，plugin是执行比转换更复杂的任务，比如合并压缩等loader:让webpack能够处理非js文件，然后你就可以利用webpack的打包能力，对它们进行处理。例如：css-loader、style-loader、postcss-loader、sass-loaderplugins:从打包优化和压缩，一直到重新定义环境中的变量.例如：uglify-webpack-plug
  • 探索vue2框架的世界：关于vue2.x的性能优化和常见的白屏原因 @德玛玩前端 Vue性能优化学习前端htmlvuevue.js
    在本篇文章中，博主总结了一些常见的vue2框架性能优化方法和项目启动出现白屏的原因，还望走过路过的同行和大神们点赞关注,多多指教，用你们发财的小手给予博主大大的鼓励。vue2x性能优化1.路由懒加载，有效拆分应用大小，访问时才异步加载vue是单页面应用，可能会有很多的路由引入，这样使用webpack打包后的文件会很大当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验如果我们能把不同
  • webpack 打包后，图片加载错误 佩淇呢 webpackVue2webpack前端node.jsjavascriptvue
    使用webpack打包后，图片没有加载出来，页面空白，报错图片引用的路径不对解决办法：1.找到config->index.js将assetsPublicPath:'/',改为assetsPublicPath:'./'build:{index:path.resolve(__dirname,'../dist/index.html'),assetsRoot:path.resolve(__dirname,
  • Webpack和Vite的区别？ 夏兮颜☆ webpack前端javascript
    Webpack和Vite都是现代前端开发中常用的打包工具，它们的主要区别如下：构建速度：Vite的构建速度比Webpack快得多，因为Vite在开发环境下使用了浏览器原生的ESM（ES6模块）模块加载，可以在浏览器中直接运行代码，而不需要像Webpack那样先进行打包和编译。在Vite中，每个模块都可以独立地进行编译和缓存，这意味着它只需要重新编译修改过地模块，而不是整个应用程序。这使得Vite开
  • webpack5基础--11_处理 Html 资源 化作繁星 webpackhtml前端webpack
    处理Html资源1.下载包npmihtml-webpack-plugin-D2.配置webpack.config.jsconstpath=require("path");constESLintWebpackPlugin=require("eslint-webpack-plugin");constHtmlWebpackPlugin=require("html-webpack-plugin");mod
  • 前端面试练习24.3.5 程序猿online 前端面试前端面试职场和发展
    webpack相关项目使用webpack流程进入一个初始化好的vue项目下载安装webpack相关依赖包/插件npminstall--save-devwebpackwebpack-cliwebpack-dev-server安装一些相关的loader,比如vue-loader，babel-loader，css-loader等创建webpack.config.js文件，进行相关配置文件内容如下cons
  • vue-cli 项目中使用 webpack 的 require.context 实现全局引入组件 Enginner_XZ
    文章内重点在于require.context的使用具体可查看webpack官网vue-cli工程建的项目components/index.js/***创建一个引入文件上下文*不懂上下文的参考语文对于上下文的理解及context的英语翻译*require.context的参数说明可查看webpack文档或百度高频组件引入*/constcomponentsContext=require.context
  • webpack5基础--04_处理样式资源 化作繁星 webpackwebpack
    处理样式资源本章节我们学习使用Webpack如何处理Css、Less、Sass、Scss、Styl样式资源介绍Webpack本身是不能识别样式资源的，所以我们需要借助Loader来帮助Webpack解析样式资源我们找Loader都应该去官方文档中找到对应的Loader，然后使用官方文档找不到的话，可以从社区Github中搜索查询Webpack官方Loader文档处理Css资源1.下载包npmics
  • Webpack配置与运行基础教程 猿小白klp Webpackwebpack前端node.js后端学习
    在前端开发中，Webpack是一款非常流行的模块打包工具，它可以帮助我们将多个文件打包成一个或多个静态资源文件，从而提高前端项目的性能和可维护性。本文将为你介绍Webpack的基础配置和运行方法，帮助你快速上手Webpack。什么是WebpackWebpack是一个基于Node.js的模块打包工具，它可以将各种资源，如JavaScript、CSS、图片等，视为模块，并通过各种loader和插件对这
  • Superset二次开发之Superset架构理解 aimmon 架构supersetBI
    技术框架框架作用前端React构建用户界面的JavaScript库ReduxJavaScript应用的状态管理库，管理组件间的状态共享Webpack前端资源打包工具BabelJavaScript编译器D3.js数据可视化的JavaScript库后端Flask轻量级的Pythonweb框架，处理HTTP请求、路由以及其他Web服务功能SQLAlchemySQL工具包和对象关系映射（ORM）工具，处理
  • Vue 起步 Kathy丶Andy
    安装vueCli全局安装vue-cli$npminstall--globalvue-cli创建一个基于webpack模板的新项目$vueinitwebpackmy-project安装依赖，走你$cdmy-project$npminstall$npmrundev查看Vue版本命令vue-V注意是大写V
  • vue 过滤服务器上的.svn文件 YellowPoint
    服务器构建的时候多出了.svn的文件；本机只有svn的根目录才有.svn文件夹，服务器上发现每个文件夹都被加上了.svn；关键是在static文件夹里面也加了，vue构建的时候，是直接把static的文件全部复制到dist里面，故导致生成的文件夹里面也有.svn文件夹，在url上都能访问到里面的文件；想办法过滤这个文件夹吧，在webpack.dev.conf.js和webpack.prod.con
  • 安装sass报错 逸笛
    1.TypeError:this.getOptionsisnotafunction原因：发现[email protected]版本需要[email protected]，而@vue/[email protected]所用的是webpack@4，所以需要将sass-loader的版本降到11以下[email protected]
  • webpack搭建前端环境 华戈的小书
    随着webpack3.x的发布，其功能也越来越强大，很多的项目的编译打包工具也由gulp逐渐转移到webpack。1.用yarn代替npmnpm是一款非常好的包管理工具，之前在用npm安装项目依赖的时候总会因为某些依赖包推出了新版本从而导致编译结果不一样的问题，这是因为在安装依赖的时候npm并没有锁定依赖包的版本号(npm5好像已经解决了这个问题)，每次安装的时候总是获取最新的依赖包，导致编译结果
  • Vue-Quill-Editor 简单修改字体大小和样式.(不改源码) 十里冰香 富文本quill
    实现效果图:vue-cli的富文本Vue-Quill-Editor使用前安装:npminstallquill-image-resize-module--save,npminstallvue-quill-editor--save需要在根目录下的vue.config.js文件里,添加如下chainWebpack:constwebpack=require('webpack')module.exports
  • 9-区分开发环境配置 merge plugin 崩鲨卡拉卡
    在development和production环境下将配置文件进行分类：dev、pro、base（公共）merge.jpg步骤：-1安装:yarnaddwebpack-merge-D本地安装插件-2新建webpacl.base.js、webpack.dev.js、webpack.prod.js，用作不同阶段环境的区分-3分别配置三个文件：以webpack.prod.js为例let{smart}=r
  • 第六十五天 API安全-接口安全&WebPack&REST&SOAP&WSDL&WebService 清歌secure 网络安全全栈学习笔记安全web安全网络安全
    第65天API安全-接口安全&WebPack&REST&SOAP&WSDL&WebService知识点1.HTTP类接口-测评2.RPC类接口-测评3.WebService类-测评参考链接：https://www.jianshu.com/p/e48db27d7c70内容点：SOAP(SimpleObjectAccessProtocol)简单对象访问协议是交换数据的一种协议规范，是一种轻量的、简单的
  • 客户端web开发工具 ww要努力呀 前端前端
    文章目录安全网络Linter-->捕获代码错误-->eslint源代码控制-->Git代码格式化-->Prettier打包工具--Parcel--Webpack转换--Babel开发后阶段测试工具配置工具其他node，npm、yarnnode.js包管理器npmyarnhttps://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/
  • JAVA中的Enum 周凡杨 javaenum枚举
    Enum是计算机编程语言中的一种数据类型---枚举类型。 在实际问题中，有些变量的取值被限定在一个有限的范围内。     例如，一个星期内只有七天 我们通常这样实现上面的定义： public String monday; public String tuesday; public String wensday; public String thursday
  • 赶集网mysql开发36条军规 Bill_chen mysql业务架构设计mysql调优mysql性能优化
    (一)核心军规 (1)不在数据库做运算    cpu计算务必移至业务层； (2)控制单表数据量    int型不超过1000w，含char则不超过500w；    合理分表；    限制单库表数量在300以内； (3)控制列数量    字段少而精，字段数建议在20以内
  • Shell test命令 daizj shell字符串test数字文件比较
    Shell test命令 Shell中的 test 命令用于检查某个条件是否成立，它可以进行数值、字符和文件三个方面的测试。 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于则为真 -lt 小于则为真 -le 小于等于则为真 实例演示： num1=100 num2=100if test $[num1]
  • XFire框架实现WebService(二) 周凡杨 javawebservice
       有了XFire框架实现WebService(一)，就可以继续开发WebService的简单应用。 Webservice的服务端(WEB工程)： 两个java bean类： Course.java    package cn.com.bean; public class Course {     private
  • 重绘之画图板 朱辉辉33 画图板
           上次博客讲的五子棋重绘比较简单，因为只要在重写系统重绘方法paint（）时加入棋盘和棋子的绘制。这次我想说说画图板的重绘。        画图板重绘难在需要重绘的类型很多，比如说里面有矩形，园，直线之类的，所以我们要想办法将里面的图形加入一个队列中，这样在重绘时就
  • Java的IO流 西蜀石兰 java
    刚学Java的IO流时，被各种inputStream流弄的很迷糊，看老罗视频时说想象成插在文件上的一根管道，当初听时觉得自己很明白，可到自己用时，有不知道怎么代码了。。。 每当遇到这种问题时，我习惯性的从头开始理逻辑，会问自己一些很简单的问题，把这些简单的问题想明白了，再看代码时才不会迷糊。 IO流作用是什么？ 答：实现对文件的读写，这里的文件是广义的； Java如何实现程序到文件
  • No matching PlatformTransactionManager bean found for qualifier 'add' - neither 林鹤霄
    java.lang.IllegalStateException: No matching PlatformTransactionManager bean found for qualifier 'add' - neither qualifier match nor bean name match!   网上找了好多的资料没能解决，后来发现：项目中使用的是xml配置的方式配置事务，但是
  • Row size too large (> 8126). Changing some columns to TEXT or BLOB aigo column
    原文：http://stackoverflow.com/questions/15585602/change-limit-for-mysql-row-size-too-large   异常信息： Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAM
  • JS 格式化时间 alxw4616 JavaScript
    /** * 格式化时间 2013/6/13 by 半仙 [email protected] * 需要 pad 函数 * 接收可用的时间值. * 返回替换时间占位符后的字符串 * * 时间占位符:年 Y 月 M 日 D 小时 h 分 m 秒 s 重复次数表示占位数 * 如 YYYY 4占4位 YY 占2位<p></p> * MM DD hh mm
  • 队列中数据的移除问题 百合不是茶 队列移除
         队列的移除一般都是使用的remov();都可以移除的,但是在昨天做线程移除的时候出现了点问题,没有将遍历出来的全部移除,  代码如下;      // package com.Thread0715.com; import java.util.ArrayList; public class Threa
  • Runnable接口使用实例 bijian1013 javathreadRunnablejava多线程
    Runnable接口 a.       该接口只有一个方法：public void run(); b.       实现该接口的类必须覆盖该run方法 c.       实现了Runnable接口的类并不具有任何天
  • oracle里的extend详解 bijian1013 oracle数据库extend
    扩展已知的数组空间，例： DECLARE TYPE CourseList IS TABLE OF VARCHAR2(10); courses CourseList; BEGIN -- 初始化数组元素，大小为3 courses := CourseList('Biol 4412 ', 'Psyc 3112 ', 'Anth 3001 '); --
  • 【httpclient】httpclient发送表单POST请求 bit1129 httpclient
    浏览器Form Post请求 浏览器可以通过提交表单的方式向服务器发起POST请求，这种形式的POST请求不同于一般的POST请求 1. 一般的POST请求，将请求数据放置于请求体中，服务器端以二进制流的方式读取数据，HttpServletRequest.getInputStream()。这种方式的请求可以处理任意数据形式的POST请求，比如请求数据是字符串或者是二进制数据 2. Form
  • 【Hive十三】Hive读写Avro格式的数据 bit1129 hive
     1. 原始数据 hive> select * from word; OK 1 MSN 10 QQ 100 Gtalk 1000 Skype      2. 创建avro格式的数据表   hive> CREATE TABLE avro_table(age INT, name STRING)STORE
  • nginx+lua+redis自动识别封解禁频繁访问IP ronin47
    在站点遇到攻击且无明显攻击特征，造成站点访问慢，nginx不断返回502等错误时，可利用nginx+lua+redis实现在指定的时间段 内，若单IP的请求量达到指定的数量后对该IP进行封禁，nginx返回403禁止访问。利用redis的expire命令设置封禁IP的过期时间达到在 指定的封禁时间后实行自动解封的目的。 一、安装环境： CentOS x64 release 6.4(Fin
  • java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历 bylijinnan java
    import java.util.LinkedList; import java.util.List; import java.util.Stack; public class BinTreeTraverse { //private int[] array={ 1, 2, 3, 4, 5, 6, 7, 8, 9 }; private int[] array={ 10,6,
  • Spring源码学习-XML 配置方式的IoC容器启动过程分析 bylijinnan javaspringIOC
    以FileSystemXmlApplicationContext为例，把Spring IoC容器的初始化流程走一遍： ApplicationContext context = new FileSystemXmlApplicationContext ("C:/Users/ZARA/workspace/HelloSpring/src/Beans.xml&q
  • [科研与项目]民营企业请慎重参与军事科技工程 comsci 企业
         军事科研工程和项目 并非要用最先进，最时髦的技术，而是要做到“万无一失”    而民营科技企业在搞科技创新工程的时候，往往考虑的是技术的先进性，而对先进技术带来的风险考虑得不够，在今天提倡军民融合发展的大环境下，这种“万无一失”和“时髦性”的矛盾会日益凸显。。。。。。所以请大家在参与任何重大的军事和政府项目之前，对
  • spring 定时器-两种方式 cuityang springquartz定时器
    方式一： 间隔一定时间 运行 <bean id="updateSessionIdTask" class="com.yang.iprms.common.UpdateSessionTask" autowire="byName" /> <bean id="updateSessionIdSchedule
  • 简述一下关于BroadView站点的相关设计 damoqiongqiu view
    终于弄上线了，累趴，戳这里http://www.broadview.com.cn   简述一下相关的技术点   前端：jQuery+BootStrap3.2+HandleBars，全站Ajax（貌似对SEO的影响很大啊！怎么破？），用Grunt对全部JS做了压缩处理，对部分JS和CSS做了合并（模块间存在很多依赖，全部合并比较繁琐，待完善）。   后端：U
  • 运维 PHP问题汇总 dcj3sjt126com windows2003
    1、Dede(织梦)发表文章时,内容自动添加关键字显示空白页 解决方法： 后台>系统>系统基本参数>核心设置>关键字替换（是/否），这里选择“是”。 后台>系统>系统基本参数>其他选项>自动提取关键字，这里选择“是”。   2、解决PHP168超级管理员上传图片提示你的空间不足 网站是用PHP168做的，反映使用管理员在后台无法
  • mac 下 安装php扩展 - mcrypt dcj3sjt126com PHP
    MCrypt是一个功能强大的加密算法扩展库，它包括有22种算法，phpMyAdmin依赖这个PHP扩展，具体如下： 下载并解压libmcrypt-2.5.8.tar.gz。 在终端执行如下命令： tar zxvf libmcrypt-2.5.8.tar.gz cd libmcrypt-2.5.8/ ./configure --disable-posix-threads --
  • MongoDB更新文档 [四] eksliang mongodbMongodb更新文档
    MongoDB更新文档 转载请出自出处：http://eksliang.iteye.com/blog/2174104 MongoDB对文档的CURD，前面的博客简单介绍了，但是对文档更新篇幅比较大，所以这里单独拿出来。 语法结构如下： db.collection.update( criteria, objNew, upsert, multi) 参数含义 参数   
  • Linux下的解压，移除，复制，查看tomcat命令 y806839048 tomcat
    重复myeclipse生成webservice有问题删除以前的，干净 1、先切换到：cd usr/local/tomcat5/logs 2、tail -f catalina.out 3、这样运行时就可以实时查看运行日志了 Ctrl+c 是退出tail命令。 有问题不明的先注掉   cp /opt/tomcat-6.0.44/webapps/g
  • Spring之使用事务缘由(3-XML实现) ihuning spring
      用事务通知声明式地管理事务   事务管理是一种横切关注点。为了在 Spring 2.x 中启用声明式事务管理，可以通过 tx Schema 中定义的 <tx:advice> 元素声明事务通知，为此必须事先将这个 Schema 定义添加到 <beans> 根元素中去。声明了事务通知后，就需要将它与切入点关联起来。由于事务通知是在 <aop:
  • GCD使用经验与技巧浅谈 啸笑天 GC
    前言 GCD(Grand Central Dispatch)可以说是Mac、iOS开发中的一大“利器”，本文就总结一些有关使用GCD的经验与技巧。 dispatch_once_t必须是全局或static变量 这一条算是“老生常谈”了，但我认为还是有必要强调一次，毕竟非全局或非static的dispatch_once_t变量在使用时会导致非常不好排查的bug，正确的如下： 1
  • linux（Ubuntu）下常用命令备忘录1 macroli linux工作ubuntu
    在使用下面的命令是可以通过--help来获取更多的信息1,查询当前目录文件列表：ls ls命令默认状态下将按首字母升序列出你当前文件夹下面的所有内容，但这样直接运行所得到的信息也是比较少的，通常它可以结合以下这些参数运行以查询更多的信息：  ls / 显示/.下的所有文件和目录  ls -l 给出文件或者文件夹的详细信息 ls -a 显示所有文件，包括隐藏文
  • nodejs同步操作mysql qiaolevip 学习永无止境每天进步一点点mysqlnodejs
    // db-util.js var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit : 10, host: 'localhost', user: 'root', password: '', database: 'test', port: 3306 });
  • 一起学Hive系列文章 superlxw1234 hiveHive入门
      [一起学Hive]系列文章 目录贴，入门Hive，持续更新中。   [一起学Hive]之一—Hive概述，Hive是什么 [一起学Hive]之二—Hive函数大全-完整版 [一起学Hive]之三—Hive中的数据库(Database)和表(Table) [一起学Hive]之四-Hive的安装配置 [一起学Hive]之五-Hive的视图和分区 [一起学Hive
  • Spring开发利器：Spring Tool Suite 3.7.0 发布 wiselyman spring
    Spring Tool Suite(简称STS)是基于Eclipse，专门针对Spring开发者提供大量的便捷功能的优秀开发工具。   在3.7.0版本主要做了如下的更新：   将eclipse版本更新至Eclipse Mars 4.5 GA Spring Boot(JavaEE开发的颠覆者集大成者，推荐大家学习)的配置语言YAML编辑器的支持(包含自动提示，