本文介绍webpack3.x的使用

说明,本文前后连贯性很强,建议从头往后看

目录

开始

css文件打包

image文件打包

字体文件打包

json文件打包

csv文件和xml文件打包

多入口文件打包

清理dist目录

development开发环境错误定位

development开发环境开发模式

development开发环境模块热替换

development开发环境模块热替换存在的问题

Tree Shaking(死代码终结者)

development和production代码分离与合并

系统环境变量设置

css文件剥离

代码分割

按需加载

浏览器资源缓存

全局导入

no export导出

静态服务器搭建


  1. 开始

    安装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
  2. css文件打包

    项目根目录下面一个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图片都做了处理,将其替换成打包后的绝对路径
  3. image文件打包

    在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'
    ]
    }
    运行打包即可
  4. 字体文件打包

    在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即可
  5. json文件打包

    webpack默认支持json文件导入,所以无需任何额外操作
    在src/index.js中
    import data from './index.json';
    console.log(data);
    index.json中这样定义
    {
    "a": 1,
    "b": 2
    }
  6. csv文件和xml文件打包

    安装插件 npm install --save-dev csv-loader xml-loader
    添加如下的rules
    {
    test: /\.(csv|tsv)$/,
    use: [
    'csv-loader'
    ]
    },
    {
    test: /\.xml$/,
    use: [
    'xml-loader'
    ]
    }
    使用方式和json文件类似
  7. 多入口文件打包

    如果你想把你的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")
    }
    }
    运行编译即可
  8. 清理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")
    }
    }
    运行编译即可
  9. development开发环境错误定位

    定位错误信息
    所有的文件打包到bundle中,如果代码是错误的,要想定位到错误的源文件,必须使用source-map
    修改 webpack.config.js
    添加 devtool: 'inline-source-map',
    运行打包,如果在浏览器中运行错误,会定位错误源
  10. development开发环境开发模式

    每次查看代码都要运行 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 查看
  11. development开发环境模块热替换

    热替换,简单理解,就是什么文件修改了,更新什么文件
    开启模块热替换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即可自动完成
  12. development开发环境模块热替换存在的问题

    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);
    })
    }
  13. Tree Shaking(死代码终结者)

    当你的代码中只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 可以实现同样效果
  14. development和production代码分离与合并

    将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"
    }
  15. 系统环境变量设置

    利用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'
    }
    });
    }
  16. css文件剥离

    将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中不剥离从而提高性能
  17. 代码分割

    代码分割有如下几种方式
    多入口,开篇讲过写法
    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文件
    代码分离到此结束
  18. 按需加载

    按需加载还是需要借助import()函数
    button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
    var print = module.default; // 表示print.js中的export.default的对象
    print();
    });
  19. 浏览器资源缓存

    利用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"
    })
    ],
  20. 全局导入

    当你需要导入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只会打包此单个方法
    })
  21. no export导出

    当你的代码中不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'
    }
  22. 静态服务器搭建

    当我们的代码编译完成之后,如何搭建一个静态服务器来查看我们编译的代码呢?
    安装 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看这个就够了的更多相关文章

  1. 【原】HTTP in iOS你看我就够

    声明:本文是本人 编程小翁 原创,转载请注明. 本文同步发布在简书中,强烈建议移步简书查看,编程小翁 HTTP属于老话题了,在项目中我们经常需要往服务端发POST或者GET请求,但是对于HTTP的了解 ...

  2. HTTP in iOS你看我就够

    HTTP属于老话题了,在项目中我们经常需要往服务端发POST或者GET请求,但是对于HTTP的了解不应只局限于此.千里之行,始于足下.越想走的远,基本原理就应该了解的透彻全面一些,仅仅停留在使用ASI ...

  3. 关于iOS多线程,你看我就够了

    在这篇文章中,我将为你整理一下 iOS 开发中几种多线程方案,以及其使用方法和注意事项.当然也会给出几种多线程的案例,在实际使用中感受它们的区别.还有一点需要说明的是,这篇文章将会使 用 Swift  ...

  4. Prometheus Metrics 设计的最佳实践和应用实例,看这篇够了!

    Prometheus 是一个开源的监控解决方案,部署简单易使用,难点在于如何设计符合特定需求的 Metrics 去全面高效地反映系统实时状态,以助力故障问题的发现与定位.本文即基于最佳实践的 Metr ...

  5. 修改版: 小伙,多线程(GCD)看我就够了,骗你没好处!

    多线程(英语:multithreading),是指从软件或者硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程,进而提升整体处理性能.具有这种能力的系 ...

  6. html总结----------------------看这个就够了

    HTML是我们学习Javaweb的第一步 很好地掌握门课是非常有必要的!下面就是我在听资深老师讲课的笔记!个人觉得非常不错!希望可以帮助到那些在学习javaweb路上的 朋友们!从今天 陆续的整理这门 ...

  7. 做一款仿映客的直播App?看我就够了

    来源:JIAAIR 链接:http://www.jianshu.com/p/5b1341e97757 一.直播现状简介   1.技术实现层面: 技术相对都比较成熟,设备也都支持硬编码.IOS还提供现成 ...

  8. Vue2全家桶之二:vue-router(路由)详细教程,看这个就够了

     作者:东西里本文转载于:https://www.jianshu.com/p/514c7588e877来源:简书 转载仅供自己日后看方便.  由于Vue在开发时对路由支持的不足,于是官方补充了vue- ...

  9. 移动Web UI库(H5框架)有哪些,看这里就够了

    前言 今年上半年,项目组在项目开发的过程中建立了一套风格统一,组件丰富完善,命名统一规范的PC端UI库,适用于做大型站点,该UI库也是应用到了整个平台的项目中,在各个项目组中进行推广.因为项目的保密性 ...

随机推荐

  1. 【bzoj1925】地精部落[SDOI2010](dp)

    题目传送门:1925: [Sdoi2010]地精部落 这道题,,,首先可以一眼看出他是要我们求由1~n的排列组成,并且抖来抖去的序列的方案数.然后再看一眼数据范围,,,似乎是O(n^2)的dp?然后各 ...

  2. mongod无法启动

    今天遇到了一个奇葩问题,我在Linux系统里备份了数据库,结果不知道为什么,系统用不了了,后来经过同事的检查,发现原来是我的硬盘快满了,导致mongod数据无法启动,真是.......

  3. 使用Navicat进行数据库自动备份

    今天经历一次数据库丢库事件,顿时觉得定时备份数据库很重要. 但是每天自己手动备份实在是太麻烦了,于是乎,想到用计划任务进行每天定时自动备份. 发现Navicat自带就有备份  还可以直接计划任务,贼方 ...

  4. MATLAB中feval与eval的区别

    feval函数有两种调用形式1.[y1, y2, ...] = feval(fhandle, x1, ..., xn)2.[y1, y2, ...] = feval(fname, x1, ..., x ...

  5. eclipse下进行c开发,使用zeromq

    使用eclipse开发代码,一段zeromq的代码. #include <string.h> #include <stdio.h> #include <unistd.h& ...

  6. jsp: jstl标签库

    jstl标签库,通过maven配置: <!-- jstl标签的支持 --> <dependency> <groupId>javax.servlet</grou ...

  7. python中常用的文件和目录操作(二)

    一. os模块概述 python os模块提供了非常丰富的方法用来处理文件和目录 二. 导入os模块: import os 三. 常用方法 1. os.name 输出字符串表示正在使用的平台,如果是w ...

  8. MKMapView缩放显示全部annotation(转)

    原文  http://blog.csdn.net/favormm/article/details/8028026#define MINIMUM_ZOOM_ARC 0.014 //approximate ...

  9. O(logn)的意思

    T=K*log2(N) 注:2是小2时间T与以2为底的对数成正比.实际上,由于所有的对数都和其他对数成比例(从底数为2转换到底数为10需乘以3.322),我们可以将这个为常数的底数也并入K.由此不必指 ...

  10. 通过ifreme实现文件上传

    模板页面添加ifreme <div style=' display: none;' >      <iframe name ="uploadResponse_attachm ...