webpack3.x看这个就够了
本文介绍webpack3.x的使用
说明，本文前后连贯性很强，建议从头往后看
目录
开始
css文件打包
image文件打包
字体文件打包
json文件打包
csv文件和xml文件打包
多入口文件打包
清理dist目录
development开发环境错误定位
development开发环境开发模式
development开发环境模块热替换
development开发环境模块热替换存在的问题
Tree Shaking（死代码终结者）
development和production代码分离与合并
系统环境变量设置
css文件剥离
代码分割
按需加载
浏览器资源缓存
全局导入
no export导出
静态服务器搭建
-
安装webpack
npm init -y
npm install webpack --save-dev
使用命令行bundle文件
npx webpack src/index.js dist/bundle.js
使用配置文件bundle文件
项目根目录创建webpack.config.js文件，写入如下内容
const path = require("path");
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
运行命令 npx webpack --config webpack.config.js
或者在package.json中写
"scripts": {
"build": "webpack"
}
运行 npm run build 即可，默认去找项目根目录的webpack.config.js
-
项目根目录下面一个dist目录用来放打包后的文件，src目录用来放源文件，index.html放在dist目录中，webpack默认这样的
在src/index.js中 import './style.css，让webpack解析此类文件，完成如下几步
首先，安装插件
npm install --save-dev style-loader css-loader
其次，修改webpack.config.js的配置为
const path = require("path");
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
}
最后，运行webpack即可，css文件都打包到bundle.js中，运行时自动插入到header中
提示：
css-loader对css文件中的url图片都做了处理，将其替换成打包后的绝对路径
-
在src/index.js中 import MyImage from './4.jpg'; 其中MyImage是图片的打包后的绝对路径
安装插件，npm install --save-dev file-loader
修改，webpack.config.js
在module中添加如下rules
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
运行打包即可
-
在css文件中写自定义字体，如
@font-face {
font-family: 'MyFont';
src: url('./my-font.woff2') format('woff2'),
url('./my-font.woff') format('woff');
font-weight: 600;
font-style: normal;
}
同样使用file-loader，修改，webpack.config.js
在module中添加如下rules
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
运行webpack即可
-
webpack默认支持json文件导入，所以无需任何额外操作
在src/index.js中
import data from './index.json';
console.log(data);
index.json中这样定义
{
"a": 1,
"b": 2
}
-
安装插件 npm install --save-dev csv-loader xml-loader
添加如下的rules
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
使用方式和json文件类似
-
如果你想把你的js文件拆分成小的文件组合，多入口很好的解决这个问题
比如，在src/index.js文件中 import printMe from './print.js';
修改 webpack.config.js 配置如下
const path = require("path");
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, "dist")
}
}
修改 dist/index.html
<script src="./print.bundle.js"></script>
<script src="./app.bundle.js"></script>
打包编译即可
问题：我们必须手动在index.html中插入js文件，可以使用html-webpack-plugin自动插入脚本
安装，npm install --save-dev html-webpack-plugin
修改 webpack.config.js 文件如下
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new HtmlWebpackPlugin({
title: "自动生成的html文件"
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, "dist")
}
}
运行编译即可
-
在打包之前，先清理干净我们的dist输出目录，是非常好的做法
安装 npm install clean-webpack-plugin --save-dev
修改 webpack.config.js 文件
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: "自动生成的html文件"
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, "dist")
}
}
运行编译即可
-
定位错误信息
所有的文件打包到bundle中，如果代码是错误的，要想定位到错误的源文件，必须使用source-map
修改 webpack.config.js
添加 devtool: 'inline-source-map',
运行打包，如果在浏览器中运行错误，会定位错误源
-
每次查看代码都要运行 npm run build， 然后刷新浏览器，这是很烦的一个操作
webpack有如下几种模式，自动的帮你完成上面两个操作
Watch 模式
首先，在package.json中添加如下命令
"watch": "webpack --watch"
然后运行 npm run watch
当你修改你的代码，webpack自动帮你编译
webpack-dev-server 模式
首先，安装 npm install --save-dev webpack-dev-server
然后，修改 webpack.config.js 在module.exports中添加如下属性
devServer: {
contentBase: './dist'
}, // 作用是告诉webpack在localhost:8080上观察dist目录下面的内容
然后，在package.json中添加如下命令
"start": "webpack-dev-server --open"
运行 npm start
当你修改了你的代码，webpack会自动帮你编译，并且自动帮你刷新浏览器
webpack-dev-middleware 模式
这种模式和webpack-dev-server类似，不过提供了更多的配置
安装 npm install --save-dev express webpack-dev-middleware
修改 webpack.config.js 为如下内容
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map',
// devServer: {
// contentBase: './dist'
// },
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: "自动生成的html文件"
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, "dist"),
publicPath: '/'
}
}
在项目根目录下添加 server.js，写如下内容，涉及到node.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}))
app.listen(3000, function() {
console.log("app listenging on port 3000!\n");
})
在package.json中添加如下命令
"server": "node server.js"
运行 npm run server 即可
打开 localhost:3000 查看
-
热替换，简单理解，就是什么文件修改了，更新什么文件
开启模块热替换webpack方式
修改webpack.config.js文件为
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
// app: './src/index.js',
// print: './src/print.js'
app: './src/index.js' // 多bundle文件不需要写多个entry实现，HotModuleReplacementPlugin自动完成
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true // 开启热替换
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: "自动生成的html文件"
}),
new webpack.NamedModulesPlugin(), // 在重新编译的时候，会展示被更新模块的相对路径，如 “ [./src/print.js] ./src/print.js 98 bytes {0} [built] ”
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, "dist")
}
}
运行 npm start
开启模块热替换node.js方式
首先，修改webpack.config.js文件
去掉devServer配置项
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js'
},
devtool: 'inline-source-map',
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: "自动生成的html文件"
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, "dist")
}
}
修改server.js
const webpack = require('webpack');
const webpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config.js');
const options = {
contentBase: './dist',
hot: true,
host: 'localhost'
};
webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);
server.listen(5000, 'localhost', () => {
console.log("dev server listening on port 5000");
})
运行 npm run server
css文件的热替换，直接使用style-loader即可自动完成
-
src/index.js内容如下
import printMe from './print.js';
function fn() {
console.log("aaaa")
var element = document.createElement('div');
var btn = document.createElement('button');
element.innerHTML = "hahaha";
btn.innerHTML = "按钮";
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(fn());
if(module.hot) { // 监听模块热更新
module.hot.accept('./print.js', function(){
console.log("print.js更新了");
printMe();
})
}
src/print.js内容如下
export default function printMe() {
console.log("print.js")
}
当更新print.js时，点击按钮，输出的信息还是之前的信息，这可以说是webpack热替换的一个硬伤
解决上面这个问题，最原始的方法，如下
if(module.hot) {
module.hot.accept('./print.js', function(){
document.body.removeChild(element);
element = fn();
document.body.appendChild(fn);
})
}
-
当你的代码中只import某个文件的一部分，但是打包的时候这个文件全部的内容都包含进来了，这就是Tree Shaking要解决的
下载插件 npm install --save-dev uglifyjs-webpack-plugin
将插件添加到webpack.config.js中即可
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
plugins: [
new UglifyJSPlugin()
]
运行npm run build，只用import了的代码才会被打包
当一个文件的内容被其他的文件导入，然后重新导出，此时Tree Shaking失效了
注：在命令行中 --optimize-minimize 可以实现同样效果
-
将webpack的配置拆分成development和production需要用到webpack-merge插件，作用是合并配置
安装插件 npm install --save-dev webpack-merge
将webpack.config.js文件删除，添加如下三个
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: "生成的index.html"
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
});
webpack.prod.js
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'source-map', // 生产环境最好也加上source-map，如果你不需要可以去掉
plugins: [
new UglifyJSPlugin({
sourceMap: true
})
],
output: {
publicPath: '/Test' // 指定发布路径
}
});
修改package.json命令
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
}
-
利用process.env.NODE_ENV可以方便的设置development和production模式
利用webpack的DefinePlugin插件，可以方便设置此变量
修改webpack.prod.js文件
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
const webpack = require('webpack');
module.exports = merge(common, {
devtool: 'source-map',
plugins: [
new UglifyJSPlugin({
sourceMap: true
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
});
然后在你自己的源代码中，随便访问环境变量
if(process.env.NODE_ENV != 'production') {
console.log("我不是production模式");
}else {
console.log("我是production模式")
}
注：在命令行中 --define process.env.NODE_ENV="'production'" 可以实现同样效果
利用webpack自己的内置的方式设置环境变量
使用--env自定义环境变量
如，package.json命令 "start": "webpack-dev-server --open --config webpack.dev.js --env.production=false --env.MyEnv=development --progress",
修改webpack.dev.js
module.exports = env => {
console.log(env); -> 输出 { production: 'false', MyEnv: 'development' }
return merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
});
}
-
将css从bundle中剥离出来，需要如下几步
安装 npm install --save-dev extract-text-webpack-plugin
修改 webpack.common.js文件
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
app: './src/index.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({ // 剥离文件
fallback: "style-loader",
use: "css-loader"
}),
include: path.resolve(__dirname, "src")
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: "生成的index.html"
}),
new ExtractTextPlugin({ // 设置插件选项
filename: "styles.css",
disable: process.env.NODE_ENV == "developement"?true: false
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
只在production模式中才会剥离css，在development中不剥离从而提高性能
-
代码分割有如下几种方式
多入口，开篇讲过写法
entry: {
app: './src/index.js',
entry: './src/print.js'
},
这种写法存在问题，当这些entry中都import了相同的模块，那么打包后的每个bundle中都存在重复的代码
解决办法如下
在webpack.common.js中的plugins项中，添加如下配置
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // 剥离的文件名
})
CommonsChunkPlugin的作用就是将bundle中的重复代码提取到单独的文件中
动态import，单入口
也就是 import() 语法，此语法返回一个promise对象，使用步骤如下
首先，修改webpack.common.js配置如下
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
app: './src/index.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: "生成的index.html"
}),
new ExtractTextPlugin({
filename: "styles.css",
disable: process.env.NODE_ENV == "developement"?true: false
})
],
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js', // import() 分离多文件的关键配置
path: path.resolve(__dirname, 'dist')
}
}
然后，假设src/other.js中的代码如下
export function fn () {
console.log("相互引用的js");
}
假设src/print.js中的代码如下
export async function GetOtherComponent() {
const _ = await import(/* webpackChunkName: "myOther" */ './other.js');
return _;
}
假设src/index.js中的代码如下
import { GetOtherComponent } from './print.js';
GetOtherComponent().then(data => {
data.fn();
console.log(data);
})
运行 npm run build, 输出了myOther.bundle.js文件
代码分离到此结束
-
按需加载还是需要借助import()函数
button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
var print = module.default; // 表示print.js中的export.default的对象
print();
});
-
利用webpack的chunkhash可以方便的监测到文件是否修改，如果修改自动更改文件名，浏览器更新资源
使用相当简单，只需要将output改为
output: {
// filename: '[name].bundle.js',
filename: '[name].[chunkhash].js',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
配合CommonsChunkPlugin可以将公共的不变的代码剥离出来，从而让浏览器永远缓存不需要重新下载
修改webpack.common.js配置文件如下
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js',
vendor: [ // 设置需要剥离的第三方库
"moment"
]
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: "生成的index.html"
}),
new ExtractTextPlugin({
filename: "styles.css",
disable: process.env.NODE_ENV == "developement"?true: false
}),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor" // 将vendor入口打包单独输出
}),
new webpack.optimize.CommonsChunkPlugin({
name: "manifest" // 打包剩余部分，必须写在最后
})
],
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
}
}
存在的问题
webpack打包其中有一个module.id，这个东西是用来标识模块的，从而在剥离的manifest文件中引用
默认情况下module.id是根据模块打包的顺序来自增编号的，当用户打乱了模块import的顺序，那么打
包后所有的文件都被修改了，这是模块的chunkhash都发生改变了，为了解决这个问题，请使用如下方式
只需要将你的webpack.common.js中的plugins修改为
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: "生成的index.html"
}),
new ExtractTextPlugin({
filename: "styles.css",
disable: process.env.NODE_ENV == "developement"?true: false
}),
new webpack.HashedModuleIdsPlugin(), // 添加这一句话就ok了
new webpack.optimize.CommonsChunkPlugin({
name: "vendor"
}),
new webpack.optimize.CommonsChunkPlugin({
name: "manifest"
})
],
-
当你需要导入jQuery这样带有全局属性的模块的时候，此部分是你必须掌握的
首先，将jquery下载到项目，修改webpack.common.js文件，在plugins配置项中添加如下
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery'
}), 当程序中出现$或者jquery时，webpack在编译的时候就会去找对应的模块
然后，在程序中直接访问即可，如 console.log($);
当然，当你的程序中只用到了其他插件的一部分代码，你想利用tree shaking的技术，可以参考如下
new webpack.ProvidePlugin({
join: ['lodash', 'join'] // 表示将lodash中的join方法注册成全局的，webpack只会打包此单个方法
})
-
当你的代码中不export任何代码，如何让其他模块import？，请看下面
首先在 other.js 中定义如下
var obj = {
"a": 1,
"b": 2,
"c": 3
}
var a = 1;
var fn = function() {
console.log(111);
}
在 index.js 中导入
import { a,fn,c } from './other.js';
安装插件 npm i exports-loader --save
修改webpack.common.js文件，在module中添加如下rules
{
test: require.resolve('./src/other.js'),
use: 'exports-loader?a,fn,c=obj.c'
}
-
当我们的代码编译完成之后，如何搭建一个静态服务器来查看我们编译的代码呢？
安装 npm install http-server --save-dev
在package.json文件中添加命令
"server": "http-server dist"
编译代码 npm run build 然后 npm run server 即可
存在的问题，当我们将server停止后，页面将无法访问，解决办法如下
安装 npm install workbox-webpack-plugin --save-dev
将插件配置，写到webpack.config.js中
const WorkboxPlugin = require('workbox-webpack-plugin');
在plugins配置项中添加
new WorkboxPlugin({
clientsClaim: true,
skipWaiting: true
})
在程序入口 index.js 中注册Serveic Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').then(registration => {
console.log('SW registered: ', registration);
}).catch(registrationError => {
console.log('SW registration failed: ', registrationError);
});
});
}
运行 npm run build
直接浏览器访问 http://127.0.0.1:8080 即可
webpack3.x看这个就够了的更多相关文章
- 【原】HTTP in iOS你看我就够
声明:本文是本人 编程小翁 原创,转载请注明. 本文同步发布在简书中,强烈建议移步简书查看,编程小翁 HTTP属于老话题了,在项目中我们经常需要往服务端发POST或者GET请求,但是对于HTTP的了解 ...
- HTTP in iOS你看我就够
HTTP属于老话题了,在项目中我们经常需要往服务端发POST或者GET请求,但是对于HTTP的了解不应只局限于此.千里之行,始于足下.越想走的远,基本原理就应该了解的透彻全面一些,仅仅停留在使用ASI ...
- 关于iOS多线程，你看我就够了
在这篇文章中,我将为你整理一下 iOS 开发中几种多线程方案,以及其使用方法和注意事项.当然也会给出几种多线程的案例,在实际使用中感受它们的区别.还有一点需要说明的是,这篇文章将会使 用 Swift ...
- Prometheus Metrics 设计的最佳实践和应用实例，看这篇够了！
Prometheus 是一个开源的监控解决方案,部署简单易使用,难点在于如何设计符合特定需求的 Metrics 去全面高效地反映系统实时状态,以助力故障问题的发现与定位.本文即基于最佳实践的 Metr ...
- 修改版: 小伙,多线程(GCD)看我就够了,骗你没好处!
多线程(英语:multithreading),是指从软件或者硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程,进而提升整体处理性能.具有这种能力的系 ...
- html总结----------------------看这个就够了
HTML是我们学习Javaweb的第一步 很好地掌握门课是非常有必要的!下面就是我在听资深老师讲课的笔记!个人觉得非常不错!希望可以帮助到那些在学习javaweb路上的 朋友们!从今天 陆续的整理这门 ...
- 做一款仿映客的直播App？看我就够了
来源:JIAAIR 链接:http://www.jianshu.com/p/5b1341e97757 一.直播现状简介 1.技术实现层面: 技术相对都比较成熟,设备也都支持硬编码.IOS还提供现成 ...
- Vue2全家桶之二：vue-router（路由）详细教程，看这个就够了
作者:东西里本文转载于:https://www.jianshu.com/p/514c7588e877来源:简书 转载仅供自己日后看方便. 由于Vue在开发时对路由支持的不足,于是官方补充了vue- ...
- 移动Web UI库（H5框架）有哪些，看这里就够了
前言 今年上半年,项目组在项目开发的过程中建立了一套风格统一,组件丰富完善,命名统一规范的PC端UI库,适用于做大型站点,该UI库也是应用到了整个平台的项目中,在各个项目组中进行推广.因为项目的保密性 ...
随机推荐
- 如何用wamp配置多域名虚拟目录
一.前言 自从重装了最新版wamp64后就不可用了,下面来介绍我的解决方法,两者均可尝试,差别并不大! 二.配置虚拟主机 1.首先打开apache的配置文件httpd.conf (路径\wamp64\ ...
- webdriver 选择
You only need from selenium import webdriver . Execute html= browser.find_element_by_xpath(" ...
- Java JDK、Tomcat、Eclipse环境配置
Java 下载地址:http://www.oracle.com/ 根据提示一步一步进行安装,通常安装到C:\Program Files\Java,包含: 环境变量配置: JAVA_HOME:C:\Pr ...
- 智课雅思词汇---十七、前綴il-, in-, ir-, im-有什麼關係
智课雅思词汇---十七.前綴il-, in-, ir-, im-有什麼關係 一.总结 一句话总结:这几个长得非常像,并且意思也非常像 1.前綴il-, in-, ir-, im-是什麼意思? 前缀:i ...
- 分享知识-快乐自己：Spring_IOC(控制反转)详解
IoC是什么: 1):Ioc—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想. 2):在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的 ...
- 不一样的控制面板 GodMode.{ED7BA470-8E54-465E-825C-99712043E01C}
这是一个快速打开所有控制面板选项的方法.被称作Gode Mode或者Master Control Panel. 步骤很简单: 复制:超级控制面板.{ED7BA470-8E54-465E-825C-99 ...
- Android中字体颜色的设置
1.在Android中经常看到设置的颜色为八位的十六进制的颜色值,例如: 1 2 3 public static final class color { public static final ...
- JS开发页面小组件：table组件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 二维码的扫描和生成--第三方开源--ZXing
ZXing的二维码功能的提取lib下载地址:https://github.com/xuyisheng/ZXingLib 1.扫描二维码: 我们扫描就是要用到这个CaptureActivity类,直接把 ...
- @angular/cli项目构建--modal
环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...