皮蛋很白
皮蛋很白

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 打包详细教程 oliver.chau 前端开发webpack前端node.js
    Webpack是一个现代JavaScript应用的静态模块打包工具，它可以处理JavaScript、CSS、图片等资源，并优化它们以提高性能。以下是Webpack从基础到进阶的详细教程。1.Webpack基础概念Webpack的核心概念包括：Entry（入口）：Webpack开始打包的起点。Output（输出）：打包后的文件存放路径。Loaders（加载器）：转换非JavaScript资源（如CS
  • Webpack打包构建流程 码上跑步 webpack前端node.js
    webpack的打包构建流程为什么需要打包？在前端有非常多的资源，如css、js、vue、vue、图片、字体等。有些资源需要加工处理1.ts->jsts-loader2.css->css-loader+style-loader3.图片->file-loader+url-loader4.html->html-webpack-plugin需要对产物进行优化optimization（webpack优化配
  • webpack 码上跑步 webpack前端node.js
    webpack介绍webpack是一个构建工具,实现了模块化管理项目.他的工作方式是用各种loader将各种资源转化为js文件或者对js文件进行压缩编译亦或对静态资源进行处理.官网:webpack由来模块化存在一些问题1.ESM的兼容性问题2.模块文件过多,网络请求频繁3.前端的所有资源包括html和css都需要模块化构建工具应运而生,需要一个集编译,模块打包,支持不同的资源的模块打包工具.Web
  • 面试题之webpack file-loader和url-loader 阿丽塔~ webpack前端node.js面试
    在面试中，关于Webpack中file-loader和url-loader的区别是一个常见的问题。file-loader和url-loader的区别1.功能定义file-loader：主要用于处理静态资源文件（如图片、字体等），将其复制到输出目录，并返回文件的URL。适用于较大文件或需要单独存储的资源。url-loader：是file-loader的扩展，它在处理文件时会先判断文件大小。如果文件大
  • 如何使用Webpack打包React项目？ 几何心凉 前端小常识webpackreact.js前端
    文章目录1.引言2.环境搭建2.1初始化项目2.2安装依赖3.配置Webpack3.1关键配置说明4.Babel配置5.项目结构示例6.开发和生产环境优化6.1开发环境6.2生产环境7.调试和常见问题7.1常见问题7.2调试技巧8.总结1.引言随着React应用日益复杂，开发者需要借助模块打包工具来管理项目依赖、转换代码和优化性能。Webpack是一款功能强大的模块打包器，它可以将React项目中
  • nuxt2 打包优化使用“compression-webpack-plugin”插件 webYin nuxtwebpack前端node.js
    在使用Nuxt.js构建项目时，为了提高性能，通常会考虑对静态资源进行压缩。compression-webpack-plugin是一个常用的Webpack插件，用于在生产环境中对文件进行Gzip压缩。这对于减少网络传输时间和提高页面加载速度非常有帮助。下面是如何在Nuxt.js项目中配置compression-webpack-plugin的步骤：1.安装compression-webpack-pl
  • vue scoped 原理解析 短暂又灿烂的 前端vuevue.jsjavascript前端
    Vuescoped，原理，涉及到vue-loader的处理策略：一、首先呢，是VueLoaderPlugin策略：VueLoaderPlugin先获取了webpack原来的rules（即compiler.option.module.rule的比如test:/.vue$/规则），然后创建了pitcher规则，pitcher中的pitcher-loader可以通过resourceQuery识别引入文件
  • VUE3学习 第九章 webpack 构建Vue3项目、vue3性能优化、Vue3 Web Components、Vue3 响应式原理 Hyman-ya vue3+ts+vite学习
    一、webpack构建Vue3项目（纯手写不用cli）为什么要手写webpack不用cli（脑子有病）并不是其实是为了加深我们对webpack的了解方便以后灵活运用webpack的技术1.初始化项目结构（跟cli结构保持一致）创建publi文件夹下面创建index.html文件然后初始化一下!然后改一下title标签的内容名称，一般与项目名称一样即可创建src文件夹src文件夹下面创建App.vu
  • 从零开始封装React UI 组件库并发布到NPM winyh5 前端框架react.js前端
    自我简介：4年导游，10年程序员，最近6年一直深耕低代码领域，分享低代码和AI领域见解。这篇文章您将学会1.如何从零开始搭建属于自己的reactui组件库,并发布到npm开源.2.如何从零配置webpack打包项目,例如jsx,less等打包处理.3.发布到npm有哪些注意事项?github开源地址zswuigithub说明文档wikinpm仓库地址zswui创建项目(1)进入到zswui目录执行
  • webpack-dev-server，proxy代理 码农罢了 webpack前端node.js
    如果使用了webpack-dev-server，大概率是要配置代理的devServer:{open:true,proxy:{//配置跨域'/api':{target:'https://aip.baidubce.com',//ws:true,//secure:true,changOrigin:true,//允许跨域pathRewrite:{'^/api':''//请求的时候使用这个api就可以}}}
  • webpack-dev-server解决跨域 大猫会长 webpackwebpack前端node.js
    目前解决跨域常用的方法是采用webpack-dev-server结合proxy接口代理或者使用Nginx均可配置跨域的代理。由于在本地配置好webpack-dev-server之后，所有项目成员都可以使用，一劳永逸。我们采用了配置webpack-dev-server中proxy的接口代理，在webpack.config.js文件中对webpack-dev-server配置如下：proxy:[{co
  • vue3+vite插件开发 糖糖老师436 前端程序员javascriptreact.js前端
    现在可以实现vue2的类似this.$api.xxx去调用接口,但是vue2源码使用的是flow来实现,并且搭配typeScript不太友好(由于装饰器语法过于复杂,这里不讨论vue2+装饰器来使用typeScript),故vue2项目没有开发webpack插件去实现代码补全这篇文章主要介绍的是vue3+ts+vite来开发时的代码补全情况在使用vue/react+ts开发时,我们把api挂载到全
  • js逆向——webpack扣法 sin_0119 javascriptwebpack前端爬虫
    01webpack讲解webpack是个静态模块打包工具，目的是为了让前端工程师写的前端代码变成浏览器可以识别的代码，并且可以达到前端项目的模块化，也就是如何更高效地管理和维护项目中的每一个资源。但无疑是对js逆向造成了妨碍。但如果掌握了扣取webpack的一些技巧也是不难的。接下来，说一下我对扣取webpack代码的一些理解。1.1webpack组成一个最基本的webpack组成有两个部分:自执
  • Webpack缓存优化策略探讨 创梦引领 webpack缓存前端JavaScript
    在前端开发中，Webpack是一个广泛使用的模块打包工具，它可以将多个前端资源（如JavaScript、CSS、图片等）打包成静态资源，以提高应用的加载速度和性能。然而，由于前端应用的不断迭代更新，缓存成为一个重要的优化方向。本文将探讨如何通过Webpack的缓存优化策略来提升应用的性能。一、文件指纹文件指纹是实现缓存策略的基础。通过给文件名添加唯一的标识符，可以实现在文件内容未变化时，仍然使用缓
  • Vue打包后生成的文件及编程细节 心之飞翼 vue.js前端javascript编程
    Vue.js是一种流行的JavaScript框架，用于构建现代化的单页应用程序。当我们开发一个Vue应用并准备将其部署到生产环境时，我们需要对应用进行打包，以便生成最终的可执行文件。在这篇文章中，我们将详细讨论Vue打包后生成的文件，以及与之相关的编程细节。1.打包工具：Webpack在Vue项目中，常用的打包工具是Webpack。Webpack提供了强大的模块打包能力，能够将Vue应用中的各种资
  • Webpack 打包后文件过大，如何优化？ 几何心凉 前端入门之旅webpack前端node.js
    聚沙成塔·每天进步一点点本文回顾⭐专栏简介Webpack打包后文件过大，如何优化？1.代码分割（CodeSplitting）1.1概念1.2Webpack的`SplitChunksPlugin`示例配置：1.3按需加载（LazyLoading）示例：2.TreeShaking2.1概念2.2启用TreeShaking示例配置：2.3检查未被使用的代码安装`webpack-bundle-analyz
  • 归纳webpack 捻tua馔... webpack前端
    常用配置项constHtmlWebpackPlugin=require('html-webpack-plugin');//通常用于生成HTMLconstMiniCssExtractPlugin=require('mini-css-extract-plugin');//用于分离CSSconstcssMinimizerWebpackPlugin=require("css-minimizer-webpa
  • Webpack常见配置实例 码上跑步 webpack前端node.js
    webpack实例打包构建流程对应的常见配置1.mode:'development'​2.entry:'./src/index.js'​3.output​4.module.rules​5.Loader​6.Plugin​7.devServerwebpack.config.jswebpack常见配置实例配置详解mode:‘development’:设置Webpack运行模式，可以是developme
  • 大白话Webpack 配置与使用的详细步骤和插件应用 IT木昜 大白话前端高频面试题webpack前端node.js
    大白话Webpack配置与使用的详细步骤和插件应用啥是WebpackWebpack就像是一个超级管家，在我们开发网页的时候，会有各种各样的文件，像JavaScript文件、CSS文件、图片等等。这些文件就像是家里的各种物品，分散在不同的地方，而且有的物品还得按照特定顺序摆放、处理之后才能正常使用。Webpack这个管家就负责把这些分散的文件收集起来，按照我们的要求进行打包、处理，最后变成一个或几个
  • 使用Webpack搭建React脚手架（下篇） Web_linlan webpackreact.js前端
    一套完善的开发环境配置可以极大的提升开发效率，提高代码质量，方便多人合作，以及后期的项目迭代和维护。所以说，前端代码格式规范和语法检测的工具可以提高代码的质量和可读性，减少低级错误和维护成本，提高团队的协作效率和开发效率，是非常有必要的。本篇我们将完善脚手架的搭建。代码格式规范和语法检测工具1，EditorConfig：EditorConfig是一个用于统一编辑器和IDE的配置文件的工具。它可以帮
  • HTTP/1.1 和 HTTP/2 的区别，HTTP/2 有哪些新特性？ 程序员黄同学 node.js前端开发JavaScripthttp网络协议网络
    HTTP/1.1和HTTP/2的区别及新特性详解一、核心区别：连接管理与多路复用HTTP/1.1使用「短连接」或「持久连接」，但每个TCP连接在同一时刻只能处理一个请求（HOLBlocking）。浏览器通常通过开启多个TCP连接（6-8个）缓解阻塞，但增加了服务器压力。//HTTP/1.1下需合并资源减少请求数（但可能影响缓存）//使用工具如Webpack合并JS：module.exports={
  • vue项目中使用scss 筱筱° #scssvue.jsscss
    vue项目中使用scss一、安装使用scss1.安装scss2.安装node-sass和sass-loader3.配置webpack.base.conf.js文件4.组件中使用scss二、设置scss变量1.使用sass-resources-loader实现全局变量2.新建一个public.scss文件3.根目录下找到build下的utils.js文件4.运行项目三、常用全局变量1.设置变量2.使
  • 深度解析Ant Design Pro 6开发实践 i建模 前端开发前端开发react.jstypescriptant-design
    深度解析AntDesignPro6全栈开发实践：从架构设计到企业级应用落地一、AntDesignPro6核心特性与生态定位（技术架构分析）作为AntDesign生态体系的旗舰级企业应用中台框架，AntDesignPro6基于以下技术栈实现突破性升级：模块联邦架构：通过Webpack5的ModuleFederation实现秒级热更新，工程启动时间缩短60%3全链路TypeScript支持：从路由配置
  • Webpack构建兼容IE8
    IE8中运行webpack打包后的程序会出现各种问题，请注意，真的会有各种问题，所以尽可能不要在IE8上运行webpack，连淘宝都不支持IE8了，为什么我们还要兼容它呢？毕竟是十年前的东西了。但是，如果产品经理非要兼容IE8，或者目标用户就是那些用IE8的群体（暴露年龄的东西），讲道理还是可以解决的，只是要多费些脑细胞。首先要知道IE8不怎么兼容es5特性，所以要加入es5的compatibil
  • Vue打包（webpack）缓存 歌歌的前端学习之路 vue.jswebpack前端
    解决方法：1、修改vue.config.js文件constTimestamp=newDate().getTime();module.exports=defineConfig({configureWebpack{output:{filename:`[name].${Timestamp}.js`,chunkFilename:`[name].${Timestamp}.js`},},css:{extrac
  • cordova app webpack升级为vite weixin_45410246 cordova-hcpCordovavuevitewebpack前端node.jsvite
    本文是对vue2进行兼容1.在项目根目录下运行以下命令，安装Vite和必要的插件：npminstallvite@vitejs/plugin-legacy--save-devvite：Vite核心包。@vitejs/plugin-legacy：为旧版浏览器提供支持（建议添加vite生成的script会有type=“module”）。否则在cordova中可能报错Failedtoloadmodules
  • webpack基础配置 吃杠碰小鸡 前端前端工具库webpack前端javascript
    文章目录一、默认入口和默认出口二、资源配置三、输出文件3.1多文件入口3.2HtmlWebpackPlugin插件四、环境4.1环境变量4.2热更新五、代码分离5.1公共模块5.2懒加载5.3预获取/预加载模块六、缓存七、TreeShaking八、公共路径webpack是一个用于现代JavaScript应用程序的静态模块打包工具，在许多项目中都有应用，但是往往平台搭建以后很少去修改配置，熟悉基础配
  • vue-cli开启gzip打包报错TypeError: Cannot read property ‘tapPromise‘ of undefined-解决 JackieDYH VueERRORtapPromisegzip打包报错vue-clivue
    给项目增加gzip打包yarnaddcompression-webpack-plugin-D（默认安装的是7以上的最新版本）修改vue.config.jsconstCompressionWebpackPlugin=require('compression-webpack-plugin');configureWebpack:{plugins:[newCompressionWebpackPlugin(
  • Webpack、Vite区别知多少？ m0_74824044 面试学习路线阿里巴巴webpack前端node.js
    前端的项目打包，我们常用的构建工具有Webpack和Vite，那么Webpack和Vite是两种不同的前端构建工具,那么你们又是否了解它们的区别呢？我们在做项目时要如何选择呢？一、工具定义1、Webpack：是一个强大的静态模块打包工具，它可以将各种类型的文件，如JavaScript、CSS、图片等，作为模块进行打包，并生成最终的静态资源文件。Webpack使用各种loader和plugin来处理
  • 什么？你的Nestjs项目部署的时候还要把node_module带上去？ 海上彼尚 node.jsnode.jsjavascript
    目录创建webpack配置文件修改nestjs-cli修改package最近跟一个小伙伴聊天，他说他部署Nestjs项目的时候，每次都要把package.json带上去然后使用npm把依赖安装一次，才能运行项目。然后我也是给了小伙伴解决方案。创建webpack配置文件#webpack.config.jsconstpath=require('path');constwebpack=require('
  • 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编辑器的支持(包含自动提示，