皮蛋很白
皮蛋很白

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图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • react里的index.js是怎么跟index.html结合起来的? SherrinfordL
    image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf
  • 深入理解Webpack核心模块Tapable钩子[异步版] weixin_34413802 webpackjavascriptViewUI
    接上一篇文章深入理解Webpack核心模块WTApable钩子(同步版)tapable中三个注册方法1tap(同步)2tapAsync(cb)3tapPromise(注册的是Promise)tapable中对三个触发方法1call2callAsync3promise这一章节我们将分别实现异步的Async版本和Promise版本异步钩子AsyncParallelHookAsyncParallelHo
  • webpack 之 tapable 学习 weixin_34008784 webpackjavascriptViewUI
    前言webpack大家应该都耳熟能详了。个人感觉，webpack的本质就是让一堆的Loader和Plugin在webpack的可支配范围内，有序可控的执行，最终生成一堆可在浏览器中执行的code和一些状态信息。而这些Loader和Plugin，有用户自定义的，也有webpack自己内部定义的。Loader的运行机制，不是这篇文章讲述的内容，有需要的朋友，可以看下我之前的这篇文章：webpack之l
  • webapck由浅入深——（Tapable） weixin_33737134 webpackViewUI
    webpack系列文章webpack由浅入深——（webpack基础配置）webpack由浅入深——（webpack优化配置）webpack由浅入深——（tapable）webpack由浅入深——（webapck简易版）webpack由浅入深——（ast、loader和plugin）Tapable和webpackTapable是基于发布订阅模式实现的一个类库，提供了许多Hook类，可创建许多钩子。
  • webpack插件开发必会Tapable web老猴子 webpack前端javascript
    认识Tapable官方对tapable的定义是钩子，业界很多写tapable的觉得它是发布订阅模式，它确实很像发布订阅模式，但是不完全是，至于官方说的钩子，个人感觉在webpack内部可以称作钩子，因为是官方定义的，所以肯定是按照设计的想法来使用的，如果是你自己使用，操作不当可能就不是钩子了，毕竟只是一个工具，你拿扳手当锤子也没人说你什么，以上是个人见解，下面附上一些验证的思路。不喜欢论证，喜欢看
  • webpack的插件机制(Tapable) 若梦plus 前端工程化webpack前端
    webpack的插件机制(Tapable)在具体介绍webpack内置插件与钩子可视化工具之前，我们先来了解一下webpack中的插件机制。webpack实现插件机制的大体方式是：创建-webpack在其内部对象上创建各种钩子；注册-插件将自己的方法注册到对应钩子上，交给webpack；调用-webpack编译过程中，会适时地触发相应钩子，因此也就触发了插件的方法。Webpack本质上是一种事件流
  • 四、webpack4.0 - tapable Razas WEBPACK4webpack4.0
    一、tapable介绍webpack中插件的时候，需要用到tapable。新建一个项目WEBPACK-Tapable。初始化package.json:npminit-y安装：npminstalltapable--savetapable是一个包。二、tapable三、AsyncParralleHook四、AsyncSeriesHook五、AsyncSeriesWaterfall
  • tapable详解 风火一回 webpacktapablewebpack插件制作
    tapable详解tapable是webpack内部使用的一个流程管理工具，主要用来串联插件，完善事件流执行。1.安装tapableyarnaddtapable2.常用hooksimport{SyncHook,SyncBailHook,SyncWaterfallHook,SyncLoopHook,AsyncParallelHook,AsyncParallelBailHook,AsyncSeries
  • Tapable 信海利世 webpackwebpack前端
    一、Tapable是什么？Tapable是一个类似于Node.js的EventEmitter的库,主要是控制钩子函数的发布与订阅,控制着webpack的插件系统。Tapable库暴露了很多Hook（钩子）类，为插件提供挂载的钩子const{SyncHook,//同步钩子SyncBailHook,//同步熔断钩子即return一个非undefined的值，则不再继续执行后面的监听函数SyncWate
  • Webpack插件核心原理 gogo2027 webpack
    引言围绕Webpack打包流程中最核心的机制就是所谓的Plugin机制。所谓插件即是webpack生态中最关键的部分，它为社区用户提供了一种强有力的方式来直接触及webpack的编译过程(compilationprocess)。今天，我们来聊聊Webpack中必不可少的核心Plugin机制～Plugin本质上在Webpack编译阶段会为各个编译对象初始化不同的Hook，开发者可以在自己编写的Plu
  • webpack怎么配置单页面或者多页面项目？ 镜中的女孩-potato webpack前端node.js
    单页直接在entry中指定单页面的入口文件即可，对于多页面来说，如果页面之间有依赖关系可以考虑将entry的值改成一个数组，数组中的每一项是入口文件的地址，并且通过dependOn配置多个入口的依赖关系，一般的，我们也可以直接在entry中配置多个入口文件的键值对1、单页面举个例子=>你有这样一个项目架构├──config│├──webpack.config.js//webpack配置文件├──s
  • fetch-event-source 如何通过script全局引入 cuiyuchen111 javascript前端
    fetchEventSource源码中导出了两种类型的包cjs和esm。但是有个需求如何在原生是js中通过script标签引呢？需要加上type=module。今天介绍另一种方法下载源码文件：https://github.com/Azure/fetch-event-source.git安装:npminstall--save-devwebpackwebpack-clits-loadertypescr
  • 【Webpack 踩坑】CSS加载缓慢 ①条咸鱼 webpackcssrust
    问题：使用webpack5，单独index.scss在assets/css目录下，但是不管是production还是development环境下，都会出现dom加载完后再渲染样式本意是想要将样式单独打包到一个文件夹，还有压缩css于是用了mini-css-extract-plugin这个loader（前提要先安装）//webpack.config.jsconstMiniCssExtractPlug
  • 从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南 Sam9029 Webpack前端webpack
    **‍‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！**由于文章有一万字左右的，故而内容中部分不免冗余，或许有写了些废话进去，但整体也无伤大雅**‍‍文章是初次实践总结,若有错误或某个内容有更优的解决方案，还望指正！**附录中有脚手架文件夹目录大纲（Vue3+Webpack5）脚手架项目源码:https://github.com/sam9029/s9_webpack_g
  • webpack原理、优势、基本功能和常见问题 伟大的人民艺术家 javascriptes6
    webpack是一个模块打包工具，用它可以管理项目中的模块依赖，并编译出所需的静态文件。打包原理：webpack打包原理是根据文件间的依赖关系对其进行静态分析，将这些模块按指定规则生成静态资源，当webpack处理程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，将所有这些模块打包成一个或多个bundle。webpack构建流程初始化参数—>开始编译---->确定入口---->
  • 前端技能树，面试复习第 29 天—— 简述 Babel 的原理 | Webpack 构建流程 | Webpack 热更新原理 | Git 常用命令 编程轨迹_ 前端面试复习笔记前端面试面经前端工程化WebpackBabel前端面试大厂面试题
    31b3479814f74acbb70b9f63f2e80012.gif"width=“100%”>⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、答疑解惑、面试辅导以及职业发展。。1.Babel的原理是什么?babel的转译过程也分为三个阶段，这三步具体是：解析、转换、生成解析Parse:将代码解析⽣成抽象语法树（AS
  • 前端开发深入了解webpack 史努比的大头 前端
    什么是webpackWebpack是一个现代JavaScript应用程序的模块打包工具。它主要用于将各种资源（如JavaScript、CSS、图片等）打包成一个或多个文件，以优化Web应用的加载性能。Webpack的核心功能包括：模块化：支持将代码拆分为模块，便于管理和重用。打包：将多个模块和资源打包成一个或多个文件，减少HTTP请求。加载器（Loaders）：处理不同类型的文件（如转换ES6到E
  • 【Webpack】了解Webpack Sam9029 Webpackwebpack前端node.js
    Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！*文章若有错误或某个内容有更优的解决方案，还望指正！*Webpack了解webpack指南https://webpack.docschina.org/guides/webpack文档https://webpack.docschina.org/前
  • Webpack 概念速通：从入门到掌握构建工具的精髓 tabzzz 前端webpack前端
    Webpack基本概念这里我们先简单熟悉下Webpack的基本概念，我们在搭建项目的时候都会要用到的！这里我们分享的着重点是基本概念而不是具体配置项和使用方法依赖图(dependencygraph)模式(mode)入口(entry)输出(output)加载器(loader)插件(plugin)源映射(SourceMaps)开发服务器(devServer)依赖图（dependencygraph）依赖
  • 高级 - 总结 怕冷的火焰（~杰） nodejs和webpackwebpack
    高级总结:我们从4个角度对webpack和代码进行了优化:​1.提升开发体验使用SourceMap让开发或上线时代码报错能有更加准确的错误提示2.提升webpack打包构建速度使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快使用OneOf让资源文件一旦被某个loader处理了,就不会继续遍历了,打包速度更快使用Include
  • webpack 配置 weixin_44101835 webpack前端node.js
    webpack.base.jsconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');constMiniCssExtractPlugin=require('mini-css-extract-plugin');modules.export=function(isDev){return{//入口文件
  • 值得你学习的构建工具-Webpack5.0简化版--五大核心概念 双头雄狮 构建工具学习webpack
    一、Webpack是什么简单来说，webpack就是一个用于现代JavaScript应用程序的静态打包工具，打包过程：从入口文件开始，构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些所有模块打包，它们均为静态资源，用于展示你的内容。Webpack5运行于Node.jsv10.13.0+的版本。二、为什么使用Webpack在以前我们开发一个项目的时候，会出现很多.css、.js等类似的
  • Webpack五大核心概念 前路茫茫——何处无香 webpackwebpack
    一、Entry入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。二、Output输出（Output）指示Webpack打包后的资源bundles输出到那里去，以及如何命名。三、LoaderLoader让Webpack能够取处理那些非JavaScript文件（Webpack自身子理解JavaScript）四、Plugins插件（Plugins）可以用于执行范围更广
  • webpack - 五大核心概念和基本配置（打包一个简单HTML页面） 怕冷的火焰（~杰） nodejs和webpackwebpacknode.js
    //五大核心概念1.entry（入口）指示Webpack从哪个文件开始打包2.output（输出）指示Webpack打包完的文件输出到哪里去，如何命名等3.loader（加载器）webpack本身只能处理js，json等资源，其他资源如图片需要借助loader，webpack才能解析4.plugin（插件）扩展Webpack的功能5.mode（模式）主要有两种模式：开发模式（development
  • Webpack和Vite的区别 南辞w 前端面试篇webpack前端node.js
    什么是webpack？webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependencygraph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。Webpack的打包构建流程Webpack会遍历你应用程序中的所有文件，并启动一个开发服务器，
  • CRACO 快速使用 小秀_heo React及其周边生态前端javascript
    GettingStarted|CRACOcraco是专门由于cra配置的重写，扩展配置cra（webpack）。安装依赖npmi-D@craco/craco根目录下创建craco.config.js和配置configure:my-app├──node_modules+├──craco.config.js└──package.jsoncraco.config.jsmodule.exports={de
  • 周末写点东西都是很困难的 焦糖大瓜子
    趁周末，也没有出去玩，回了趟家。看了一下VueCLI，也看了看阮大神写的webpack教程。webpack是一直想详细掌握的工具，需要系统学。学习一门技术，系统学习之后，那些重要和概念、设计的逻辑，也未必完全掌握，掌握的东西，也未必烂熟于心。终归要用于实际项目，反反复复，也就是常说的那个三境界：1.昨夜西风凋碧树，独上高楼，望断天涯路2.衣带渐宽终不悔,为伊消得人憔悴3.众里寻他千百度，蓦然回首，
  • WebAssembly studentliubo
    1、是什么WebAssembly或者wasm是一个可移植、体积小、加载快并且兼容Web的全新格式。其实w9y不是用来一行一行撸的代码，它是一个编译目标。什么是编译目标？当我们编写TypeScript的时候，Webpack最后打包生成的Js文件就是编译目标。2、和JS的关系WebAssembly是被设计成JavaScript的一个完善、补充，而不是一个替代品。WebAssembly将很多编程语言带到
  • 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编辑器的支持(包含自动提示，