文档章节

webpack2基本介绍

originDu
 originDu
发布于 2017/05/02 19:06
字数 3098
阅读 21
收藏 1
点赞 0
评论 0

1. webpack2基本介绍

1.1. 介绍

  • webpack和gulp一样是一个自动化的构建工具
    • 你不想做的东西都交给工具去做,比如混淆,压缩,移动,合并,添加浏览器兼容性词缀
  • gulp更适合做简单的流程性的操作,webpack是专门为处理SPA应用的复杂文件依赖而出现的

    • 如图

    • js引用css,js引用图片,css引用图片,css引用字体,sass引用sass
    • webpack就可以把上面的东西css都抽出来,所有的图片都抽出来
  • webpack主要用于react和vue的构建,普通的静态页面用gulp就足够了

1.2. 官网

1.3. webpack1和webpack2的一些区别

  • webpack2已经不支持在配置文件中自定义属性
  • webpack2中在加载器中如果用了options属性那么必须配合loader属性使用,不能用use
  • webpack2中-loader一定要写全
  • webpack2中webpack-dev-server要单独下载2.x版本,默认是下载1.x版本
  • https://github.com/jawil/webpack2

1.4. 快速开始

1.4.1. 新建项目结构

1.4.2. 安装依赖

  • npm install webpack -g
  • npm install webpack -save-dev

1.4.3. 编写配置文件

var path=require('path')

module.exports = {
    // 指定spa应用的入口文件
    entry: path.resolve(__dirname, 'src/js/app.js'),
    // 指定项目构建的输出位置
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    }
}

1.4.4. 运行

  • 在项目根目录执行webpack可以启动默认配置文件webpack.config.js
  • 运行指定配置文件执行webpack --config webpack.develop.config.js

1.4.5. 把运行命令放到package.json文件中

  • 启动命令还可以加很多参数webpack --config webpack.develop.config.js --progress --profile --colors
  • 这么多参数不可能都记住,所以将启动命令写到package.json的script标签中

1.4.6. 监听代码变化自动重新构建

  • 代码的变动需要多次运行npm run develop所以我们需要自动监听代码变动,然后运行构建,于是我们用到了webpack-dev-server这个模块

1.4.6.1. webpack-deve-server介绍

  • webpack-dev-server封装了webpack和http模块
    • 所以webpack的所有命令,webpack-deve-server都可以使用
    • webpack-dev-server可以指定一个文件夹启动一个服务
      • webpack-dev-server启动的服务所有的内容都构建在内存中
      • 因为构建在内存中速度快,还有一个功能,就是没有变化的文件,不重新构建,只有变化了的文件才从新执行构建
  • 作用
    • 一是监听文件变化自动重新构建
    • 二是自动刷新浏览器,可以热更新

1.4.6.2. 基本使用

  • 下载npm install webpack-dev-server@9.9.9 -save-dev,注意选择2.x版本的模块
  • 修改package.json文件中的命令webpack-dev-server --config webpack.develop.config.js --progress --profile --colors
  • 修改开发配置文件

    • webpack2中推荐所有的服务配置信息都写到配置文件中的devServer属性中,不要写在package.json中
    • 基本配置

      devServer: {
         // 指定启动服务的更目录
         contentBase: __dirname + '/src',
         // 指定端口号
         port: 8080,
         host: 'localhost',
         // 以下信息可有可无,为了完整
         inline: true, 
         historyApiFallback: true,
         noInfo: false,
         // stats: 'minimal',
         // publicPath: publicPath
      },
      

1.4.6.3. 热更新

  • 可以不刷新浏览器更新
  • 修改配置文件
devServer: {
    // 指定启动服务的更目录
    contentBase: __dirname + '/src',
    // 指定端口号
    port: 8080,
    host: 'localhost',
    // 启用热更新
    hot: true,
    // 以下信息可有可无,为了完整
    inline: true, 
    historyApiFallback: true,
    noInfo: false,
    // stats: 'minimal',
    // publicPath: publicPath
},
  • 需要配合一个内置插件一起使用
var webpack=require('webpack')

plugins: [
   new webpack.HotModuleReplacementPlugin(),
]

2. Loaders(加载器)

  • 在真正构建之前做一些预处理操作就叫加载器

2.1. 处理es6、es7、jsx语法加载器

  • npm install babel-loader --save-dev
  • npm install babel-core babel-preset-es2015 babel-preset-react -save-dev
  • npm install babel-preset-stage-0 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3 --save-dev
  • npm install babel-plugin-transform-runtime -save-dev这个插件的作用是支持es7特性
  • 修改配置文件
module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader"
                    }
                ]
            }
        ]
    }
  • 创建.babelrc文件
{
  "presets": [
    "es2015",
    "react",
    "stage-0",
    "stage-1",
    "stage-2",
    "stage-3"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

2.2. 处理css文件引用的加载器

  • npm install style-loader css-loader -save-dev
  • 修改配置文件
 // 处理在js中引用css文件
{
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
},

2.3. 处理scss或者less文件引用的加载器

  • npm install sass-loader less-loader node-sass -save-dev
  • 修改配置文件
  // 处理在js中引用scss文件
{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader'],
},

2.4. 处理图片引用的加载器

  • npm install url-loader file-loader -save-dev
  • 修改配置文件
// 处理图片操作  25000bit ~3kb
{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: 'url-loader'
},

2.5. 处理字体文件引用的加载器

  • npm install url-loader file-loader -save-dev
  • 修改配置文件
// 处理字体文件
{
    test: /\.(eot|woff|ttf|woff2|svg)$/,
    use: 'url-loader'
}

2.6. 处理浏览器兼容前缀

  • npm install postcss-loader autoprefixer -save-dev
  • 修改配置文件
{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader!postcss-loader"
    })
},
// 处理在js中引用scss文件
{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader!postcss-loader!sass-loader"
    })
},
{
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader!postcss-loader!less-loader"
    })
},
  • 新建postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({browsers:'last 2 versions'})
  ]
}

2.7. 处理统一风格管理

  • npm install eslint-loader -save-dev
  • 修改配置文件
// 这个只是加载器部分的写法,具体使用请看eslint文档
{
    enforce: "pre",
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "eslint-loader",
    options:{
        configFile:'.eslintrc.js'
    }
},

2.8. 处理vue文件

  • npm install vue-loader -save-dev
  • 修改配置文件
{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
            js: [
                    'babel-loader',
                    {
                        loader: "eslint-loader",
                        options: {
                            configFile: '.eslintrc.js'
                        }
                    }
            ],
            css: 'style-loader!css-loader'
        }
    }
},

3. 发布策略

  • 简单的说就是将开发阶段的配置文件复制一份到部署的配置文件中,然后删删改改就可以了
  • 把热更新插件删除,devServer属性删除
  • 修改图片处理和字体处理加载器
 // 处理图片操作  25000bit ~3kb
{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: 'url-loader?limit=25000&name=images/[name].[ext]'
},
// 处理字体文件
{
    test: /\.(eot|woff|ttf|woff2|svg)$/,
    use: 'url-loader?limit=100000&name=fonts/[name].[ext]'
}
  • 接下来运行npm run publish就发布了
  • 不过要注意所有的css,js,图片都构建到一个bundle.js文件中了

4. Plugins(插件)

  • 在真正构建之后做一些后处理操作就叫插件

4.1. 删除插件

  • npm install clean-webpack-plugin -save-dev
  • 使用
var CleanPlugin = require('clean-webpack-plugin');

plugins: [
    // 删除文件夹的插件
    new CleanPlugin(['dist'])
]

4.2. 抽取公共js插件

  • 使用
 entry: {
        app: path.resolve(__dirname, 'src/js/app.js'),
        vendors: ['vue','vue-router','vuex']
    },


plugins: [
    // 分离第三方应用的插件
    new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}),
]

4.3. 提取样式文件插件

  • npm install extract-text-webpack-plugin@4.4.4 -save-dev注意下载2.x版本
  • 使用
// 1、抽取css的第三方插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");

// 2、处理在js中引用css文件
{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader"
    })
},
// 处理在js中引用scss文件
{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader!sass-loader"
    })
},

//3、加一个插件
plugins: [
    // 删除文件夹的插件
    new ExtractTextPlugin("app.css"),
]

4.4. 自动生成html插件

  • npm install html-webpack-plugin -save-dev
  • 在根目录创建template.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>webpack学习</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
  • 修改配置文件
var HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
    // 自动生成html插件
   new HtmlWebpackPlugin({
       template: './src/template.html',
       htmlWebpackPlugin: {
           "files": {
               "css":["app.css"],
               "js": ["vendors.js", "bundle.js"]
           }
       },
       minify: {
           removeComments: true,
           collapseWhitespace: true,
           removeAttributeQuotes: true
       }
   }),
]

4.5. 压缩插件

  • 修改配置文件
plugins: [
   // 压缩混淆js代码插件
   new webpack.optimize.UglifyJsPlugin({
       beautify: false,
       mangle: {
           screw_ie8: true,
           keep_fnames: true
       },
       compress: {
           warnings: false,
           screw_ie8: true
       },
       comments: false
   }),
]

4.6. 定义生产环境插件

  • 修改配置文件
plugins: [
  // 在构建的过程中删除警告
   new webpack.DefinePlugin({
       'process.env':{
           NODE_ENV:'"production"'
       }
   })
]

4.7. 自动打开浏览器插件

  • npm install open-browser-webpack-plugin -save-dev
  • 使用
// 自动打开浏览器插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin')

plugins: [
    // 删除文件夹的插件
   new OpenBrowserPlugin({url: 'http://localhost:8080/', browser: 'chrome'})
]

5. 高级

5.1. 和gulp的集成

  • npm install gulp del gulp-sequence -save-dev
  • 编写配置文件
// gulp的任务是控制执行流程,webpack的任务是处理复杂引用的依赖

var gulp = require('gulp');
// 删除文件和目录
var del = require('del');
// 按顺序执行
var gulpSequence = require('gulp-sequence');
// 引入webpack的本地模块
var webpack = require("webpack");
// 引入wbpack的配置文件
var webpackConfig = require("./webpack.publish.config.js");

gulp.task('default', ['sequence'], function () {
    console.log("项目构建成功");
});

// 流程控制
gulp.task('sequence', gulpSequence('clean','webpack'));

// 删除文件和文件夹
gulp.task('clean', function (cb) {
    //del('dist);// 如果直接给dist的目录,项目启动的顺序还有清除结果会报错,所以要写的更详细一些
    del(['dist/*.js', 'dist/*.css', 'dist/images', 'dist/fonts,','dist/*.html']).then(function () {
        cb()
    });
});


//写一个任务,在gulp中执行webpack的构建
// gulp 负责任务流程部分的操作,webpack负责复杂模块系统的引用分离工作
gulp.task('webpack', function (cb) {
    // 执行webpack的构建任务
    webpack(webpackConfig, function (err, stats) {

        if (err) {
            console.log("构建任务失败");
        } else {
            cb();
        }

    });
});

5.2. 和eslint的集成

5.3. 代码的异步加载

  • 修改配置文件
output: {
    publicPath:'/',
    chunkFilename: '[name]_[chunkhash:8]_chunk.js'
},
  • 代码中的写法

    • react
    <Route path="movieDetail/:id"
           getComponent={
               (nextState, callback)=> {
                   require.ensure([], (require)=> {
                       callback(null, require("../containers/MovieDetailContainer.js").default)
                   }, "movieDetail")
               }
           }
    />
    
    • vue
    const MovieContainer= r => require.ensure([], () => r(require('../containers/MovieContainer.vue')),'movie')
    

5.4. 组件库按需加载处理

5.4.1. react中的antd按需加载配置

npm install babel-plugin-import -save-dev
// 修改babel配置文件
{
  "presets": ["es2015", "react","stage-0","stage-1","stage-2","stage-3"],
  "plugins": [
    ["import", { "libraryName": "antd","style": "css" }]
  ]
}

5.4.2. vue中的element按需加载配置

npm install babel-plugin-component-save-dev
// 修改babel配置文件
{
  "presets": [
    "es2015",
    "react",
    "stage-0",
    "stage-1",
    "stage-2",
    "stage-3"
  ],
  "plugins": [
    "transform-runtime",
    [
      "component",
      [
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-default"
        }
      ]
    ]
  ]
}

6. 其他

6.1. 启用source-map

  • 现在的代码是合并以后的代码,不利于排错和定位,只需要在config中添加
devtool: 'source-map',

output: {
    sourceMapFilename: '[name].map'
},
  • 这样出错以后就会采用source-map的形式直接显示你出错代码的位置。

6.2. 加载jQuery plugin或者其他legacy第三方库

  • 你的项目有时候会要加载各种各样的第三方库,比如一些jQuery的插件,它们都依赖jQuery,但如果直接引用就会报错jQuery is not undefined这类的错误,因为一些老的库不支持AMD或者CommonJS等一些先进的格式,所以有几种方法解决
// plugin.js
(function ($) {
    const shade = "#556b2f";
    $.fn.greenify = function() {
        this.css( "color", shade );
        return this;
    };
}(jQuery));

6.2.1. 方法一:webpack.ProvidePlugin

  • 作用:把一个全局变量插入到所有的代码中
  • 修改配置文件
 plugins: [
    //provide $, jQuery and window.jQuery to every script
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
//这个也不需要了 因为$, jQuery, window.jQuery已经被注入到每一个js中,都可以直接使用了
//import $ from 'jquery';
import './plugin.js';
...
myPromise.then((number) => {
  $('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
  //call our jquery plugin!
  $('p').greenify();
});

6.2.2. 方法二:import-loader

  • npm install imports-loader --save-dev
  • 修改配置文件
//注意这种写法 我们把jQuery这个变量直接插入到plugin.js里面了
//相当于在这个文件的开始添加了 var jQuery = require('jquery');
import 'imports?jQuery=jquery!./plugin.js';

//后面的代码一样
myPromise.then((number) => {
  $('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
  //call our jquery plugin!
  $('p').greenify();
});

6.3. exports-loader

  • 从模块中导出变量的功能
// 直接绑定在全局变量window上面
// Hello.js
window.Hello = function(){
    console.log('say hello.');
}


//然后我们在index.js文件里去引用这个Hello.js:var hello = require('./Hello.js');。这样引用的结果是变量hello是
//undefined。因为我们在Hello.js文件里没有写module.exports=window.Hello,所以index.js里我们require的结果就是
//undefined。这个时候,exports-loader就派上用场了。我们只用把index.js的代码稍微改动一下:var hello = require
//('exports?window.Hello!./Hello.js');,这个时候,代码就能正确的运行了。变量hello就是我们定义的window.hello啦。
//var hello = require('exports?window.Hello!./Hello.js');这行代码,等于在Hello.js里加上一句module
//.exports=window.Hello,所以我们才能正确的导入。

6.4. expose-loader

  • 把一个模块导出并付给一个全局变量
require("expose?libraryName!./file.js");
// Exposes the exports for file.js to the global context on property "libraryName".
// In web browsers, window.libraryName is then available


//例子中的注释是说把file.js中exports出来的变量付给全局变量"libraryName"。假如file.js中有代码module.exports=1,那么
//require("expose?libraryName!./file.js")后window.libraryName的值就为1(我们这里只讨论浏览器环境)

6.5. resolve属性

resolve: {
    //注意一下, extensions webpack2第一个不是空字符串! 对应不需要后缀的情况.
    extensions: ['.js', '.json', '.sass', '.scss', '.less', 'jsx', '.vue'],
    //模块别名定义,方便后续直接引用别名,无须多写长长的地址
    alias: {
        'assets': path.resolve(__dirname, './src/assets'),
        'components': path.resolve(__dirname, './src/components')
    }
},

6.6. external属性

// 配置了这个属性之后 vue 和 vue-router这些第三方的包都不会被构建进 js 中,那么我们就需要通过 cdn 进行文件的引用了
//externals对象的key是给require时用的,比如require('vue'),,对象的value表示的是如何在global(即window)中访问到该对象,这里是window.Vue
externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter'
},

 

免责说明

1、本博客中的文章摘自网上的众多博客,仅作为自己知识的补充和整理,并分享给其他需要的coder,不会用于商用

2、因为很多博客的地址已经记不清楚了,所以不会在这里标明出处

© 著作权归作者所有

共有 人打赏支持
originDu
粉丝 1
博文 49
码字总数 16782
作品 0
海淀
webpack3新特性简介

升级到webpack3 升级到webpack3,只需要通过npm安装即可:    webpack3几乎与webpack2完美兼容,除了会影响一些插件的使用,官方给出的数据是:98%的用户升级后,没有影响webpack功能的正常...

shptc ⋅ 2017/06/23 ⋅ 0

SanicCRUD-vue 0.1发布, Python 全栈开发实践

本项目将使用Sanic + Vue2 + Webpack2 配合最简单CRUD的逻辑,从工程组织、编码、测试、前、后端构建、接口交互等来诠释一个基于Python的全新一代高性能全栈开发实践的Demo, 具备的功能(v0...

boylegu ⋅ 2017/06/19 ⋅ 2

【工程化】从0搭建VueJS移动端组件库开发框架

之前发表过一篇《Vue-Donut——专用于构建Vue的UI组件库的开发框架》,仅仅是对框架一个粗略的介绍,并没有针对里面的实现方式进行详细说明。 最近参与维护公司内部的一个针对移动端的UI组件...

jrainlau ⋅ 2017/06/05 ⋅ 0

使用 React + Koa2 + Markdown 从零搭建博客(一)

原文地址: http://hiihl.com/articles/2018/1/1/setupblog1.md 使用react + koa2 + Markdown + webpack + typescript 从零手撸个人博客,本篇首先介绍如何使用tdtool(自己基于webpack2的一个...

hihl ⋅ 01/09 ⋅ 0

库&插件&框架&工具

nodejs 入门 nodejs 入门教程,大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部署,可能大多数前端工程师...

掘金官方 ⋅ 01/08 ⋅ 0

一步步构造自己的vue2.0+webpack环境

前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境。 1.首先新建一个目录vue-wkdemo,这是我们的项目目录。...

邹君安 ⋅ 2017/05/09 ⋅ 0

升级到Webpack2坑——热加载不自动刷新

问题: 升级 Webpack1 到 Webpack2 之后, 开发模式下热加载不起作用。控制台显示“App hot update...”。但页面不自动刷新。 一直hot update...但不自动刷新 解决办法: 去掉WebpackDevSer...

Evelynzzz ⋅ 01/09 ⋅ 0

webpack2入门+小案例

介绍 webpack 是一个 JavaScript 应用程序模块打包器(module bundler)。webpack 通过快速建立应用程序依赖图表并以正确的顺序打包它们来简化你的工作流。你能够针对你的代码来对 webpack 进行...

bug_killer ⋅ 2017/12/25 ⋅ 0

vue-cli之webpack3构建全面提速优化

前言 伴随着vue的全球化,已经各种vue的组件框架越来越完善,从早期的element-ui到vux,iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情 在这其中...

宇帅 ⋅ 2017/12/23 ⋅ 0

基于 vue+element 的后台集成方案--vue-element-admin

vue-element-admin 本项目的定位是后台集成方案,不适合当基础模板来开发,模板建议使用 vueAdmin-template , 桌面端 electron-vue-admin 注意:该项目目前使用 element-ui@1.4.1 版本,所以...

匿名 ⋅ 2017/08/23 ⋅ 12

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Boot整合模板引擎thymeleaf

项目结构 引入依赖pom.xml <!-- 引入 thymeleaf 模板依赖 --><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId......

yysue ⋅ 18分钟前 ⋅ 0

ConstraintLayout使用解析

AndroidStudio3.0创建Project默认的布局就是ConstraintLayout。 AndroidStudio3.0前的可以自己修改,使用ConstraintLayout。 为了要使用ConstraintLayout,我们需要在app/build.gradle文件中...

_OUTMAN_ ⋅ 29分钟前 ⋅ 0

OSChina 周三乱弹 —— 这样的女人私生活太混乱了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 胖达panda :你经历过体验到人生的大起大落吗?我一朋友在10秒内体验了,哈哈。@小小编辑 请点一首《almost lover》送给他。 《almost love...

小小编辑 ⋅ 今天 ⋅ 9

自己动手写一个单链表

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、概述 单向链表(单链表)是链表的一种,其特点是链表的链接方向是单向的,对...

公众号_好好学java ⋅ 今天 ⋅ 0

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部