前端构建工具GruntGulpwebpack笔记

Grunt项目构建

概述

项目构建就是并编译, 合并, 压缩项目中的JS, SASS, LESS文件; 压缩HTML资源文件; JS语法检查

Grunt就是用来进行自动化项目构建的, Grunt由一组插件组成, 围绕Grunt工作实现自动化, 常见的功能有

  • 合并JS/CSS
  • 压缩JS/CSS
  • JS语法检查
  • LESS/SESS的预编译

目录结构

├── build           // 生成构建文件所在文件夹
├── Gruntfile.js    // grunt配置文件, 首字母大写, 与.bablerc配置差不多
├── index.html
├── package.json
└── src             // 源码文件
    ├── css
    └── js

安装Grunt

sudo npm install grunt-cli -g
npm install grunt --include=dev

Geuntrc.js配置

使用js语法配置, 支持CommonJS规范, 配置方法

module.exports = function(grunt){
    // 初始化配置grunt任务
    grunt.initConfig({

    });
    // grunt执行的时候需要的任务插件(随便写了一个插件)
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 注册Grunt的默认任务, 与执行任务的时候的依赖任务
    grunt.registerTask('default',['uglify']);
}

常用任务插件(先了解下)

  • grunt-contrib-concat——合并多个文件的代码到一个文件中
  • grunt-contrib-clean——清除文件(打包处理生成的)
  • grunt-contrib-uglify——压缩js文件
  • grunt-contrib-jshint——javascript语法错误检查;
  • grunt-contrib-cssmin——压缩/合并css文件
  • grunt-contrib-htmlmin——压缩html文件
  • grunt-contrib-imagemin——压缩图片文件(无损)
  • grunt-contrib-copy——复制文件、文件夹
  • grunt-contrib-requirejs——合并压缩requirejs管理的所有js模块文件
  • grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行

合并JS-concat插件

最好去官网找说明

npm install grunt-contrib-concat --include=dev

引入包

grunt.loadNpmTasks('grunt-contrib-concat');

在using example中找到配置示例

module.exports = function (grunt) {
    // 初始化配置grunt任务
    grunt.initConfig({
        concat: {
            options: {
                separator: ';', // 链接符号
            },
            dist: {
                src: ['src/js/*.js'], // 合并哪些文件
                dest: 'dist/built.js', // 输出目录
            },
        },
    });
    // grunt执行的时候需要的任务插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 注册Grunt的默认任务, 与执行任务的时候的依赖任务
    grunt.registerTask('default', ['concat']);
}

执行命令(当然, 我们注册了默认任务, 可以不写concat)

grunt concat

压缩JS-uglify

module.exports = function (grunt) {
    // 初始化配置grunt任务
    grunt.initConfig({
        concat: {
            options: {
                separator: ';', // 链接符号
            },
            dist: {
                src: ['src/js/*.js'], // 合并哪些文件
                dest: 'dist/built.js', // 输出目录
            },
        },

        uglify: {
            my_target: {
                files: {
                    'dist/output.min.js': ['src/js/test1.js']
                }
            }
        }
    });
    // grunt执行的时候需要的任务插件
    grunt.loadNpmTasks('grunt-contrib-concat'); +
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 注册Grunt的默认任务, 与执行任务的时候的依赖任务
    grunt.registerTask('default', ['concat', 'uglify']);        // 注意, 任务应该有序给出, Grunt执行任务是同步的
}
npm install grunt-contrib-uglify 
grunt uglify 

语法检查-jshint

npm install grunt-contrib-jshint -dev

加载插件

grunt.loadNpmTasks('grunt-contrib-jshint');

注册到任务

grunt.registerTask('default', ['concat', 'uglify', 'jshint']);

在与Gruntfile.js同目录创建配置文件.jshintrc, 举例

{
  "curly": true,
  "eqeqeq": true,
  "eqnull": true,
  "expr" : true,
  "immed": true,
  "newcap": true,
  "noempty": true,
  "noarg": true,
  "regexp": true,
  "browser": true,
  "devel": true,
  "node": true,
  "boss": false,
  
  //不能使用未定义的变量
  "undef": true,
  //语句后面必须有分号
  "asi": false,
  //预定义不检查的全局变量
  "predef": [ "define", "BMap", "angular", "BMAP_STATUS_SUCCESS"]
}

增加配置内容

jshint : {
  options: {
    jshintrc : '.jshintrc' //指定配置文件
  },
  build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
}

合并压缩CSS-cssmin

npm install grunt-contrib-cssmin -dev

配置Gruntfile.js

cssmin:{
  options: {                        // 保证结果准确
    shorthandCompacting: false,     // 快速压缩
    roundingPrecision: -1           // 精度-1
  },
  build: {
    files: {
        'build/css/output.min.css': ['src/css/*.css']
    }
  }
}

添加与注册插件: 略

自动化构建插件-watch

npm install grunt-contrib-watch -dev

配置任务:

watch : {
    scripts : {
        files : ['src/js/*.js', 'src/css/*.css'],           // 需要的文件
        tasks : ['concat', 'jshint', 'uglify', 'cssmin'],   // 执行队列
        options : {spawn : false}                           // 是否全量更新(例如css修改, 是否重新编译js)
    }
}

加载任务

grunt.loadNpmTasks('grunt-contrib-watch');

注册任务:

grunt.registerTask('default', ['concat', 'uglify', 'watch']);

命令:

grunt   //控制台提示watch已经开始监听, 修改保存后自动编译处理

或者

注册任务:

grunt.registerTask('default', ['concat', 'uglify']);
grunt.registerTask('myWatch', ['default','watch']);

命令:

grunt myWatch

关于ES6

Grunt插件不支持ES6, 所以处理ES6代码时候应该先使用babel转换, 然后再Grunt

Gulp项目构建

概述

Gulp是与Grunt功能类似的更加高效的前端项目构建工具, 可以基于Node自动的完成代码的检查, 压缩, 合并, 监听, 测试等. 具有如下特点

  • 任务化: 所有的事件都有一个统一的接口, 不论做什么都要先去注册一个任务
  • 基于流: 基于数据流, Gulp有自己的内存, 在调用Gulp的时候, 程序会将目标文件读入Gulp内存中, 然后通过IO输出数据
  • 执行任务可以同步,也可以异步
  • 与Grunt一样不支持ES6,如需使用请提前Babel

重要API

  • gulp.src(path): 根据路径读取源文件
  • gulp.dest(path): 根据路径输出文件
  • gulp.task(name[,deps],fn): 调取命令
  • gulp.wartch(glob[,opts],tasks)gulp.wartch(glob[,opts,cb]): 文件发生变动时修改

文件结构

├── dist
├── gulpfile.js
├── index.html
├── package.json
└── src
    ├── css
    ├── js
    └── less

全局与局部安装

npm install gulp -g
npm install gulp --include=dev

gulpfile.js的配置

  • 任务的创建

    • 注册任务与默认任务
      任务有公开任务与是有任务, 公开任务中的default可以直接使用glup调用

      • 公开任务(Public tasks) 从 gulpfile 中被导出(export),可以通过 gulp 命令直接调用。
      • 私有任务(Private tasks) 被设计为在内部使用,通常作为 series() 或 parallel() 组合的组成部分。
        可以使用tasks创建任务, 私有任务无法直接被调用, 如果希望直接调用需要exports导出
    • 组合任务
      Gulp支持与Grunt类似的任务组合, 组合任务有series(task1, task2...)parallel(task1, task2...), 两者可以相互嵌套, 区别是series是同步的, parallel是异步的, 两者无限嵌套就实现了依赖处理, 例如:

      const { series } = require('gulp');
      
      // `clean` 函数并未被导出(export),因此被认为是私有任务(private task)。
      // 它仍然可以被用在 `series()` 组合中。
      function clean(cb) {
      // body omitted
      cb();
      }
      
      // `build` 函数被导出(export)了,因此它是一个公开任务(public task),并且可以被 `gulp` 命令直接调用。
      // 它也仍然可以被用在 `series()` 组合中。
      function build(cb) {
      // body omitted
      cb();
      }
      
      exports.build = build;
      exports.default = series(clean, build);     // 组合任务输出
      
  • 常见插件

    • gulp-concat : 合并文件(js/css)
    • gulp-uglify : 压缩js文件
    • gulp-rename : 文件重命名
    • gulp-less : 编译less
    • gulp-clean-css : 压缩css
    • gulp-livereload : 实时自动编译刷新

合并压缩JS文件-concat/uglify/rename

安装(注意这里需要对文件进行管道等操作所以要多下载包)

npm install gulp-concat gulp-uglify gulp-rename -dev

配置文件

var gulp = require('gulp');             // 引入
var concat = require('gulp-concat');
var uglify = require('gulp-uglify'); 
var rename = require('gulp-rename'); 

function ChuLiJS() {                  // ! 虽然没有return也可以执行, 但是"玄学上"有return的话执行结束才会释放GULP空间
  return gulp.src('./src/js/*.js')      // 源文件 =管道=>
    .pipe(concat('all.js'))             // 合并成 =管道=>
    .pipe(gulp.dest('./dist/'))         // 输出到 =管道=>
    .pipe(uglify())                     // 压缩文件 =管道=>
    .pipe(rename({suffix: '.min'}))     // 重命名(仅修改后缀, 不动扩展名) =管道=>
    .pipe(gulp.dest('./dist/'))         // 输出到
}

exports.ChuLiJS = ChuLiJS;

转译Less合并压缩CSS文件-less与clean-css

安装

npm install gulp-less gulp-clean-css -dev

配置文件

var gulp = require('gulp');             // 引入
var concat = require('gulp-concat');
var less = require('gulp-less');
var cleanCss = require('gulp-clean-css');


function ChuLiLess() {
  return gulp.src('./src/less/*.less')    // 源文件 =管道=>
    .pipe(less())                         // 编译成 =管道=>
    .pipe(gulp.dest('./src/css/'))        // 输出到
}

function ChuLiCss() {
  return gulp.src('./src/css/*.css')         // 源文件 =管道=>
    .pipe(concat('build.css'))               // 合并成 =管道=>
    .pipe(cleanCss({compatibility: 'ie8'}))  // 压缩并兼容IE8 =管道=>
    .pipe(gulp.dest('./dist/css/'))          // 输出到

}

exports.ChuLiStyle = gulp.series(ChuLiLess,ChuLiCss);   // 必须同步撒

压缩HTML文件-thmlmin

安装文件

npm install gulp-htmlmin -dev

配置举例

var gulp = require('gulp');             // 引入
var htmlMin = require('gulp-htmlmin')

function ChuLiHtml(){
  return gulp.src('./index.html')
      .pipe(htmlMin({collapseWhitespace:true}))   // 删除空格
      .pipe(gulp.dest('./dist/'));                // 注意, 此时的引用文件相对路径错了, 所以注意写代码的时候路径地址
}

exports.ChuLiHtml = ChuLiHtml;

半自动化构建-livereload

安装文件

npm install gulp-livereload -dev

配置举例(监控HTML)

const { series } = require('gulp');
var gulp = require('gulp');
var htmlMin = require('gulp-htmlmin');
var liveReload = require('gulp-livereload');


function ChuLiHtml(){
  return gulp.src('./index.html')
      .pipe(htmlMin({collapseWhitespace:true}))   // 删除空格
      .pipe(gulp.dest('./dist/'))
      .pipe(liveReload())         // [选]也可以添加这么一行手动调用实时刷新
}

function ChuLiLive(){
  // 开启监听
  liveReload.listen();
  gulp.watch(['./index.html'], series('ChuLiHtml'));
  // gulp.watch(['./src/less/*.less', './src/css/*.css'], series('ChuLiLess', 'ChuLiCss'))    // 支持注册多个模块
}

exports.ChuLiHtml = ChuLiHtml;    // 需要开放
exports.default = ChuLiLive;  

全自动化构建(实时刷新页面)-connect与open

安装

npm install gulp-connect open -dev

配置举例(监控HTML)

const { series } = require('gulp');
var gulp = require('gulp');
var htmlMin = require('gulp-htmlmin');
var connect = require('gulp-connect');
var open = require('open');

function ChuLiHtml(){
  return gulp.src('./index.html')
      .pipe(htmlMin({collapseWhitespace:true}))   // 删除空格
      .pipe(gulp.dest('./dist/'))
      .pipe(connect.reload())         // ! 添加这么一行手动调用实时刷新
}

function server(){
  // connect 提供了一个微型服务器让浏览器访问, 并刷新
  // 根目录, 实时刷新?, 端口
  connect.server({
    root: './dist',
    livereload: true,
    port: 5000
  });

  open("http://localhost:5000/");       // 打开页面

  gulp.watch(['./index.html'], series('ChuLiHtml'));
  // gulp.watch(['./src/less/*.less', './src/css/*.css'], series('ChuLiLess', 'ChuLiCss'))    // 支持注册多个模块
}

exports.ChuLiHtml = ChuLiHtml;    // 需要开放
exports.default = server;  

自动引入gulp插件-load-plugins

原来的gulpfile.js文件

const { series } = require('gulp');
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');

function ChuLiHtml(){
  return gulp.src('./index.html')
      .pipe(htmlmin({collapseWhitespace:true}))   // 删除空格
      .pipe(gulp.dest('./dist/'))
}

exports.ChuLiHtml = ChuLiHtml;    // 需要开放
exports.default = server;  

为了减少多次require, 可以使用插件gulp-load-plugins

安装

npm install gulp-load-plugins -dev

使用

var gulp = require('gulp');
+ var $ = require('gulp-load-plugins')();       // 引入的插件是个方法,必须记住调用。
- var htmlmin = require('gulp-htmlmin');

在使用的时候需要将方法改为$.方法

function ChuLiHtml(){
  return gulp.src('./index.html')
-      .pipe(htmlmin({collapseWhitespace:true}))   // 删除空格
+      .pipe($.htmlmin({collapseWhitespace:true}))   // 删除空格
      .pipe(gulp.dest('./dist/'))
}

对于插件名后缀有-的采用驼峰命名, 例如gulp-load-clean-css改为cleanCss

webpack

简介

webpack是一种前端资源构建工具, 也是一个静态模块打包器

  • 构建工具: 我们在写网页的时候需要合并压缩JS, 编译less, 在之前我们一般是单独维护每一个小工具最后实现所有功能, 现在可以使用构建工具整合所有的操作
  • 静态模块打包器: 文件在编写的时候可能会应用其他的模块, 文件类型(JS引用CSS), 静态模块打包器可以记录每个模块的依赖, 引入需要的依赖(chunk), 生成文件依赖树, 为我们进行打包

webpack的核心概念

  • Entry入口, 指示webpack从那个文件作为入口开始打包文件, 分析内部依赖图
  • Output输出, webpack输出的文件如何命名
  • Loader让webpack识别css/img格式的文件(本体只能处理JS)
  • Pulgins插件, 可以执行更复杂的任务, 例如打包压缩css/img
  • Mode有两种对应模式
    • develop开发模式: 配置简单, 保证可以在本地调试运行
    • production生产模式: 启用更多插件, 优化代码运行

基本使用

安装

sudo npm install webpack-cli -g
npm install webpack-cli webpack -dev
echo 'export PATH="./node_modules/.bin:$PATH"' >> ~/.zshrc    # zsh安装

运行

webpack ./src/js -o ./build/ --mode=development     # 开发模式 生成文件不压缩, 显示来自哪个文件
webpack ./src/js -o ./build/ --mode=production      # 生产模式 压缩内容与代码

注意

  • webpack本体可以处理js/json, 不能处理css/img等
  • 可以将ES6自动转换为ES5
  • 生产环境没有注释, 自动压缩代码

开发环境配置

webpack配置文件

webpack的配置文件是webpack.config.js, 应该与node_modules, src同文件夹, 由于使用了NodeJS, 所以采用CommonJS语法规范, 配置文件的格式是

const {resolve} = require('path');      // 使用path调用目录绝对路径

module.exports={
    entry: './src/js/index.js',         // 入口文件地址
    output: {
        filename: "built.js", // string (default)
        path: resolve(__dirname, 'build')   // 保存文件路径, 转换为绝对路径
    },module:{
        rules: []
    },plugins:[],
    mode: 'development'
    // mode: 'production'
} 

打包css/less

这里使用了额外的Loader:

  • css-loader: 将css转化为CommonJS模块, 内容是样式字符串
  • style-loader: 将JS中的css样式资源创建style插入进去, style指的是<head></head>中的<style></style>, 不是<div style=""></div>

安装npm包

npm install style-loader css-loader -dev

配置文件

const {resolve} = require('path');      // 使用path调用目录绝对路径

module.exports={
    entry: './src/js/index.js',         // 入口文件地址
    output: {
        filename: "built.js", // string (default)
        path: resolve(__dirname, 'build')   // 保存文件路径, 转换为绝对路径
    },module:{
        rules: [{
            // 匹配什么文件(以css结尾)
            test: /\.css$/,
            // css-loader可以将css转化为CommonJS模块, 内容是样式字符串
            // style-loader可以JS中的css样式资源创建style插入进去
            // 注意, 这里是<style></style>不是<div style></div>
            // 注意, use中的执行顺序是自右向左
            use: ['style-loader', 'css-loader'],
        }]
    },plugins:[],
    mode: 'development'
    // mode: 'production'
} 

index.js引入文件

import sty from '../css/a.css'

直接执行webpack

webpack

如果需要引入less, 需要:

  • 安装npm包

    npm install less less-loader -dev
    
  • 修改配置文件, rules中添加

    {
      test: /\.less$/,
      use: ['style-loader', 'css-loader','less-loader'],
    }
    
  • JS直接引入文件

    import styl from '../css/c.less'
    

打包html

需要使用额外的plugins

npm install html-webpack-plugin 

作为插件, 在使用的时候需要手动引入, webpack.config.js

const HtmlWebpackPlugin = require ('html-webpack-plugin');
// ...
plugins:[
    new HtmlWebpackPlugin()
]

这里直接生成会发现build文件夹中多了一个index.html并且会自动引用所有输出资源, 想要指定压缩的html文件, 只需要

plugins:[
  new HtmlWebpackPlugin({
    template: './src/index.html'
  })
]

值得注意的是我们不要再次引用js资源了

打包img

此内容适用于webpack4, 在webpack5中官方引入了4个模块处理资源文件

安装Loader

npm install url-loader file-loader -dev

配置文件,rules写入

{
  // 输入文件类型
  test: /\.(jpg|png|gif)$/,
  use: [{
    loader: 'url-loader',
    // 配置url-loader, 当文件大小小于8K的时候, 不打包压缩文件, 直接转译为Base64
    options: {
      limit: 8*1024
    }
  }]
}

如果在webpack5中还是想使用url-loader

在官方文档中写有

当在 webpack 5 中使用旧的 assets loader(如 file-loader/url-loader/raw-loader 等)和 asset 模块时, 你可能想停止当前 asset 模块的处理, 并再次启动处理, 这可能会导致 asset 重复, 你可以通过将 asset 模块的类型设置为 ‘javascript/auto’ 来解决。

{
  test: /\.(jpg|png|gif)$/,
  use: [{
    loader: 'url-loader',
    options: {
      limit: 8*1024,
+     esModule:false
    }
  }],
+ type: 'javascript/auto',
}

webpack5中的做法

源模块类型(asset module type), 通过添加 4 种新的模块类型, 来替换所有这些 loader:

  • asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
  • asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
  • asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
  • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader, 并且配置资源体积限制实现。

无需安装npm, 只要在配置rulesrules加入

{
  test: /\.(png|jpg|gif)/,
  type: 'asset/resource'
}

以上的方法只能处理css中引入的文件, 对于html中的img文件无法处理, 可以使用html-loader

npm install html-loader

加入rules

{
  test: /\.html$/,
  use: ['html-loader'],{
            test: /\.html$/,
            use: ['html-loader'],
        }
}

可以看到, webpack会修改文件名, 修改后名字是图片的Hash, 同时注意到, 虽然我们在html与css中两次对同一文件进行引用, 但是webpack只打包了一次

打包其他资源

还可能打包一些不需要压缩的资源(例如字体文件)

加入rules

{
  exclude: /\.(css|js|html|less)$/,
  use: ['file-loader'],
}

devserver

我们希望实现webpack自动化构建, 实现自动编译, 自动发开浏览器, 自动刷新浏览器, 需要使用模块webpack-dev-server

安装

npm i webpack-dev-server 

配置JS, 在最外层, 与mode同级, 在mode之后

devServer:{
  compress: true,     // 使用gzip压缩
  port: 3000
}

注意, 自动化的构建在内存中进行, 并没有输出

npx webpack-dev-server  

开发环境配置

sudo npm install webpack-cli -g
echo 'export PATH="./node_modules/.bin:$PATH"' >> ~/.zshrc
npm install webpack-cli webpack style-loader css-loader less less-loader html-webpack-plugin html-loader --include=dev

webpack.config.js

const {resolve} = require('path');
const HtmlWebpackPlugin = require ('html-webpack-plugin');

module.exports={
    entry: './src/js/index.js',
    output: {
        filename: "built.js",
        path: resolve(__dirname, 'build')
    },module:{
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
        },{
            test: /\.less$/,
            use: ['style-loader', 'css-loader','less-loader'],
        },{
            test: /\.(png|jpg|gif)/,
            type: 'asset/resource',
        },{
            test: /\.html$/,
            use: ['html-loader'],
        },{
            exclude: /\.(css|js|html|less)$/,
            use: ['file-loader'],
        }
    ]
    },plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development',
    devServer:{
        compress: true,     // 使用gzip压缩
        port: 3000,
        open: true
    }
} 

生产环境配置

与开发环境不同的是, 生产环境要求

  • CSS文件从JS文件中分离
  • 对代码进行合并压缩
  • 样式代码与JS代码进行低版本兼容

提取CSS为单独文件

提取单独文件需要插件: mini-css-extract-plugin与对应的Loader: MiniCssExtractPlugin.loader

npm install mini-css-extract-plugin -dev

配置文件

const { resolve } = require('path');
const HtmlWebpackPulgin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'built')
    },module: {
        rules: [{
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader, // JS -> .css
             // 'style-loader',         // JS -> <style></style>
                'css-loader']           // 作用是 CSS -> JS
        }]
    },plugins: [
        new HtmlWebpackPulgin({
            template: './src/index.html'
        }), new MiniCssExtractPlugin({
            filename: 'css/built.css'
        })
    ], mode: 'production'
}

CSS兼容性处理

需要Loader与插件postcss-loader(转译), postcss-preset-env精确兼容性到浏览器

npm install postcss-loader postcss-preset-env -d 

配置文件

const { resolve } = require('path');
const HtmlWebpackPulgin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

process.env.NODE_ENV = 'development';     // 兼容性模式, 默认是production, 与mode无关

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'built')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader', {
                    loader: "postcss-loader",   // 因为需要配置选项, 要写成对象
                    options: {
                        postcssOptions: {       // 内部不用管
                            plugins: [["postcss-preset-env"]]
                        }
                    },
                },
            ]
        }]
    },
    plugins: [
        new HtmlWebpackPulgin({
            template: './src/index.html'
        }), new MiniCssExtractPlugin({
            filename: 'css/built.css'
        })
    ],
    mode: 'production'
}

对于浏览器配置, 还需要修改包所在的package.json

{
  "name": "demo2",
  "version": "1.0.0",
  // ...
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.02%",
      "not dead",
      "not op_mini all"
    ]
  }
}

分别设置了开发模式兼容性与生产模式兼容性, 其中"last 1 chrome version"表示只兼容最新版本Chrome,">0.02%"表示兼容99.98%的浏览器, "not dead"表示不管已经死的浏览器, "not op_mini all"不管欧朋浏览器, 更多配置见官方文档, 可以使用npx browserslist查看支持的浏览器

压缩CSS

需要插件css-minimizer-webpack-plugin

npm install css-minimizer-webpack-plugin -dev

配置文件

+ const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
plugins: [
  new HtmlWebpackPulgin({
    template: './src/index.html'
  }), new MiniCssExtractPlugin({
    filename: 'css/built.css'
  }), 
+ new CssMinimizerWebpackPlugin()
],

ES语法检查

ESLint可以根据配置纠正JS文件的语法错误与风格不统一的问题(实际上可以直接使用VSCODE的插件实现), 我们采用爱彼迎的JS规范: 英文文档, 中文文档

npm install eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -dev

修改配置文件(rules中追加)

{
  test: /\.js$/,
  exclude: /node_modules/, // 不修复别人的代码
  loader: 'eslint-loader',
  options: {
    // 自动修复 eslint 的错误
    fix: true,
  },
}

修改package.json(与version同层)

"eslintConfig": {
  "extends": "airbnb-base",
  "env": {
  "browser": true
  }
}

JS兼容性

兼容JS需要使用Babel

npm install babel-loader \
@babel/core @babel/preset-env core-js \
@babel/polyfill -dev

第一行是Loader, 第二行还是Babel的依赖, 第三行是高级语法预设

新增rules

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    // 预设:指示 babel 做怎么样的兼容性处理
    presets: [
      [
        '@babel/preset-env',
        {
          // 按需加载
          useBuiltIns: 'usage',
          // 指定 core-js 版本
          corejs: {
            version: 3,
          },
          // 指定兼容性做到哪个版本浏览器
          targets: {
            chrome: '60',
            firefox: '60',
            ie: '9',
            safari: '10',
            edge: '17',
          },
        },
      ],
    ],
  },
}

JS压缩

修改mode为production即可

html压缩

修改Plugin

new HtmlWebpackPulgin({
  template: './src/index.html',
  minify: {
    collapseWhitespace: true,
    removeComments: true,
  },
})

生产环境配置

安装依赖

sudo npm install webpack-cli -g
echo 'export PATH="./node_modules/.bin:$PATH"' >> ~/.zshrc
npm install -dev webpack webpack-cli @babel/core @babel/polyfill @babel/preset-env babel-loader core-js css-loader eslint eslint-config-airbnb-base eslint-loader eslint-plugin-import file-loader html-loader html-webpack-plugin less less-loader postcss-loader postcss-preset-env style-loader devDependencies css-minimizer-webpack-plugin mini-css-extract-plugin

webpack.config.js文件

const { resolve } = require('path');
const HtmlWebpackPulgin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');

process.env.NODE_ENV = 'production';

const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader', {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        plugins: [
          ['postcss-preset-env'],
        ],
      },
    },
  },
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'built'),
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [...commonCssLoader],
    }, {
      test: /\.less$/,
      use: [...commonCssLoader, 'less-loader'],
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'eslint-loader',
      options: {
        fix: true,
      },
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: [
          [
            '@babel/preset-env',
            {
              useBuiltIns: 'usage',
              corejs: {
                version: 3,
              },
              targets: {
                chrome: '60',
                firefox: '60',
                ie: '9',
                safari: '10',
                edge: '17',
              },
            },
          ],
        ],
      },
    }, {
      test: /\.(png|jpg|gif)/,
      type: 'asset/resource',
    }, {
      test: /\.html$/,
      use: ['html-loader'],
    }, {
      exclude: /\.(js|css|less|html|jpg|png|gif)$/,
      use: ['file-loader'],
    }],
  },
  plugins: [
    new HtmlWebpackPulgin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
    }), new MiniCssExtractPlugin({
      filename: 'css/built.css',
    }), new CssMinimizerWebpackPlugin(),
  ],
  mode: 'production',
};

package.json文件(version同级别)

"browserslist": {
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ],
  "production": [
    ">0.02%",
    "not dead",
    "not op_mini all"
  ]
},
"eslintConfig": {
  "extends": "airbnb-base",
  "env": {
    "browser": true
  }
}

webpack配置优化

  • 开发环境性能优化
    • 优化webpack的打包构建速度(HMR)
    • 优化代码调试(source map)
  • 生产环境性能功能优化
    • 优化打包速度
    • 优化代码性能

开发环境配置优化

模块热替换HMR

存在问题, 当一个文件变化时, 全部文件都会重新打包, 希望与GLUP一样, 实现文件热更新

  • devServer中添加属性hot = true

  • 修改入口文件: entry: ['./src/js/index.js', './src/index.html']

  • 修改JS文件, 在末尾加入:

    if(module.hot){     // 如果开启了热加载
        module.hot.accept('test.js',function(){   // 监控test文件, 如果变化不重新编译, 只调用回调函数
            work();
        })
    }
    

SourceMap

与less编译的时候我们需要map文件确定样式对应到哪里一样, 编译后的JS也应该提供类似的功能方便报错后的调试, 只需要与devServer同级别设置

devtool: 'source-map'

即可, 其中值可以为[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map, 分别表示

  • source-map:外部
    错误代码准确信息 和 源代码的错误位置

  • inline-source-map:内联
    只生成一个内联source-map
    错误代码准确信息 和 源代码的错误位置

  • hidden-source-map:外部
    错误代码错误原因,但是没有错误位置
    不能追踪源代码错误,只能提示到构建后代码的错误位置

  • eval-source-map:内联
    每一个文件都生成对应的source-map,都在eval
    错误代码准确信息 和 源代码的错误位置

  • nosources-source-map:外部
    错误代码准确信息, 但是没有任何源代码信息

  • cheap-source-map:外部
    错误代码准确信息 和 源代码的错误位置
    只能精确的行

  • cheap-module-source-map:外部
    错误代码准确信息 和 源代码的错误位置
    module会将loader的source map加入

  • 内联 和 外部的区别:

    • 外部生成了文件,内联没有
    • 内联构建速度更快
  • 开发环境:速度快,调试更友好

    • 速度快(eval>inline>cheap>…)
      eval-cheap-souce-map
      eval-source-map
    • 调试更友好
      souce-map
      cheap-module-souce-map
      cheap-souce-map
    • 最终选择: eval-source-map / eval-cheap-module-souce-map
  • 生产环境:源代码要不要隐藏? 调试要不要更友好
    内联会让代码体积变大,所以在生产环境不用内联
    nosources-source-map 全部隐藏
    hidden-source-map 只隐藏源代码,会提示构建后代码错误信息

    • 最终选择: source-map / cheap-module-souce-map

生产环境配置优化

oneOf

在webpack的时候, 每一个文件都要与所有的规则匹配, 检查后缀是否满足, 造成性能损耗, 可以使用oneOf表示一旦文件成功匹配就不再与之后的规则匹配, 同时要求, 不能有两类rule匹配同一个文件, 使用如下

  module: {
    rules: [{ // 不得有两个文件匹配js, 所以eslint单独拿出来
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'eslint-loader',
      options: {
        fix: true,
      },
    }, {
      oneOf: [{// 加入oneOf
        test: /\.css$/,
        use: [...commonCssLoader],
      }, {
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader'],
      }, {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: {
                  version: 3,
                },
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17',
                },
              },
            ],
          ],
        },
      }, {
        test: /\.(png|jpg|gif)/,
        type: 'asset/resource',
      }, {
        test: /\.html$/,
        use: ['html-loader'],
      }, {
        exclude: /\.(js|css|less|html|jpg|png|gif)$/,
        use: ['file-loader'],
      }],
    }],
  },

缓存相关

与生产环境HRM类似, 在每次重新构建的时候不希望Babel编译未修改模块, 修改JS文件配置

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [...],
+   cacheDirectory: true,
  },
}

我们还希望用户可以缓存我们的资源文件(在后端路由的时候添加规则), 这是需要修改输出文件名, 方便出现Bug强制清除用户缓存

output: {
- filename: 'js/built.js',
+ filename: 'js/built.[chunkhash:10].js',
  path: resolve(__dirname, 'built'),
}
//...
new MiniCssExtractPlugin({
- filename: 'css/built.css',
+ filename: 'css/built.[chunkhash:10].css',
})

tree shaking

剪掉没有被调用的JS/CSS代码, 要求:

  1. 必须使用ES6模块化
  2. 开启production环境

部分webpack版本会删除css文件, 需要在package.json中设置"sideEffects": ["*.css", "*.less"](与name同级)

code split

我们不希望所有的文件都合并成bindle.js, 希望可以按照我们的要求分成多个js模块, 可以修改入口与输出文件实现

entry: {
  index: './src/js/index.js',     // 多入口文件, 与输出名
  test: './src/js/test.js',
},
output: {
  filename: 'js/[name].[contenthash:10].js',    // 输出文件名要修改成name.hash.js否则会重名
  path: resolve(__dirname, 'built'),
},
// ...
optimization: {     // 将node_modules中模大块单独打包
  splitChunks: {
    chunks: 'all',
  },
},

如果我们写的是单页面应用, 只需要一个js文件, 但是我们还是想要实现多输出, 可以通过JS代码实现

entry: './src/js/index.js',       // 单入口输入
output: {
  filename: 'js/[name].[contenthash:10].js',
  path: resolve(__dirname, 'built'),
},
optimization: {     // 将node_modules中模大块单独打包
  splitChunks: {
    chunks: 'all',
  },
},

index.js文件

/*
  通过js代码,让某个文件被单独打包成一个chunk
  import动态导入语法:能将某个文件单独打包
  注意, 文件名是用注释指定的
*/
import(/* webpackChunkName: 'test' */'./test')
  .then(({ mul, count }) => {
    // 文件加载成功~
    // eslint-disable-next-line
    console.log(/*...*/);
  })
  .catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败~');
  });

JS文件的懒加载与预加载

  • 懒加载: 在需要的时候再加载JS文件, 例如在调用库中函数的时候再加载, 而不是在import的时候加载
  • 预加载: 在懒加载之间, 当浏览器空闲的时候偷偷加载文件

我们需要修改JS文件实现:

原index.js

import { showMe } from './test';

console.log('INDEX-load');

document.querySelector('#btn').onclick = ()=>{
  showMe();
};

原test.js

console.log('TEST-load');

export function showMe() {
    console.log("TEST-OK");
}

在浏览器点击按键前会输出两个XXX-load, 点击按键之后输出XX-OK
我们希望实现的效果是, 点击按钮前出现INDEX-load, 点击按钮后出现TEST-load, TEST-ok

修改index.js

console.log('INDEX-load');

document.querySelector('#btn').onclick = ()=>{
  import('./test').then(({ showMe }) => {
    showMe();
  })
};

直接打包即可

注意到, 在第一次使用showMe的时候, test文件会被懒加载进来, 但是在第二次使用的时候, 由于test已经被加入缓存, 所以不会重复请求test文件

默认情况下test文件会被打上id作为输出文件名, 可以指定输出文件名, 并设置预加载

console.log('INDEX-load');

document.querySelector('#btn').onclick = ()=>{
  import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ showMe }) => {
    showMe();
  })
};

这样设置后, 在打开浏览器我们可以看到INDEX-load, 没有TEST-load, 但是在网络选项卡中可以看到test.[hash].js已经被加载了, 点击按钮, 没有重复请求, 同时输出TEST-loadTEST-ok

注意, 预加载可能存在兼容性问题

渐进式网页应用PWA(离线可访问)

我们希望实现离线仍然可以尽力访问大部分内容, 典型的页面有Vue(一大特点是地址栏旁边有一个安装XXX)

使用workbox实现

npm install -dev workbox-webpack-plugin

修改配置文件

const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
// ...
plugins: [
  // ...
  new WorkboxWebpackPlugin.GenerateSW({
    clientsClaim: true, // 使用最新的service worker
    skipWaiting: true, // 快速启动
  }),
]

index.js后追加

if ('serviceWorker' in navigator) {
  // 是否支持Service-worker
  window.addEventListener('load', () => {
    // 有的话在全局加载结束后注册事件
    navigator.serviceWorker.register('./service-worker.js') // 注册一个serviceworker, 这个JS文件会在webpack的时候自动生成
      .then(() => {
      // 加载成功...
        console.log('SW-On');
      }).catch(() => {
        console.log('SW-Err');
      });
  });
}

如果开启了ESLint的话, 还需要在package.json中配置以支持全局变量(与name同级)

"eslintConfig": {
  "extends": "airbnb-base",
  "env": {
    "browser": true
  }
}

多进程打包

安装依赖

npm install --save-dev thread-loader

比较耗时的是babel, 我们为Babel添加, 在Babel-loader前面添加thread-loader

{
test: /\.js$/,
exclude: /node_modules/,
use: [{
  loader: 'thread-loader',
  options: {
    workers: 2, // 使用双进程(不写就是满进程运行)
  },
}, {
  loader: 'babel-loader',
  options: {
    presets: [
      [
        '@babel/preset-env',
        {
          useBuiltIns: 'usage',
          corejs: {
            version: 3,
          },
          targets: {
            chrome: '60',
            firefox: '60',
            ie: '9',
            safari: '10',
            edge: '17',
          },
        },
      ],
    ],
  },
}],
},

还是注意, JS是单进程, 开启多进程后需要占用额外的时间, 所以只有工作消耗时间长的时候我们才开启多进程(例如Babel)

externals禁止打包

一部分包(例如jQuery)我们可能希望在本地使用npm引入, 但是上线后使用CDN引入, 可以将这些包写入排除打包列表, 然后在html文件中手动引入CDN

与mode同级追加

externals: {
  // 忽略库名 npm包名
  jquery: 'jQuery'
},

ddl动态链接库

与external类似, 指示webpack哪些库不需要打包, 同时dll支持将指定多个第三方库打包成一个js, 创建新的配置文件用于打包

webpack.config.js同级创建webpack.dll.js

const { resolve } = require('path');
const webpack = require('webpack')

module.exports = {
  entry: {
    jquery: ['jquery'], // 要打包的是生成一个jquery, 这个jquery包含的包有(数组里指定的)jquery
  },
  output: {
    filename: '[name].js', // 输出就是名字.js
    path: resolve(__dirname, 'dll'), // 输出路径
    library: '[name]_[hash]', // 别人在调用我的时候使用的包名叫什么
  },
  plugins: [
    // 创建一个manifest.json告诉webpack上面打包的文件不需要打包, 已经被dll打包到哪里了
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: resolve(__dirname, 'dll/manifest.json'),
    }),
  ],
};
webpack --config webpack.dll.js 

此时, 我们完成了第三方库的自定义打包

之后, 我们还要告诉webpack

// 告诉 webpack 哪些库不参与打包, 虽然在JS中import了jquery, webpack也是会忽略
new webpack.DllReferencePlugin({
  manifest: resolve(__dirname, 'dll/manifest.json'),
}),
// 设置哪些包应该在html中自动引入
new AddAssetHtmlWebpackPlugin({
  filepath: resolve(__dirname, 'dll/jquery.js'),
}),

最后webpack源文件

webpack

基本属性详细配置

Entry

entry键有几种值

  • String: './src/js/index.js’指定一个输入文件, 打包生成一个chunk, 输出一个文件(默认main.js)
  • Array: ['./src/js/index.js', './src/js/test.js'] 指定多个输入文件, 但是只会有一个输出文件, 一般只用于HMR的HTML热更新生效
  • Object: {index: './src/js/index.js', add: './src/js/add.js'} 指定多个输出文件, 输出文件名就是键名
  • Object混合: {index: ['./src/js/index.js', './src/js/test.js'], add: ['./src/js/add.js', './src/js/test.js']} 指定多个输出文件, 输出文件名就是键名, 一个文件可能包含多个包

output

常见形式

output: {
  // 输出文件名
  filename: 'js/built.js',
  // 输出文件目录
  path: resolve(__dirname, 'build'),
  // 输出公共路径
  publicPath: '/'
}

最后的输出路径就是path+filename, publicPath一般用于生产环境, 加上publicPath: '/path/', 在请求的时候会进行请求路径yourdomain.com/path/...

output: {
  // 输出文件名
  filename: 'js/built.js',
  path: resolve(__dirname, 'build'),
  chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称
  library: '[name]', // 整个库向外暴露的变量名
  // libraryTarget: 'window' // 将整个库向外暴露变量, 添加到哪个上, 用于 browser 
  // libraryTarget: 'global' // 将整个库向外暴露变量, 添加到哪个上, 用于 node
  // libraryTarget: 'commonjs' // 使用模块规范进行暴露
}

module

module:{
  rules: [{
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],// 多Loader
  },{
    test: /\.html$/,                    // 使用文件
    loader: 'html-loader',              // 单个Loader
  },{
    exclude: /\.(css|js|html|less)$/,   // 排除文件
    enforce: true,                      // 优先执行
    enforce: false,                     // 不优先执行
    loader: 'file-loader',
  },{
    oneOf: []                           // 只出现一次
  }]
}

resolve

用于配置解析模块的规则(在mode后)

// 解析模块的规则
resolve: {
  // 配置解析模块路径别名: 优点简写路径 缺点路径没有提示
  alias: {
    $css: resolve(__dirname, 'src/css')
    // 以后在引用css的时候只需要`import $css/style.css`
  },
  // 配置省略文件路径的后缀名
  extensions: ['.js', '.json', '.jsx', '.css'],
  // 告诉 webpack 解析模块是去找哪个目录(默认是node_modules, ../node_modules, ../../node_modules, ...)
  modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
}

devServer

注意是用于开发环境哈

devServer: {
  // 运行代码的目录
  contentBase: resolve(__dirname, 'build'),
  // 监视 contentBase 目录下的所有文件,一旦文件变化就会 reload
  watchContentBase: true,
  watchOptions: {
    // 不监视的文件(支持正则)
    ignored: /node_modules/
  },
  // 启动gzip压缩
  compress: true,
  // 端口号
  port: 5000,
  // 域名
  host: 'localhost',
  // 自动打开浏览器
  open: true,
  // 开启HMR功能
  hot: true,
  // 不要显示启动服务器日志信息
  clientLogLevel: 'none',
  // 除了一些基本启动信息以外,其他内容都不要显示
  quiet: true,
  // 如果出错了,不要在控制台提示
  overlay: false,
  // 服务器代理 --> 解决开发环境跨域问题
  proxy: {
    // 一旦devServer(5000)服务器接受到 /api/xxx 的请求,就会把请求转发到另外一个服务器(3000)
    '/api': {
      target: 'http://localhost:3000',
      // 发送请求时,请求路径重写:将 /api/xxx --> /xxx (去掉/api)
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

optimization

用于分割生成多JS文件

optimization: {
  splitChunks: {
    chunks: 'all'
    // 默认值,可以不写~
    /* minSize: 30 * 1024, // 分割的chunk最小为30kb
    maxSiza: 0, // 最大没有限制
    minChunks: 1, // 要提取的chunk最少被引用1次
    maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
    maxInitialRequests: 3, // 入口js文件最大并行请求数量
    automaticNameDelimiter: '~', // 名称连接符
    name: true, // 可以使用命名规则
    cacheGroups: {
      // 分割chunk的组
      // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js
      // 满足上面的公共规则,如:大小超过30kb,至少被引用一次。
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        // 优先级
        priority: -10
      },
      default: {
        // 要提取的chunk最少被引用2次
        minChunks: 2,
        // 优先级
        priority: -20,
        // 如果当前要打包的模块,和之前已经被提取的模块是同一个,就会复用,而不是重新打包模块
        reuseExistingChunk: true
      } 
    }*/
  },
  // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
  // 解决:修改a文件导致b文件的contenthash变化
  runtimeChunk: {
    name: entrypoint => `runtime-${entrypoint.name}`
  },
  minimizer: [
    // 配置生产环境的压缩方案:js和css
    new TerserWebpackPlugin({
      // 开启缓存
      cache: true,
      // 开启多进程打包
      parallel: true,
      // 启动source-map
      sourceMap: true
    })
  ]
}

webpack5的变化

自动删除 Node.js Polyfills

早期,webpack 的目标是允许在浏览器中运行大多数 node.js 模块,但是模块格局发生了变化,许多模块用途现在主要是为前端目的而编写的。webpack <= 4 附带了许多 node.js 核心模块的 polyfill,一旦模块使用任何核心模块(即 crypto 模块),这些模块就会自动应用。

尽管这使使用为 node.js 编写的模块变得容易,但它会将这些巨大的 polyfill 添加到包中。在许多情况下,这些 polyfill 是不必要的。

webpack 5 会自动停止填充这些核心模块,并专注于与前端兼容的模块。

迁移:

  • 尽可能尝试使用与前端兼容的模块。
  • 可以为 node.js 核心模块手动添加一个 polyfill。错误消息将提示如何实现该目标。

Chunk 和模块 ID

添加了用于长期缓存的新算法。在生产模式下默认情况下启用这些功能。

chunkIds: "deterministic", moduleIds: "deterministic"

Chunk ID

你可以不用使用 import(/* webpackChunkName: "name" */ "module") 在开发环境来为 chunk 命名,生产环境还是有必要的

webpack 内部有 chunk 命名规则,不再是以 id(0, 1, 2)命名了

Tree Shaking

  1. webpack 现在能够处理对嵌套模块的 tree shaking
// inner.js
export const a = 1;
export const b = 2;

// module.js
import * as inner from './inner';
export { inner };

// user.js
import * as module from './module';
console.log(module.inner.a);

在生产环境中, inner 模块暴露的 b 会被删除

  1. webpack 现在能够多个模块之前的关系
import { something } from './something';

function usingSomething() {
  return something;
}

export function test() {
  return usingSomething();
}

当设置了"sideEffects": false时,一旦发现test方法没有使用,不但删除test,还会删除"./something"

  1. webpack 现在能处理对 Commonjs 的 tree shaking

Output

webpack 4 默认只能输出 ES5 代码

webpack 5 开始新增一个属性 output.ecmaVersion, 可以生成 ES5 和 ES6 / ES2015 代码.

如:output.ecmaVersion: 2015

SplitChunk

// webpack4
minSize: 30000;
// webpack5
minSize: {
  javascript: 30000,
  style: 50000,
}

Caching

// 配置缓存
cache: {
  // 磁盘存储
  type: "filesystem",
  buildDependencies: {
    // 当配置修改时,缓存失效
    config: [__filename]
  }
}

缓存将存储到 node_modules/.cache/webpack

监视输出文件

之前 webpack 总是在第一次构建时输出全部文件,但是监视重新构建时会只更新修改的文件。

此次更新在第一次构建时会找到输出文件看是否有变化,从而决定要不要输出全部文件。

默认值

  • entry: "./src/index.js
  • output.path: path.resolve(__dirname, "dist")
  • output.filename: "[name].js"

热门文章

暂无图片
编程学习 ·

面向对象与面向过程

面向过程&#xff1a;将业务分成一个个的过程和步骤&#xff1b; 面向对象&#xff1a;将业务分成一个个的对象&#xff1b; 举例&#xff1a; 面向过程--打仗&#xff1a; 五点钟&#xff1a;吃早饭 六点钟&#xff1a;到达目的地 七点钟&#xff1a;冲锋 面向对象--打仗…
暂无图片
编程学习 ·

分治算法.

1. 分治算法介绍 分治法是一种很重要的算法。字面上的解释是“分而治之”&#xff0c;就是把一个复杂的问题分成两个或更多的相同或相似的子问题&#xff0c;再把子问题分成更小的子问题……直到最后子问题可以简单的直接求解&#xff0c;原问题的解即子问题的解的合并。这个技…
暂无图片
编程学习 ·

利用java控制window服务

下载 JInvoke 工具包 package com; import com.jinvoke.JInvoke; import com.jinvoke.NativeImport; import com.jinvoke.Util; import com.jinvoke.win32.Advapi32; import com.jinvoke.win32.Kernel32; import com.jinvoke.win32.WinConstants; import com.jinvoke.win32.…
暂无图片
编程学习 ·

linux在根目录下创建目录一test,Linux练习题

1.利用pwd命令显示当前目录pwd2.ls命令 ls -a命令的区别没路径 有路径3.man命令查看ls的手册man ls4.在根目录下创建test目录mkdier test5.在test目录下创建user1/user2目录结构mkdier user1 user26.利用touch命令在user2下创建文件myfiletouch myfile7.利用cp命令将myfile复…
暂无图片
编程学习 ·

社会网络分析——三、图论与图学习

社会网络分析——三、图论与图学习 中间被很多人转了&#xff0c;我是从机器之心公众号&#xff08;almosthuman2014&#xff09;看到的&#xff0c;最初来源应该是 Mal Fabien 大佬的博客&#xff0c;致谢 https://github.com/maelfabien/Machine_Learning_Tutorials 目录&…
暂无图片
编程学习 ·

单片机学习(五)LCD1602和矩阵键盘的使用

文章目录LCD1602的使用矩阵键盘的使用矩阵键盘相关电路图按键检测扫描制作密码输入器LCD1602的使用 首先LCD1602是外接在开发板上的液晶屏外设&#xff0c;如图所示&#xff1a; 我们主要使用它来代替动态数码管进行显示&#xff0c;因此使用的原理我们可以先略过&#xff0c…
暂无图片
编程学习 ·

2019全国大学生电子设计大赛(H题 模拟电磁曲线炮)

一、题目 自行设计并制作一个模拟电磁曲线炮,简称电磁炮。题目要求: 1.电磁炮能够在输入适当的距离D后,能将炮弹发射到该位置,且绝对偏差不大于50cm; 2.输入环形靶中心与定标点的距离d及与中心轴线的偏 离角度a ,一键启动后,电磁炮自动瞄准射击,按击中环形靶环数计 分;…
暂无图片
编程学习 ·

muduo库整体架构简析

muduo是一个高质量的Reactor网络库&#xff0c;采用one loop per thread thread pool架构实现&#xff0c;代码简洁&#xff0c;逻辑清晰&#xff0c;是学习网络编程的很好的典范。 muduo的代码分为两部分&#xff0c;base和net&#xff0c;base部分实现一些基础功能&#xff…
暂无图片
编程学习 ·

MATLAB画图的小结

1.最近用到MATLAB画图&#xff0c;用了plot3&#xff0c;还有line。 是为了得到三维图以及x,y轴上二维图的点连线&#xff0c;最后得到类似于这种效果的图。 &#xff08;随机冲击影响的非线性退化设备剩余寿命预测&#xff09; 这种三维图有多个剩余寿命预测的图组成&#xf…
暂无图片
编程学习 ·

C++,MessageBox的常见用法

一 函数原型及参数function MessageBox(hWnd: HWND; Text, Caption: PChar; Type: Word): Integer;  hWnd&#xff1a;对话框父窗口句柄&#xff0c;对话框显示在Delphi窗体内&#xff0c;可使用窗体的Handle属性&#xff0c;否则可用0&#xff0c;使其直接作为桌面窗口的子…
暂无图片
编程学习 ·

VC++ 如何让 MessageBox或AfxMessageBox 按钮显示英文或其他语言

由于特殊原因我们需要将 MessageBox 或 Dialog 的按钮“确定”、“取消”用英文或其他语言显示。在网上查找了很多相关内容&#xff0c;但很多要么很麻烦&#xff0c;要么根本就不能实现所需效果。在这我直接给出你快捷方法。 直接把MessageBox或AfxMessageBox 换成 MessageBo…
暂无图片
编程学习 ·

android模块编译,mm,mmm

android模块编译,mm,mmm 分类&#xff1a; androidfrom http://jinguo.javaeye.com/blog/691507 如果你只修改某一个模块的内容&#xff0c;却每次都要执行make, 最后等待很长时间。 使用模块编译&#xff0c;只需要在你所在的模块的目录或者其子目录&#xff0c;执行mm&…
暂无图片
编程学习 ·

Dev中ChartControl——属性熟悉与简单应用

图表元素之间的关系&#xff1a; 根据DevExpress帮助文档中描述&#xff1a;创建点图&#xff1a; 1、创建图表 /// <summary> /// 创建图表 /// </summary> private void CreatChart() {// Create a new chart.图表控件ChartControl pointChart new ChartControl…
暂无图片
编程学习 ·

java compareto long_Java compareTo() 方法

Java compareTo() 方法compareTo() 方法用于将 Number 对象与方法的参数进行比较。可用于比较 Byte, Long, Integer等。该方法用于两个相同数据类型的比较&#xff0c;两个不同类型的数据不能用此方法来比较。语法public int compareTo( NumberSubClass referenceName )参数ref…
暂无图片
编程学习 ·

记录自己记住的es6新特性

1.let const let&#xff0c;作用与var类似&#xff0c;用于声明变量 特性&#xff1a; let 不能重复声明变量&#xff0c;var 可以重复声明变量&#xff1b; 块级作用域&#xff0c;es5中存在全局作用域、函数作用域、eval作用域&#xff1b;es6中引入了块级作用域&#xf…
暂无图片
编程学习 ·

PreferenceFragment的简单用法

请勿转载&#xff0c;辛苦之作&#xff0c;转载注明此文来自http://write.blog.csdn.net/postedit 此处针对android3.0以后&#xff0c;更加倾向于使用PreferenceFragment而不再使用PreferenceActivity,因为PreferenceFragment更加灵活&#xff0c;此处主要使用两个方法即可达…
暂无图片
编程学习 ·

2B 领域下低代码的探索之路

简介&#xff1a; 低代码将成为B端服务领域的基础设施&#xff0c;必将颠覆传统开发方式&#xff0c;未来可期。 作者&#xff1a;天晟 前言 大家好&#xff0c;我是钉钉宜搭前端一个小团队的负责人天晟&#xff0c;在阿里做了五年的低代码。今天的分享我们不讲技术细节&…
暂无图片
编程学习 ·

android accept方法详解,Android OkHttp常用详解

图片发自简书AppOkHttp不需要多介绍了&#xff0c;已经是网络框架界的大佬了&#xff0c;很多网络框架都基于OkHttp封装&#xff0c;也有很多涉及到网络的第三方框架都可以支持使用OkHttp替换网络。OkHttp的4.0.x版本已经全部由java替换到了Kotlin&#xff0c;API的一些使用也会…
暂无图片
编程学习 ·

STM32 HAL库之看门狗

1.STM32CubeMX配置 keil5文件输出如下&#xff1a; 点击右上角GENERATE CODE 2.代码解析 IWDG_HandleTypeDef hiwdg;void MX_IWDG_Init(void) {hiwdg.Instance IWDG;hiwdg.Init.Prescaler IWDG_PRESCALER_4;//4分频&#xff0c;频率为10KHzhiwdg.Init.Window 4095;//看门…
暂无图片
编程学习 ·

嵌入式学习参考资料

C语言——The C Programing Language Linker and Loader——介绍程序的链接和加载 APUE(Advanced Programming in Unix Environment) UNIX环境高级编程 UNP(Unix Network Programming) UNIX网络编程
暂无图片
编程学习 ·

嵌入式学习(二)—STM32F10X的时钟配置

上一篇嵌入式的文章我们了解了STM32F的固件库&#xff0c;任何控制系统都离不开系统时钟&#xff0c;这篇文章我们分析一下&#xff0c;STM32F10X的时钟配置。​ 一、在STM32中&#xff0c;有5个时钟源&#xff0c;为HSI,HSE,LSI,LSE,PLL. ①HSI是高速内部时钟&#xff0c;RC振…
暂无图片
编程学习 ·

2020阿里巴巴实习笔试题一

笔试题一 题目描述&#xff1a; 输入n个数&#xff0c;让你从中选k个数做&运算&#xff0c;即位运算中的与运算&#xff0c;现在从所有方案中&#xff0c;将这k个数&一起的最小值是多少&#xff1f; 输入描述 输入第一行有一个整数T&#xff0c;代表接下来有T组测试数…
暂无图片
编程学习 ·

CronTrigger说明

如果需要复杂的任务计划调度&#xff0c;像日历样式的任务&#xff0c;而不是简单的时间间隔调度&#xff0c;需要使用CronTrigger&#xff0c;SimpleTrigger满足不了需求。 用CronTrigger&#xff0c;你可以定义任务计划像“每周五的中午”&#xff0c;或“每个工作日的早上9…
暂无图片
编程学习 ·

CronTrigger:Cron表达式触发器

原文地址&#xff1a;https://blog.csdn.net/QXC1281/article/details/68924140 字符 1. * 每一(每一分) 2. ? 表示不关心,任意 3. - 范围 (小时:1-12,1到12点运行) 4. , 标示多个值 (小时 1,2,3 1点2点3点运行) 5. / 递增触发(0/15,从0开始每15秒运行一次) 6. L 最后(日…
暂无图片
编程学习 ·

计算机网络原理(04741)自考学习笔记/备考资料

本文是我参加电子科技大学 计算机科学与技术专业 自考本科中计算机网络原理科目的学习笔记&#xff0c;以章为单位&#xff0c;以考点&#xff0c;习题&#xff0c;课堂知识为内容。既是我自己学习的记录&#xff0c;也可以作为其他自考考生的复习的资料&#xff0c;还是快速构…
暂无图片
编程学习 ·

java文件下载乱码_java文件下载乱码解决方法介绍

JAVA文件下载时乱码有两种情况&#xff1a;(推荐&#xff1a;java视频教程)1&#xff0c;下载时中文文件名乱码2&#xff0c;下载时因为路径中包含中文文件名乱码&#xff0c;提示找不到文件解决方法见下面部分代码response.setContentType("multipart/form-data");S…
暂无图片
编程学习 ·

linux c++贪吃蛇代码,C++ 贪吃蛇源代码

using namespace std;void gotoxy(int x,int y)//位置函数{COORD pos;pos.X2x;pos.Yy;SetConsoleCursorPosition(GetStdHandle(STD_OUTPUT_HANDLE),pos);}void color(int a)//颜色函数{SetConsoleTextAttribute(GetStdHandle(STD_OUTPUT_HANDLE),a);}void init(int apple[2])//…
暂无图片
编程学习 ·

C语言提取PDF字符串,C语言资料精华.pdf

指针是&#xff23;语言中广泛使用的一种数据类型。运用指针编程是&#xff23;语言最主要的风格之一。利用指针变量可以表示各种数据结构&#xff1b; 能很方便地使用数组和字符串&#xff1b; 并能象汇编语言一样处理内存地址&#xff0c;从而编出精练而高效的程序。指针极大…
暂无图片
编程学习 ·

无法启动计算机上的服务msdtc,MSDTC服务无法启动解决方法

文章来源&#xff1a;网络具体步骤如下&#xff1a;开始菜单——运行——输入MMC——文件——添加/删除管理单元——点击“独立”选项卡上的“添加”——选择最下面的“组件服务”&#xff0c;点击添加后关闭弹出窗口并确定——展开组件服务至“我的电脑”节点——在“我的电脑…
暂无图片
编程学习 ·

API Guides Contacts Provider (二)

Data From Sync Adapters 用户直接输入联系人的数据到设备中&#xff0c;但是也可以通过sync adapters从服务器上获取联系人的数据。sync adapter 会自动同步设备和服务器上的数据。sync adapter运行在后台&#xff0c;由系统来控制。系统调用ContentResolver去管理数据。 在A…
暂无图片
编程学习 ·

谢菲尔德遗传算法工具箱

谢菲尔德遗传算法工具箱的使用安装工具箱下载工具箱添加路径标题遗传算法函数ranking()函数select()函数bs2rv()函数小结安装工具箱 谢菲尔德遗传算法工具箱作为matlab的一个函数库&#xff0c;可以简单实现遗传算法。我一开始学习了粒子群优化算法和鲸鱼优化算法等群智能优化…
暂无图片
编程学习 ·

Spring系列之字段格式化-13

字段格式化 Spring 3 引入了一个方便的SPI&#xff0c;它为客户端环境的实现Formatter提供了一个简单而健壮的替代方 Formatter Formatter实现字段格式化逻辑的SPI 。 package org.springframework.format.datetime;public final class DateFormatter implements Formatter…
暂无图片
编程学习 ·

计算机思维导论答案7,计算思维导论4-7单元答案.docx

文档介绍&#xff1a;计算思维导论4-7单元答案【单元测验4】返回本次得分为:40.00/40.00,本次测试的提交时间为:2017-04-22,如果你认为本次测试成绩不理想,你可以选择再做一次。1单选(4分)古希腊数学家丢番图(Diophantus)对代数学的发展有极其重要的贡献,并被后人称为“代数学之…

3d环绕音抖腿教程_抖音的3d 环绕音乐怎么制作

音乐怎么制作成3D环绕效果的?没听说过过3D立体电影吗? 没玩过3D游戏吗? 其实3D音响也一样,就是能够听出立体效果来,从微光一面来看就是音响内部功放的设计不一般,不想普通音响那样两个高音加一个低音和环绕就成了一台功放,所谓3D音响就是将两个主声道的音频信号波进行相…

3d特效抖音剪映视频教程

剪映如何使用啊?抖音剪映使用方法教程如下:1、打开剪映,点击“+开始创作”,如下图所示。2、选择视频,点击“添加到项目”,如下图所示。3、在屏幕下方左滑,找到并点击“滤镜”,如下图所示。4、选择滤镜,点击“√”,如下图所示。5、选择滤镜轨道,拖动右侧白框,直到与…

3a俄语抖音舞蹈教程

抖音俄语歌3ar是什么歌名抖音俄语歌由бадминтон (羽毛球组合)演唱,歌名зая,(兔子的昵称)。歌名:《3ar》歌词如下:зая - бамбинтоня звоню в последний мигпланы встречи у другихтолько я всегд…

3ar抖音舞蹈视频教程_抖音舞蹈视频教程简单

抖音歌曲3ar音译歌词歌名:《3ar》歌词如下: Зая - Бамбинтон Я звоню в последний миг Планы встречи у других Только я всегда могу Когда нужно прибегу Я как будто гл…

3ar抖音曲一婷教程

ticke的意思,发音,用法。😘😘😘ticket英 [tɪkɪt]美 [tɪkɪt]n. 票;入场券,标签;(美)候选人名单;证明书;交通罚款单vt. 加标签于;指派;对…开出交通违规罚单搜一下:ticke的意思,发音,用法。😘😘😘抖音歌曲3ar音译歌词歌名:《3ar》歌词如下: За…

38步抖音神曲慢教程奔跑

求鬼舞步的基础动作:奔跑,只要文字解析、两脚并拢,右脚抬起,然后在将左脚往后拖,在拖的同时迅速将右脚往前一挪 注:(动作要同步)一样的,左右脚是一样的,一个动作,只是需要练速度。。。军事训练口令如何喊1、立正口令:立正。队列动作的最基础动作之一。口令是立正!做…

38度6抖音最火舞蹈教程

韩国歌曲抖音最火1、《got7的fly》2、《ikon的LOVE SCENARIO》3、《防弹少年团的danger》4、《弹少年团的fire》5、《郑容和的Life is a party》6、《朴宰范的전화기를 꺼놔(关掉手机)》7、《脸红的思春期的blue》8、《2ne1 的 it hurt》9、《blue》这首歌是韩国双人女子乐队组…

36步抖音里来看我慢动作教程

慢动作视频如何观看效果? 我拍摄的视频是120帧的。但我播放时看不出那种慢动作效果,是放慢一半速高速拍摄后正常播放形成慢动作正常应该是30帧,也就是说可以放慢4呗怎么拍抖音抖音实在最近非常火爆的一个视频软件,它新设计的风格,画面等都是比较漂亮的,所以用户每天也在急…

360全景制作抖音教程_360全景相机抖音直播

360度全景摄影的拍摄有啥技巧?后期拼接制作又是怎样的?全景摄影需要使用三脚架、垂直拍摄、设置相同的曝光值、不重复对焦等技巧。后期拼接一般使用ps软件。全景摄影是指符合人的双眼正常有效视角或者包括双眼余光视角以上,乃至360度完整场景范围拍摄的照片。传统的光学摄影…

360儿童手表下载抖音教程_360儿童手表怎么下载音乐

儿童智能手表怎么下载app电池都是装好的,而且是可充电电池,不需要自己安装。 智能儿童手表都是通过手机app控制的,你看看你的儿童手表绑定了管理账号木有,像360智能儿童手表就是通过手机端控制手表,父母可以随时随地知道孩子的动态。单向通话,不影响孩子学习或者玩耍。我…

360儿童手表下载抖音教程_360儿童手表怎么下载抖音

360儿童手表使用教程绑定操作(二维码在哪里:①在说明书的第3页;②插卡并联网成功前提下,短按手表右上键2S,手表屏幕即可显示二维码;激活成功后该二维码就不会再次显示;③手表成功激活使用后的客户端“管理”栏--“手表信息”页面可见),希望有帮助。360儿童手表可以添加…

33抖音简笔画牛教程_在抖音上画简笔画怎么赚钱

谁能教教我简笔画的牛怎么画啊?越简单越好!不胜感激!百度上搜的 应该很简单吧?儿童简笔画牛怎么画打开画图工具,画牛头、牛鼻、牛角、牛耳、牛身、牛脚、牛尾巴即可。1、首先在桌面上,点击“开始”里的“画图”图标。2、然后在该界面中,先画一条曲线作为头。3、之后在该…

32步教程抖音最火

抖音上很火的特效视频是怎么制作的,其实方法第一步:打开激萌相机(可以去安卓市场下载)第二步:点击「编辑」,进入导入素材界面第三步:导入视频素材,注意必须为竖屏的素材若是横屏,则出来的水晶球是椭圆形的第4步:选择贴纸功能第五步:点击「创意」,然后在其中找出「小…

321走抖音教程_抖音321开头的音乐

321走哪些路线郑州321路拍抖音的技巧抖音作为最近最火的短视频APP已经不知不觉的影响了年轻人的生活,越来越多的年轻人开始离不开抖音,也有越来越多的年轻人喜欢上了拍抖音。下面就来说一说拍抖音dj的几个小技巧。1. 音乐的选择很多小伙伴就奇怪了我拍摄完成或者直接编辑拍摄…

321变装抖音版变装教程

手机抖音上的变装特效是怎么弄起来的需要详细步骤?玩家首先需要将抖音打开,然后点知击下方的+号拍摄按钮进入到拍摄界面。在拍摄界面现在右边的拍摄道具,在拍摄的道具中拥有着最新的道具选项,玩家选择一个名为变装的道具,点击就会出现道具特效了。在道具特效中,玩家可以用…

31张照片卡点教程抖音

抖音卡点视频如何制作图文+视频版 ?有教程吗?话不多说,直接进入正题。首先,图片轮播类的视频该怎么做?步骤一:选择一张素色背景,或是你心仪的背景,但你要知道这张背景的色调一定要配合接下来你的几张轮播图;步骤二:准备好你的轮播图片(至少五张),图片尺寸一致,记…

30秒舞蹈视频教程抖音_抖音手语舞蹈视频教程

舞蹈视频教程求简单舞蹈,有功底要求视频可以怎样才能学好舞蹈狠~瑷520抖币等于多少钱?截止2021年6月30号,520抖币等于52人民币。用户开通直播后可以获得礼物,礼物由抖音币购买,抖音官方会和主播进行五五分成,6元人民币可以购买60抖音币,30元人民币可以购买300抖音币。音…

30张照片卡点抖音教程

抖音卡点视频如何制作图文+视频版 ?有教程吗?话不多说,直接进入正题。首先,图片轮播类的视频该怎么做?步骤一:选择一张素色背景,或是你心仪的背景,但你要知道这张背景的色调一定要配合接下来你的几张轮播图;步骤二:准备好你的轮播图片(至少五张),图片尺寸一致,记…

2胞胎视频抖音教程_抖音有个视频女子生9胞胎

老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视频,点击底部的“+”,再点击左上角的上传视频。界面显示出手机里的所有视频,点击选中想要上传的视频,进入裁剪视频界面。在裁剪视频界面的底部视频帧处滑动视频,选择想要的视频帧段,选好后,点击右上角的下…

2个视频放在同一个画面抖音教程

怎么把两个不同 视频拼到一起播放 就是屏幕里一共俩个一起 播 怎么弄 手机也行 电脑也行在电脑上将两个不同视频合并在一起,首先在电脑上下载“爱剪辑”软件。使用“爱剪辑”的具体操作如下:第一步:打开“爱剪辑”软件;第二步:双击左下角“已添加片段”旁的“双击此处添加…

2个人拍的抖音教程_抖音拍小孩子教程视频

视频拍摄技巧怎么一个人变两个人拍两段视频合成一段视频比如拍两个长得一模一第一段样的人说话其实对面没有人只是一个人在假装和人说话第二段那个人再站到对面拍在听人说话的样子最后把两段视频合成一段搜一下:视频拍摄技巧怎么一个人变两个人拍视频可以使用腾讯微视,微视可…

2d抖音动画教程_抖音flash动画教程

如何做2D动画现在的电脑制作的二维动画是对手工传统动画的一个改进。通过输入和编辑关键帧;计算和生成中间帧;定义和显示运动路径;交互式给画面上色;产生一些特技效果;实现画面与声音的同步;控制运动系列的记录等等。广州形动数码科技有限公司以制作影视动画、建筑动画、…

2chainz抖音舞蹈教程

抖音里有一首歌,是一个舞蹈,歌曲是灯等等登登灯等,然后是一只手转圈,一只手像左上方指silver scrapes失恋阵线联盟DOUYINSHENQU。COM泰国电音,捂嘴甩胳膊白白净净查积分经济法卷DJ放假就徐记海鲜还吃不吃吃老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视…

28256抖音安卓教程

老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视频,点击底部的“+”,再点击左上角的上传视频。界面显示出手机里的所有视频,点击选中想要上传的视频,进入裁剪视频界面。在裁剪视频界面的底部视频帧处滑动视频,选择想要的视频帧段,选好后,点击右上角的下…

28256手指舞教程抖音

用计算机怎么算28256看到28256计算的第一反应是抖音里计算28256+28257+282931+38356+38357+383941这串数字相加,实际上这串数字相加得到800098,并不可能得到5201314。至于这一串数字的来源是,小时候跳皮筋的一首儿歌。苹果手机如何计算出5201314的具体操作如下:1、打开重力…

24岁网红抖音新手入门教程

最近想学做视频,怎么入门?个人的主意:边学边练。先找一款视频软件,比如:会声会影。先掌握基本的编辑过程:捕获--编辑--分享。捕获:就是要获得视频素材。视频素材可以是录像、照片、图画、色彩等等。捕获的视频素材主要是录像的片段。将录像设备联接到计算机以后,会声会影…

24小时直播放歌曲教程抖音_手机24小时直播放歌曲教程

抖音直播时怎么放音乐抖音直播时放音乐方法:1、进入“抖音”APP。2、点击右下角的“我”。3、点击上方的“三横”图标。4、进入“企业服务中心”。5、点击“开始直播”即可进行直播。6、打开手机中的音乐播放软件,直接进行音乐外放。7、继续进行直播即可。抖音直播必须有权限…

23的你拍抖音教程视频

怎么拍抖音抖音实在最近非常火爆的一个视频软件,它新设计的风格,画面等都是比较漂亮的,所以用户每天也在急剧的上升,下面我们就来看一下抖音达人的拍摄方法吧。首先下载一个到手机桌面上,然后打开到主页,点击正中间的那个“+”号,就可以开始录制视频了。首先选择一个,K…

21年抖音最火舞蹈教程

什么叫流行舞蹈?流行舞蹈(网络代名词)指网上热门流传的舞蹈,舞步较为简单,授与大众。比如海草舞、dura舞蹈、手势舞、拍灰舞、开车舞、捣蒜舞、朱碧石舞等等。1、海草舞BGM:海草舞海草舞,网络流行词,是抖音上面很火的一种舞蹈,它的背景音乐源于《社会摇》原创作者萧全最…

20节抖音短视频教程

抖音满屏爱心怎么弄在手机的激萌软件里找到爱心特效,拍摄一段视频保存在手机里,然后通过抖音的上传功能,上传这段视频即可。工具/原料:手机,抖音1、打开手机里的激萌软件;2、在进入激萌界面后,点击左下方的“贴纸”;3、在弹出菜单中,点击“热门”下方第一个爱心特效;…

20张以上照片卡点抖音教程

抖音卡节奏的图片视频怎么做抖音卡节奏的图片视频做法步骤。1、进入手机应用商店下载vn视频处理器如下图所示。2、打开该软件添加素材最多只能添加16张照片如下图所示。3、将首张照片设置为2秒如下图所示。4、其余照片时间改为0.5秒如下图所示。5、重复完成所有素材编辑如下图…

2022舞蹈抖音最火教程_抖音流行舞蹈2022

老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视频,点击底部的“+”,再点击左上角的上传视频。界面显示出手机里的所有视频,点击选中想要上传的视频,进入裁剪视频界面。在裁剪视频界面的底部视频帧处滑动视频,选择想要的视频帧段,选好后,点击右上角的下…

2022舞蹈抖音最火教程_2022过年抖音简单舞蹈

抖音最火的人有哪些?关于抖音最火的人,在这里给大家简单介绍十位抖音上很火的人,来看看有没有你喜欢的吧1.费启鸣拥有180cm的身高,颜值在线,凭借“男友脸”走红,标志性的微笑圈粉无数,被网友亲切的称作“狒狒”,微博粉丝破百万,现在的他已经出道拍戏了。2.代古拉k凭借…

2022流行舞蹈抖音教程_抖音韩国舞蹈2022年

张艺兴抖音舞蹈视频怎么拍啊?抖音保存视频方法我们在手机上找到抖音短视频的图标,点击后打开并登录抖音短视频接下来在打开的抖音主界面,找到我们想要保存的精彩视频,然后点击“分享”图标。这地会在下面的弹出一个分享菜单,在这里我们点击“保存本地”按钮。这时就会弹出…

2022流行舞蹈抖音教程_2022抖音最火舞蹈串烧

镜面舞蹈教学( 镜面的)镜面+分解动作)抖音上最火的10大舞蹈抖音上最火的10大舞蹈:1、爱的就是你这个手势舞最大的亮点就在于是两人一起组合,动作很甜蜜。两人可以互动KISS这样更甜。2、heartbeat抖音heartbeat舞又叫做心跳舞,节奏感配上流畅的手势也是有趣到不行。3、panam…

2022抖音短视频剪辑教程_抖音短视频剪辑怎么赚钱

抖音短视频怎么剪辑 剪辑的具体方法介绍1、首先,打开抖音短视频主页,直接点击箭头所指的上传视频位置。2、然后,你可以选择你要编辑的视频。3、然后再视频编辑界面就可以轻松的编辑啦。4.选择节点,拖动就可以轻松编辑,选择OK,保存。抖音于2016年9月上线,一直磨刀磨到201…

2022抖音短视频剪辑教程_抖音短视频剪辑怎么剪

抖音怎么🈴️拍抖音视频合拍方法1、打开抖音,选择【我】页面;2、在【我】页面中,【作品】栏下找到你要合拍的短视频(这里小伙伴需要有自己想要同框的短视频,如果作品中没有的话,需要先上传作品哦,步骤:可以先在抖音中下载一段需要用到同框短视频,然后上传即可)3、在…

2022抖音直播带货7天螺旋起号教程

淘宝七天螺旋具体是如何操作的,解说详细点谢谢浏览量配合销量从宝贝上架那一刻到第七天下架销量成递增趋势你自己开的?再看看别人怎么说的。抖音带货怎么操作?然后上架商品然后就是开直播就行了,不会刻意在网上搜资料!也可以选择让别人教你我也是做带货的先要看自己做什么…

2022抖音最火舞蹈串烧慢教程

大神,舞蹈串烧,求怎么把他们串起来找你的跳舞音乐,就跳高潮部分,然后音乐结合一下动作看看怎么下场上场就好了(......)承接上一个节目;动感的音乐,美妙的旋律,让我们少女时代的girl为之舞动,接下来请欣赏由我校的几位时尚青春美少女为大家献上《》。有请......大神,…

2022抖音最火的串烧舞蹈教程

抖音上那个哦呐呐呐,哦呐呐呐到底什么歌我猜应该是哈瓦那,havana~ havana ooh na na应该是right nowbeautiful nowaloha heja he 请采纳。谢谢隔壁的泰山抖音串烧怎样制作不管是歌曲串烧还是视频串烧,都可以分段拍摄或者是分段录制,录制好之后再剪辑在一起就可以了《离人愁…

2022抖音新手入门教程_2022织毛衣教程与图解 新手入门教程

想学习视频制作,零基础。主要是想做抖音一类的视频,从什么入门比较好,是先学习AE 还是Pr?AE是后期动效和制作2D动画的软件,3D动画也能做,但是没有C4D和MAYA专业。PR是剪辑软件,可以提升视频视频清晰度。就看你个人需要了。我建议你先学Ae,学完Ae再学PR会很容易AE 还是P…

2022抖音新手入门教程_2022抖音卡道具搬运教程

抖音新人有什么上热门的技巧吗?抖音新人想要上热门需要知道抖音上热门的几大要素:1、内容:优质的内容是非常重要的,精彩的作品内容自然能吸引无数粉丝为你点赞。拍摄之前最好做个内容规划,以便后期做垂直内容。2、歌曲:魔性动感的音乐和你的视频内容节奏如能完美契合,那…

2022抖音一证多号最新教程

一个营业执照可以认证两个抖音号开小黄车和直播卖产品吗?亲 首先,一个营业执照是可以认证2个抖音号的,第二 不用蓝v也可以开通小黄车的,不懂再问我可以开的,收钱码的话没有营业执照也可以开通。请问一个证可以办理几个抖音蓝V?你好,一个营业执照办理两个蓝V超出了对账号…

2022年最火抖音教程_2022年最火的抖音视频

抖音怎么上热门?抖音广告产品介绍:1、抖音开屏广告广告样式:静态3秒、动态4秒、视频5秒。售卖方式:CPT(开屏CPT产品轮播数由4轮增加至8轮,单轮库存10000CPM)。GD不支持定向,可支持第三方监测曝光及点击。备注:开屏CPT售卖需至少提前5天下单并提交素材,开屏CPM售卖需至…

2022年最火抖音教程_2022年抖音最火的电视剧

抖音新人有什么上热门的技巧吗?抖音新人想要上热门需要知道抖音上热门的几大要素:1、内容:优质的内容是非常重要的,精彩的作品内容自然能吸引无数粉丝为你点赞。拍摄之前最好做个内容规划,以便后期做垂直内容。2、歌曲:魔性动感的音乐和你的视频内容节奏如能完美契合,那…

2022年抖音运营全套详细教程_2022年抖音运营计划

如何进行抖音账号运营?首先要注册一个抖音号,然后进行七天养号,就是观看一些自己领域或者风格的视频,可以点赞评论,然后再发表自己的作品,最好连续发一个星期,这样垂直度高,作品风格不要随便更换这也是一个老生常谈的问题。如何运营抖音照,就要必须吸引足够多的粉丝。…

2022年抖音小店开通教程_抖音小店2022年最新政策

抖音小店怎么开通开通抖音小店之前,首先要开通抖音橱窗抖音橱窗开通需要:0粉丝,大于10个视频,实名认证,申请开通,然后去抖音APP里面单独申请。申请方式如下:1.进入“我”——“我的商品橱窗”2.点击右上角“电商工具箱”更多资讯讴培网络提供3.点击“开通抖音小店”,或…

2022年抖音小店开通教程_2022抖音小店还能做吗

抖音小店怎么开通 ?怎样开一个抖音小店?抖音现在可是人手必备的APP了,如果你也想在抖音赚钱的话,开通抖音小店绝对是最好的选择。作为一个过来人,我就把自己开通小店经验告诉你吧。想要开通抖音小店的话,前提得是有自己的商品和营业执照。注册登记之前,你需要提前准备营…

2022年抖音官方平台教程_2022抖音官方扶持

在抖音里,怎样联系官方抖音广告产品介绍:1、抖音开屏广告广告样式:静态3秒、动态4秒、视频5秒。售卖方式:CPT(开屏CPT产品轮播数由4轮增加至8轮,单轮库存10000CPM)。GD不支持定向,可支持第三方监测曝光及点击。备注:开屏CPT售卖需至少提前5天下单并提交素材,开屏CPM售…

2022年抖音官方平台教程_2022官方抖音极速版

抖音怎么制作1、手机打开剪映,然后点击开始创作,选择要剪辑的视频。2、打开视频后,点击左下角的“剪辑”,就可以把不要的部分删除。3、还可以设置视频变速,调整音量,添加音乐等等。4、编辑好视频后,点击右上角的导出,然后上传抖音即可。最好是自己拍的原创作品,有内容…

2022年抖音养号详细教程

抖音如何养号?抖音冷启动阶段(抖音养号第一步)•用手机号自带流量注册抖音号;•不要修改任何资料;•关注最少2—3个左右比较火的账号;•推荐、附近视频观看,进抖音首页,看推荐的视频最少5个,看下附近同城的抖音视频;•评论1—2个感兴趣的视频,用消费者思维,比如不错…

2022年抖音养号最新详细教程

新开的抖音号养号多久合适养号的最终目的只有一个:提升账号权重。抖音更希望把流量给那些正常的、能创作高质量、垂直内容的账号,下面教大家如何养出高质量的权重号。1、一卡一机一号简单来说就是一个手机号,一部手机,一个抖音号,切记,一台手机最好只登陆一个抖音号,登陆…

2021钢琴教程抖音火歌_2021抖音钢琴纯音乐

如图这个音符怎么在钢琴上弹?第一个音sol大字组sol 和高八度的sol 在中央C的左边本小节左手部分用简谱标注是 5 5 2 5那个符号是强音符号,只需弹重一点就好。升fa还是按原本的弹;弧线是连音线,之弹一个fa就可以了,但节拍要拖足(五拍)抖音最火的钢琴曲是哪首?《告白之夜…

2021舞蹈视频抖音最火教程_抖音小舞蹈视频简单2021

2021抖音最旺最好的名字1、气质尒莮亾、烈酒尽枯骨、一日看尽长安花、銱儿鎯筜、太阳暖人不暖心、帅到没朋友、若遇浅香、南馆潇湘、清酒暖心、蕞凉卟过朲杺、倾尽一生为你、以吾之姓冠汝之名、麦芽糖、情深致命、指间沙。2、两不相欠、终将拥有一片天、尛爷ミ半生沉浮、Miss维…

2021爆红抖音舞蹈教程

暂不支持给商家用户发送红包 在抖音里发红包,弹出”暂不支持给商家用户发送红包”是什么意思?那是因为你这个发红包的权限还没有被打开,所以说暂时不能支持。给商家用户发送红包。你好!暂时不支持给商家用户去发送红包,而是因为现在的话,商家用户可能他不允许你发送红包的…

2021最火的抖音舞蹈教程视频

2021抖音最旺最好的名字1、气质尒莮亾、烈酒尽枯骨、一日看尽长安花、銱儿鎯筜、太阳暖人不暖心、帅到没朋友、若遇浅香、南馆潇湘、清酒暖心、蕞凉卟过朲杺、倾尽一生为你、以吾之姓冠汝之名、麦芽糖、情深致命、指间沙。2、两不相欠、终将拥有一片天、尛爷ミ半生沉浮、Miss维…

2021最火抖音眉飞色舞慢教程

描写人物神态的词语句子一见如故、亲密无间、心肝宝贝、如获至宝、兴致勃勃、难以割舍、爱不割舍、讨人喜欢、眉飞色舞、满面春风、仰天大笑、哈哈大笑、笑容可掬、笑逐颜开、喜上眉梢、手足无措、六神无主、惊恐失色、惊慌失措、面如死灰、面如土色、慌慌张张、惊悸无主、面无…

2021抖音运营教程巨量引擎

巨量大学和巨量引擎有什么关系?它的优势在哪里?看名称就知道啦,这是巨量引擎旗下的学习培训+认证平台,说下我的理解吧。在学习培训方面:这里可帮助全营销行业的人们提供一系列营销课程和技能培训,优势的话,个人觉得这里的这些课程并非是枯燥的理论知识,实用性都很强,即…

2021抖音舞教程_抖音舞蹈视频最近火2021教程

老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视频,点击底部的“+”,再点击左上角的上传视频。界面显示出手机里的所有视频,点击选中想要上传的视频,进入裁剪视频界面。在裁剪视频界面的底部视频帧处滑动视频,选择想要的视频帧段,选好后,点击右上角的下…

2021抖音短视频运营教程_抖音短视频2021最新版

如何做短视频运营短视频领域的魅力,势不可挡,钱途无量,吸引了很多同学和创业团队进军这个领域。从图片到动图再到短视频,互联网和手机端已经彻底改变了消费者的消费方式,从pc端转移到手机端是必然趋势。手机电量小,随身携带,移动端的限制,某一程度上限制了视频长度,加…

2021抖音短视频运营教程_2021抖音短视频旧版本

抖音如何运营,应该从哪里着手?抖音运营首先要做好几点:1、找到对标账户研究你的对标账户,看看他们怎么做的,内容是哪一种形式,通过研究10-20个对标账户,你一定可以确定自己账户后面该发哪一种内容。2、确定自己抖音号运营方向后开始实际操作先注册抖音号,然后随便刷刷,…

2021抖音短视频制作教程_抖音短视频怎么剪辑视频制作

拍抖音的特效是怎么弄来的?抖音怎么拍出抖动的效果?抖音中为什么别人的视频可以拍出抖动的效果,其实这个很简单,就抖音上就有这样的功能,不需要借助其他的软件,下面我们就来看下抖音是如何设置抖动特效的图文教程。抖音怎么设置抖动效果?1、打开抖音APP,点击“+”,打开…

2021抖音短视频制作教程_抖音唱歌短视频制作教程

抖音上很火的特效视频是怎么制作的,其实方法第一步:打开激萌相机(可以去安卓市场下载)第二步:点击「编辑」,进入导入素材界面第三步:导入视频素材,注意必须为竖屏的素材若是横屏,则出来的水晶球是椭圆形的第4步:选择贴纸功能第五步:点击「创意」,然后在其中找出「小…

2021抖音直播电影教程及方法

怎么在抖音上看直播电影?在抖音上看直播电影:1、首先在手机中打开抖音之后,点击上面的搜索一栏。2、然后在里面输入要观看的电影名字并选择有“在线观看”字眼的题目点击进入。3、接着点击话题后再点击电影进入。4、最后点击相关影片下面的电影进入就可以观看了。粉丝互动:…

2021抖音直播回放教程_抖音直播回放怎么删除教程

抖音怎么找正在直播的,直播怎么回看抖音直播无法显示解决方法:1、确定一下自己的网络是否正常,建议更换wifi或者关掉重新进入;2、确定主播正在直播哦,因为抖音直播是不支持回放的;3、提示“离开一会儿,请耐心等候”,是因为主播暂时离开了房间;4、提示“被主播踢出了房间…

2021抖音直播回放教程_抖音星动之夜2021直播回放

抖音怎么找正在直播的,直播怎么回看抖音直播无法显示解决方法:1、确定一下自己的网络是否正常,建议更换wifi或者关掉重新进入;2、确定主播正在直播哦,因为抖音直播是不支持回放的;3、提示“离开一会儿,请耐心等候”,是因为主播暂时离开了房间;4、提示“被主播踢出了房间…

2021抖音直播全套运营教程

抖音代运营是如何进行抖音短视频带货?一、如何开通商品橱窗?如果你也想通过抖音带货赚钱,想要做一个赚钱的抖音种草账号,那就千万不要错过下面的内容。申请入口: 打开抖音APP-搜索【电商小助手】账号-点击发消息进入私信界面-点击左下角【申请入口】,进入申请页面;申请条…

2021抖音热门舞蹈零基础教程_2021抖音舞蹈热门bgm

抖音里面可换成自己的照片拍同款怎么弄的1、手机开机,在手机桌面打开 抖音短视频。2、在抖音首页后,找到想要拍同款的视频,点击右下角 音乐。3、接下来需要在音乐页面,点击 拍同款,如下图所示。4、接下来需要在拍摄页面,点击 拍摄,如下图所示。5、接下来在开始拍摄视频后…

2021抖音沙雕视频教程_2021抖音火爆昵称沙雕

抖音怎么🈴️拍抖音视频合拍方法1、打开抖音,选择【我】页面;2、在【我】页面中,【作品】栏下找到你要合拍的短视频(这里小伙伴需要有自己想要同框的短视频,如果作品中没有的话,需要先上传作品哦,步骤:可以先在抖音中下载一段需要用到同框短视频,然后上传即可)3、在…

2021抖音最火舞蹈教程男

抖音上那个哦呐呐呐,哦呐呐呐到底什么歌我猜应该是哈瓦那,havana~ havana ooh na na应该是right nowbeautiful nowaloha heja he 请采纳。谢谢隔壁的泰山抖音上最火的10大舞蹈抖音上最火的10大舞蹈:1、爱的就是你这个手势舞最大的亮点就在于是两人一起组合,动作很甜蜜。两…

2021抖音最火的视频剪辑教程

抖音怎么剪辑视频 抖音剪辑视频教程方法抖音剪辑视频适用于上传本地视频的时候,本地拍摄的视频可以根据自己想要的效果进行剪辑,直接拍的话,在拍摄的时候就可以选择自己想要的效果,所以不用剪辑。1、在手机上找到并打开抖音短视频APP。2、进入抖音短视频App,点击下方的+号…

2021抖音最火的变装教程

变装假阴怎样使用这种问题果断先匿名再说~一般来说,网店上都是有说明的吧?既然你已经买了,那你应该知道它的结构了,其实这玩意也分很多种的~有3洞的,有2洞的,有1洞的~1洞的你就把YJ装进中间的那个小袋子里~2洞的放在他给你配的袋子里~3洞听说过,没见过,但应该和2洞差不…

2021抖音最火新舞教程

2021抖音最旺最好的名字1、气质尒莮亾、烈酒尽枯骨、一日看尽长安花、銱儿鎯筜、太阳暖人不暖心、帅到没朋友、若遇浅香、南馆潇湘、清酒暖心、蕞凉卟过朲杺、倾尽一生为你、以吾之姓冠汝之名、麦芽糖、情深致命、指间沙。2、两不相欠、终将拥有一片天、尛爷ミ半生沉浮、Miss维…

2021抖音最火慢动作手舞教程

2021抖音最旺最好的名字1、气质尒莮亾、烈酒尽枯骨、一日看尽长安花、銱儿鎯筜、太阳暖人不暖心、帅到没朋友、若遇浅香、南馆潇湘、清酒暖心、蕞凉卟过朲杺、倾尽一生为你、以吾之姓冠汝之名、麦芽糖、情深致命、指间沙。2、两不相欠、终将拥有一片天、尛爷ミ半生沉浮、Miss维…

2021抖音最火印度舞教程

跳印度舞最主要的步骤? 分三部分,一坐地板,二起身跳动,三结尾动作。第一部分:坐地板准备动作:坐地,右脚踩地、左腿回钩摆地;腰身立直、稍前倾;左手轻扶右小腿,右手中指点前额,注意舞蹈手型。音乐响起,开始:1)伸手、拉回、点额;伸手、拉回、点额;伸手、拉回、点额…

2021抖音最火十大舞蹈教程

舞蹈分解教程自己俩系练习抖音最火英文歌曲20201、Like I Would——Zayn Malik歌曲原唱者是男歌手Zayn Malik,这首歌的节奏感非常强,是抖音使用者跳舞时的常用BMG音乐。2、80000(Cover PRC 巴音汗)——叶辰歌曲的原唱者是说唱歌手巴音汗,妹子桑娜在抖音上翻唱了这首歌,因手…

2021抖音最火dj广场舞教程

抖音上最火的10大舞蹈抖音上最火的10大舞蹈:1、爱的就是你这个手势舞最大的亮点就在于是两人一起组合,动作很甜蜜。两人可以互动KISS这样更甜。2、heartbeat抖音heartbeat舞又叫做心跳舞,节奏感配上流畅的手势也是有趣到不行。3、panama这首歌是因为同音C哩C哩,所以被称为C…

2021抖音新年手势比心教程

爱心手势怎么做最标准?双手手背向上 四指并拢和拇指成60度角 双手食指相对 拇指相对 就行了 一个心形没那手式,那是紫钻的东西,不是爱心是紫钻形状很着急,希望大伙帮忙!新年快乐用手语怎么比划啊???我是学手语翻译的。新:左手平伸,手背朝上,右手伸出拇指,从左手手背…

2021抖音数据报告教程_2021年抖音用户数据报告

怎么把全民k歌的歌传到抖音想把全民K歌的歌传到抖音上面,直接把全民K歌的歌曲保存到本地相册就可以。具体步骤如下:1.第一步、首先,请登录全民K歌,并将你的歌曲“保存到手机”如图所示。2.第二步、退出全民K歌,打开抖音,点击底部的“+”。3.第三步、下一步,点击右下…

2021抖音教程课程百度网盘

老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视频,点击底部的“+”,再点击左上角的上传视频。界面显示出手机里的所有视频,点击选中想要上传的视频,进入裁剪视频界面。在裁剪视频界面的底部视频帧处滑动视频,选择想要的视频帧段,选好后,点击右上角的下…

2021抖音怎么剪视频教程_抖音怎么回顾2021

抖音视频怎么剪辑我们经常会在抖音里看到一些背景音乐比较魔性的视频,由于对它的音频感兴趣,但又不知道背景音乐是什么名字,这个时候许多人都会想要用音频编辑软件将音频从视频中提取出来,那么怎么提取音频呢?其实很简单,下面小编就来教大家希望大家都能够学会。1.首先我…

2021抖音开通橱窗教程_抖音开通商品橱窗条件

抖音橱窗开店怎么开通?抖音在前段时间上线了商品橱窗功能,让大家能够在在自己上传的视频或抖音主页里分享商品,从而赚取更多的收益。下面抖音商品橱窗的开通方法,希望能够帮助到你。抖音商品橱窗的开通步骤:1、其实开通商品橱窗的方法并不复杂,用户们需要进入抖音的个人中…

2021抖音开通橱窗教程_2021抖音橱窗为何关闭不了

抖音不够1000粉丝怎么开橱窗?不够1000粉丝量是无法开通橱窗权限的,只能自己到1000个或者买1000个具体操作如下分享你1.打开抖音app,进入点击右上角的三点图标;2.进入设置界面,找到并点击【帮助与反馈】3.进入界面,找到并点击【申请商品分享权限/其他问题】4.然后点击【商品…

2021抖音年度总结教程_抖音2021年度总结背景音乐

老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视频,点击底部的“+”,再点击左上角的上传视频。界面显示出手机里的所有视频,点击选中想要上传的视频,进入裁剪视频界面。在裁剪视频界面的底部视频帧处滑动视频,选择想要的视频帧段,选好后,点击右上角的下…

2021抖音年度总结教程_2021抖音年度总结大会

2021抖音最旺最好的名字1、气质尒莮亾、烈酒尽枯骨、一日看尽长安花、銱儿鎯筜、太阳暖人不暖心、帅到没朋友、若遇浅香、南馆潇湘、清酒暖心、蕞凉卟过朲杺、倾尽一生为你、以吾之姓冠汝之名、麦芽糖、情深致命、指间沙。2、两不相欠、终将拥有一片天、尛爷ミ半生沉浮、Miss维…

2021抖音小店开通教程_抖音小店2021新规

现在的抖音小店的开通条件是什么?开通抖音小店有一个前提条件就是已完成抖音企业认证,获得蓝V标识,抖音账号粉丝在30万以上,资质齐全、有淘宝、天猫或京东第三方平台店铺可以加入抖音小店,但是店铺的各个评分要在4.7以上,淘宝店铺的等级要在1钻以上。入驻成功并且开通了抖…

2021抖音奇旅教程_2021抖音奇旅背景音乐

抖音怎样传多张照片?首先打开【抖音短视频】APP,然后点击点击底部【+】图标,接着点击【上传】再点击【照片】,这里勾选多张照片,勾选完成后点击【确定】即可;还可以在拍摄页面点击底部【影集】,选择喜欢的模板,点击【使用】,勾选多张照片,点击【确定】即可。抖音App是…

2021抖音奇旅教程_2021抖音奇旅怎么看

抖音主播说先垫付购买99元商品,15天后确认收货就返还本金,商品还免费送给我了是骗局吗?天上不会无缘无故掉馅饼,几块钱的东西,还有可能是商家为了跑量或者刷好评,当作赠品无偿赠送,99元的话,不可能的,成本太高了。假的,要不轻易相信你好!天上不会无缘无故掉馅饼,几…

2021抖音卡直播广场教程_2021抖音可以直播王者荣耀吗

抖音上怎么选卡拉ok模式?1、首先小伙伴们先自己的手机上的其他软件拍好自己唱歌的音乐短视频。 2、然后打开抖音短视频软件,点击下方的“+”号。 3、在音乐库界面点击上方的“上传视频”。 然后选择自己之前拍好的音乐短视频,点击打开。 4、在下方可以对短视频进行一些相对…

2021抖音书单教程_抖音动态书单制作教程

有哪位大神知道抖音书单用什么软件制作,书单模板从哪里来?1.首先,我们打开美册,进入美册的2.特效视频入口里的很多模板,都是轻松上手的抖音爆款视频;特效视频,点击开始制作;4.把找来的文字一键替换,然后将段落格式调整好保存;5.再添加自己喜欢的图片;预览一键合成,…

2021抖音书单教程_抖音做书单详细教程

抖音里面可换成自己的照片拍同款怎么弄的1、手机开机,在手机桌面打开 抖音短视频。2、在抖音首页后,找到想要拍同款的视频,点击右下角 音乐。3、接下来需要在音乐页面,点击 拍同款,如下图所示。4、接下来需要在拍摄页面,点击 拍摄,如下图所示。5、接下来在开始拍摄视频后…

2021抖音上传高清视频教程

用手机相机拍了一段视频想上传到抖音,可是抖音不支持1080p的分辨率,怎么办?跪求大神,感谢🙏这种情况只能压缩视频画质了一般是支持720p画质你可以使用视频编辑软件压缩一下下次拍摄可以在设置调整为720p的用读卡器或数据线连接到电脑上,再把你要上传的视频弄出来再在ku6…

2021年的抖音怎么发视频教程

怎么发抖音视频一、打开手机抖音,点开你喜欢的抖音视频,点击右下方的一个转圈圈的图标。二、点开之后,进入这条视频的首页,就可以看到下方有一个拍同款的按钮。三、点击拍同款,在拍摄页面的左下方有一个道具。四、点击道具,可以选择你喜欢的主题,然后点击下载使用。五、…

2021年最流行舞蹈抖音教程_2021年最流行的舞蹈

别爱我,没结果,除非花手摇过我。什么意思?意思是然没有结果就不要爱了。2018年流行的非主流色彩的表情包文字。2019年在抖音上因为“花手摇(双手手腕相贴绕手花)”舞蹈视频中带上的顺口溜再次火起来:“别爱我没结果除非花手摇过我”。大概是说我不谈恋爱,只想专注于我的…

2021年最流行舞蹈抖音教程_2021年抖音最流行的舞蹈视频

林俊杰〈不潮不用花钱〉舞蹈动作教学双手不要动,摇摆舞是没有手的动作的,把手放在口袋里,这样显得比较帅气。基本动作是左右晃肩膀,注意用的腰的力量,是由腰带动肩膀在动。练习一下。OK。现在加上脚的动作,就是脚往前睬半步。这个动作看视频应该很好理解,同时加上肩膀往…

2021年抖音黄金提炼教程

如何将含金废液中黄金提取.因此, 在首饰行业必须要考虑从废液中回收黄金的问题。 v 一般酸性电镀废液中的含金量为4~12g/L,v 碱性电镀废液中的含金量为20g/L。但是,上述废液中均含有大量的氰化物,具有毒性。回收黄金后必须对废液进行去毒处理,绝不能回收黄金后就直接将毒液…

2021年抖音最火钢琴曲教程

抖音最火的钢琴曲是哪首?《告白之夜》和《Wewillrockyou》。《告白之夜》这首曲子取材于《竹取物语》,是专辑《CHRONICLEⅤ》的主打歌。以辉夜姬向养育自己的双亲说明自己是月亮上的人,并且马上要回月亮的场景作为模型,写下了这首曲子。作曲是覆面组合“nowisee”。在日本,…

2021年抖音最火的舞蹈的教程

抖音上最火的10大舞蹈抖音上最火的10大舞蹈:1、爱的就是你这个手势舞最大的亮点就在于是两人一起组合,动作很甜蜜。两人可以互动KISS这样更甜。2、heartbeat抖音heartbeat舞又叫做心跳舞,节奏感配上流畅的手势也是有趣到不行。3、panama这首歌是因为同音C哩C哩,所以被称为C…

2021年抖音怎么赚钱教程_抖音怎么回顾2021

抖音短视频怎么赚钱?内容和方向一定要垂直,这样才方便账号后续引流、赚钱、变现。目前抖音比较热门的类目有美食、搞笑、历史、推理等等。你可以先从这几个领域切入,当然,最重要的是一定要做你擅长和感兴趣的领域,因为只有这样才能做到后续内容的持续输出。确定好方向之后…

2020最火抖音教程_2020抖音最火的顺口溜

怎样才能让视频上抖音热门首先你得弄清楚抖音的规则机器任何+人工双重审核当一个视频初期上传,平台会给你一个初始流量,如果初始流量之后,根据点赞率,评论率,转发率,进行判断:该视频是受欢迎还是不受欢迎,如果第一轮评判为受欢迎的,那么他会进行二次传播。当第二次得到…

2020最火抖音教程_2020抖音最火的英文名

抖音怎么能快速上热门?据杭州抖吧了解,随着抖音用户的活跃量逐渐增大,不少的人也选择加入抖音,只要是玩抖音的,没有哪个是不想上热门,收获成千上万的赞、评论还有粉丝。但是,热门不是你想上,想上就能上。抖音如何上热门,下面几点是必备的。1.蹭热门的话题给大家看一个…

2020最新抖音运营教程_2020最新设计抖音号

抖音运营规则和技巧具体有哪些。第一步,定位风格人群定位好,也就是说你要面对的是那一类人,最好心里有个数突出你的特色,比人凭什么要看你的视频第二步,输出内容,视频要好,如果不会到该如何拍摄视频的话可以参考一下比较热门的视频,加上自己的特色第三步,制定计划,什…

2020最新抖音运营教程_2020最新抖音号数字

如何玩转抖音运营?想要玩转抖音,运营好自己的抖音账号,方法有很多。比如跟随热点,跟随大众,走模仿路线。或者走自己的路,弄自己擅长的风格,让别人来模仿自己。在火起来之前,前期是要好好经营的,尽量不要出现违规的视频。如果你的抖音账号走模仿路的话,我可以推荐你看…

2020最佳抖音绿幕教程_2020年抖音发布最佳时间

抖音里面的绿幕视频怎么做的?简单直接的可以绿色背景自己拍。或者对视频用一些软件进行修改。把背景扣去替换成绿色,越有耐心,扣的越精细,效果越好。手机我不知道有什么软件比较好,但是电脑的话ae应该可以。你可以先去学一下那个是拍视频,使用的特效。首先你需要一个剪辑…

2020抖音热歌舞蹈教程_抖音热歌排行榜2020歌单

抖音上最火的10大舞蹈抖音上最火的10大舞蹈:1、爱的就是你这个手势舞最大的亮点就在于是两人一起组合,动作很甜蜜。两人可以互动KISS这样更甜。2、heartbeat抖音heartbeat舞又叫做心跳舞,节奏感配上流畅的手势也是有趣到不行。3、panama这首歌是因为同音C哩C哩,所以被称为C…

2020抖音最火背景图教程

抖音上传视频这种背景是怎么做到的手机里的软件就可以做出来的,我把教程的具体操作方法,一定要好好看哦!1.打开首页之后,点击制作开始制作视频2.可以看到里面的功能很多,然后点击故事视频3.接下来选择一段视频,截取时长和段落4.接下来就开始正式操作了,这个页面上方可以调…

2020抖音最火的视频教程

抖音火🔥了,为啥火了?里面只有吃喝玩乐!在全网日活用户增长最快的APP中,抖音、火山、快手、西瓜四款短视频类APP全部入围,其中抖音博得头筹。趣味搞笑、实用技能、生活展示多样化的视频内容满足了广大群众窥探、猎奇、求知的欲望,大大的挤压人们的生活时间。据说短视频…

2020抖音最火的一首舞教程

抖音上最火的10大舞蹈抖音上最火的10大舞蹈:1、爱的就是你这个手势舞最大的亮点就在于是两人一起组合,动作很甜蜜。两人可以互动KISS这样更甜。2、heartbeat抖音heartbeat舞又叫做心跳舞,节奏感配上流畅的手势也是有趣到不行。3、panama这首歌是因为同音C哩C哩,所以被称为C…

2020抖音最火歌曲跳舞教程

老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视频,点击底部的“+”,再点击左上角的上传视频。界面显示出手机里的所有视频,点击选中想要上传的视频,进入裁剪视频界面。在裁剪视频界面的底部视频帧处滑动视频,选择想要的视频帧段,选好后,点击右上角的下…

2020抖音手机直播游戏教程_2020抖音直播用什么手机

抖音直播游戏怎么操作?(已开通直播权限,需要知道怎么操作,下载什么软件,越详细越好)抖音不会开放游戏直播权限给个人了,风险太大,万一你放版权视频或者禁播游戏就要承担法律风险。除非你有工会推荐或者粉丝量保证,即便如此违规直播禁播游戏和视频一经查实直接封号,能给…

2020抖音手工制作教程_抖音最火手工制作教程

抖音怎么制作1、手机打开剪映,然后点击开始创作,选择要剪辑的视频。2、打开视频后,点击左下角的“剪辑”,就可以把不要的部分删除。3、还可以设置视频变速,调整音量,添加音乐等等。4、编辑好视频后,点击右上角的导出,然后上传抖音即可。最好是自己拍的原创作品,有内容…

2020抖音卡点视频教程

抖音卡点视频如何制作图文+视频版 ?有教程吗?话不多说,直接进入正题。首先,图片轮播类的视频该怎么做?步骤一:选择一张素色背景,或是你心仪的背景,但你要知道这张背景的色调一定要配合接下来你的几张轮播图;步骤二:准备好你的轮播图片(至少五张),图片尺寸一致,记…

2020抖音上最火的教程

抖音上很火的特效视频是怎么制作的,其实方法第一步:打开激萌相机(可以去安卓市场下载)第二步:点击「编辑」,进入导入素材界面第三步:导入视频素材,注意必须为竖屏的素材若是横屏,则出来的水晶球是椭圆形的第4步:选择贴纸功能第五步:点击「创意」,然后在其中找出「小…

2020抖音7天养号教程_2020年抖音养号新规则

抖音养号技巧有哪些?抖音新注册0-7天这个阶段,有哪些注意事项,李君羊在为大家重新总结下。1.养号期间不能只看,而不点。2.养号期间,当下这台手机就是主手机,不要来回切换。3.切记养号期间,不要发作品,修改资料,加广告。4.只看自己喜欢的作品,该双击,评论,点赞,关注…

2020年的抖音教程_2020年抖音用户数据

抖音怎么制作1、手机打开剪映,然后点击开始创作,选择要剪辑的视频。2、打开视频后,点击左下角的“剪辑”,就可以把不要的部分删除。3、还可以设置视频变速,调整音量,添加音乐等等。4、编辑好视频后,点击右上角的导出,然后上传抖音即可。最好是自己拍的原创作品,有内容…

2020年抖音网红舞背面教程

怎么把全民k歌的歌传到抖音想把全民K歌的歌传到抖音上面,直接把全民K歌的歌曲保存到本地相册就可以。具体步骤如下:1.第一步、首先,请登录全民K歌,并将你的歌曲“保存到手机”如图所示。2.第二步、退出全民K歌,打开抖音,点击底部的“+”。3.第三步、下一步,点击右下…

2020年抖音直播游戏教程_抖音年度盛典2020直播完整版

手机抖音怎么用手机直播刺激战场买直播套装设备,然后连上电脑发邮件申请,安装直播软件就可手机抖音直播。需要拥有直播权限才可以直播游戏。发邮件申请,开通直播权限后再使用录屏软件进行直播游戏。你直接按快手直播切掉,再换刺激战场就行了下载“小熊录屏”就行了。抖音怎…

2020年抖音直播游戏教程_2020年抖音直播要求

抖音怎么直播玩游戏?打开抖音APP,然后击页面下方的+号,之后选择直播模式,再点击开始游戏直播,会得到一个地址,点击复制地址,打开小熊录屏软件,然后点击页面下方的去开启,把刚在抖音复制的地址,粘贴到搜索栏上,就可以开始直播了。具体操作步骤如下:以OPPO手机为例:…

2020年抖音新出漫画脸教程

漫画脸的画法男女生的脸部构造主要是眼睛、嘴巴、头发!你在画动漫人物时先在之上画一个椭圆形,然后,在椭圆的中间较上方画一个十字,但不能乱画,十字是固定眼睛看的方向和眼睛的位置!中间的十字的竖线最重要,这是固定脸型的均匀的十字线!眼睛的画法左眼和右眼不是一样的…

2020年抖音十大网红歌曲教程

抖音最火英文歌曲20201、Like I Would——Zayn Malik歌曲原唱者是男歌手Zayn Malik,这首歌的节奏感非常强,是抖音使用者跳舞时的常用BMG音乐。2、80000(Cover PRC 巴音汗)——叶辰歌曲的原唱者是说唱歌手巴音汗,妹子桑娜在抖音上翻唱了这首歌,因手势舞太好看而引起了广泛的…

2020年抖音上最火的歌教程

2020抖音最火歌曲有什么?1、《最美的期待》 周笔畅2、《那个人》 周延英3、《Panama》 Matteo4、《病变》 鞠文娴5、《PLANET》 日韩组合ラムジ6、《有可能的夜晚》7、《好嗨哟》8、《盗将行》9、《下坠》10、《水星记》抖音短视频,是一款音乐创意短视频社交软件,由今日头条…

2019的抖音教程_抖音神曲2019

抖音卡点视频如何制作图文+视频版 ?有教程吗?话不多说,直接进入正题。首先,图片轮播类的视频该怎么做?步骤一:选择一张素色背景,或是你心仪的背景,但你要知道这张背景的色调一定要配合接下来你的几张轮播图;步骤二:准备好你的轮播图片(至少五张),图片尺寸一致,记…

2019最火抖音歌曲钢琴教程

 20 求一首欢快的钢琴曲,简谱是5135456757123,最后那个123是高音。这是理查德 克莱德曼演奏过的名曲之一,叫《瓦妮莎的微笑》(塞内维尔 作曲)。 从网上搜索曲名,就能证实这是你所需要的乐曲。降23671i33221121671722117717564746776655651253221715322171454677665565…

2019拍抖音教程_网络歌曲2019抖音

拍抖音都有哪些技巧?对于很多人来说,偶尔出一个爆款视频并不是特别难的事情,但想做到持续生产爆款视频,却不是一件简单的事。那抖音运营技巧都有哪些呢? 一、树立用户思维,钻进用户的脑子里 每个人玩抖音都有自己目标和想法:作为我们想这些通过抖音赚钱的人来说,可能就…

2019抖音网红舞蹈教程

抖音上最火的10大舞蹈抖音上最火的10大舞蹈:1、爱的就是你这个手势舞最大的亮点就在于是两人一起组合,动作很甜蜜。两人可以互动KISS这样更甜。2、heartbeat抖音heartbeat舞又叫做心跳舞,节奏感配上流畅的手势也是有趣到不行。3、panama这首歌是因为同音C哩C哩,所以被称为C…

2019抖音电商系列教程_抖音电商2019年交易额

抖音电商引流怎么做踩准抖音的三个核心逻辑,增长水到渠成抖音用户聚焦于18-24岁的年轻群体,它不是千人千面的,但却是可以从一线城市打入四五线城市的APP,而淘宝和京东之类无法做到。在有了清晰的用户群体定位之后,就社交电商而言,一切营销都是内容的营销。抖音的内容规律…

2019抖音电商系列教程_抖音电商2019年gmv

微信显示青少年模式怎么取消微信上线青少年模式“摇一摇”、“附近的人”等功能将不可访问抖音自10月9起“封杀”第三方平台洋葱集团旗下喵选供应链将入局抖音电商 知乎上线视频创作工具图文可自动生成视频同时还具备一键配音功能搜一下:微信显示青少年模式怎么取消打开微信,通…

2019抖音游戏直播教程_2019抖音年度盛典直播

抖音怎么直播玩游戏?打开抖音APP,然后击页面下方的+号,之后选择直播模式,再点击开始游戏直播,会得到一个地址,点击复制地址,打开小熊录屏软件,然后点击页面下方的去开启,把刚在抖音复制的地址,粘贴到搜索栏上,就可以开始直播了。具体操作步骤如下:以OPPO手机为例:…

2019抖音淘客赚钱教程_抖音淘客真的赚钱吗

抖音淘客在粉丝量比较低的时候就可以赚钱了么其实做抖音淘客,在粉丝量不多时,只要发布过10个抖音视频就可以带货了,不过做抖音带货,最好能找到一些优质的商品,最好是别人已经在抖音上带爆过,那样就直接可以拿那商品仿照对方的视频进行拍摄和发布。所以做抖音淘客最好能借…

2019抖音最红瘦身舞教程

抖音上最火的舞蹈是什么 抖音最受欢迎的舞蹈介绍抖音作为一款时下热门的APP,几乎每个年轻人都在玩。如今DJ抖音网上的热门舞蹈有很多,但如何在很短的时间内吸引人们的注意这是最为关键的。搜集了2018抖音十大热门舞蹈排行榜,让我们一起来看看抖音DJ最火的舞蹈有哪些吧。1. 抖…

2019抖音最红瘦身操教程

2019抖音流行纯音乐1、《River Flows In You》《River Flows In You》在2019抖音十大神曲纯音乐中它有着两个版本在,节奏上比较慢的给人柔情似水的感觉,节奏少稍为欢快的也不乏柔美的感觉,可以说是具有着很浓厚的个人情感。2、《Horizon》《Horizon》 这首只在前奏上就能让人…

2019抖音最热舞蹈教程

抖音,上热门是什么意思一、抖音规则要清楚。首先,抖音分为两种视频上传方式。1、直接拍摄上传2、本地视频上传知识点:本地视频上传默认为原声,但是在原声的基础上也是可以添加音乐的!适用于想让别人知道用了什么BGM。二、创意优先。熟悉了抖音的规则后,就需要一个好的创意…

2019抖音最火舞蹈教程

谁有又简单又好看的舞蹈视频啊(一个星期能学会)韩国一个组合的!wonder girls 的 nobody蛮好跳的 =.html看看行不我作个总结吧韩国的组合舞蹈都很适合单人跳因为动作的衔接都很好。首先是上述提到的WONDER GIRLS.她们的舞蹈特点是,性感大于可爱,舞蹈中腰腹部的WAVE很多,所…

2019抖音最火系鞋带教程

好看系鞋带方法◇时尚鞋带系法 大家不妨试一试 很简单的(超个性) 引用地址: ◇20种鞋带+14种鞋带头个性系法(全)系鞋带如何才能系紧? 教你一招,找两颗小珠子之类的东西,穿在两边鞋带里,再按通常方法打结。在走路的时候,脚一踢一踢的,两颗小珠子由于向心力产生反作用力—…

2019抖音最火的教程_2019年抖音最火的歌曲有哪些

怎么把全民k歌的歌传到抖音想把全民K歌的歌传到抖音上面,直接把全民K歌的歌曲保存到本地相册就可以。具体步骤如下:1.第一步、首先,请登录全民K歌,并将你的歌曲“保存到手机”如图所示。2.第二步、退出全民K歌,打开抖音,点击底部的“+”。3.第三步、下一步,点击右下…

2019抖音最火指甲教程

怎么涂指甲油好看的视频在涂指甲油之前,请你先确定一下手有没有洗干净、擦干或者涂有油脂。在涂指甲油之前,先放好底层用指甲油、修饰笔、透明指甲油在旁边准备着。首先,先涂上一层指甲油在底层,除了让指甲的持久性更强之外,也让其它的指甲油涂上去的时候会更顺,同时,隔…

2019抖音最火广场舞教程

抖音上那个哦呐呐呐,哦呐呐呐到底什么歌我猜应该是哈瓦那,havana~ havana ooh na na应该是right nowbeautiful nowaloha heja he 请采纳。谢谢隔壁的泰山老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视频,点击底部的“+”,再点击左上角的上传视频。界面…

2019抖音教程各种技术流_抖音加入淘宝链接教程 2019

抖音如何引流?如何变现?接下来就给大家介绍一下一些建议步骤:其实做抖音并不是很难,难的就在于,网络上已经有通篇的营销技巧和玩转抖音的教程,就算依照这些做抄法去操作,还是一如之前的模样,账号还是不见起色。这个时候,最好还是反思一下,自袭己的账号在之前有没有做…

2019抖音教程各种技术流_2019抖音头像设置透明教程

抖音如何引流?如何变现?接下来就给大家介绍一下一些建议步骤:其实做抖音并不是很难,难的就在于,网络上已经有通篇的营销技巧和玩转抖音的教程,就算依照这些做抄法去操作,还是一如之前的模样,账号还是不见起色。这个时候,最好还是反思一下,自袭己的账号在之前有没有做…

2019抖音情人节教程_抖音情人节红包教程

情人节快到了 我在网上怎么给女朋友惊喜呀 大家教教我嘛在网上不会很浪漫的。我有一个电影里的电子。让你的死党在网上和她聊天。(记住一定是死党!别找不信任的人,否则他们说什么我可不负责)然后事先想好调情的语气。让你死党想被台词似地和她聊。把她带到语言胡同,封死出…

2019年抖音街舞教程

breaking街舞教程,从简单的开始学,低难度的基本步。 也就是摇滚步。六部.十二步。风车。头转 。托马斯。 然后练倒立。找平衡。多点体能训练。臂力很重要.你现在就可以到百度视频、搜索按照我给你的顺序查找后边加上教学或者教程!~就可以了。慢慢看。希望你能成为一名出色的…

2019年抖音最火舞蹈教程

老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视频,点击底部的“+”,再点击左上角的上传视频。界面显示出手机里的所有视频,点击选中想要上传的视频,进入裁剪视频界面。在裁剪视频界面的底部视频帧处滑动视频,选择想要的视频帧段,选好后,点击右上角的下…

2018抖音鬼步舞教程_抖音跳鬼步舞的背景音乐

鬼舞步教程(每个舞步)详细点。只要文字。注明。只要文字!1滑步(包括侧滑),2跨步,3旋转我不会速求 奇术色医 1149 ?炫舞怎么把角色删除鬼步舞奔跑文字教学(详细一点)首先抬起左脚(右脚也行),尽量抬到90!然后踩下去,踩下去的同时右脚向后滑!接着是左脚向后滑,同时…

2018抖音鬼步舞教程_friendships抖音鬼步舞原版

鬼步舞奔跑文字教学(详细一点)首先抬起左脚(右脚也行),尽量抬到90!然后踩下去,踩下去的同时右脚向后滑!接着是左脚向后滑,同时右脚抬起…然后右脚踩下去,左脚向后滑!就这样重复就行了!【建议你去优酷下载视频回来学!视频更容易看懂!】希望采纳!干嘛不看视频勒,一…

2018抖音舞教程_2018抖音手势舞女生

怎么把全民k歌的歌传到抖音想把全民K歌的歌传到抖音上面,直接把全民K歌的歌曲保存到本地相册就可以。具体步骤如下:1.第一步、首先,请登录全民K歌,并将你的歌曲“保存到手机”如图所示。2.第二步、退出全民K歌,打开抖音,点击底部的“+”。3.第三步、下一步,点击右下…

2018抖音短视频教程_抖音短视频教程是真的假的

抖音怎么剪辑视频 抖音剪辑视频教程方法抖音剪辑视频适用于上传本地视频的时候,本地拍摄的视频可以根据自己想要的效果进行剪辑,直接拍的话,在拍摄的时候就可以选择自己想要的效果,所以不用剪辑。1、在手机上找到并打开抖音短视频APP。2、进入抖音短视频App,点击下方的+号…

2018抖音短视频教程_怎样上传抖音短视频教程

抖音怎么剪辑视频 抖音剪辑视频教程方法抖音剪辑视频适用于上传本地视频的时候,本地拍摄的视频可以根据自己想要的效果进行剪辑,直接拍的话,在拍摄的时候就可以选择自己想要的效果,所以不用剪辑。1、在手机上找到并打开抖音短视频APP。2、进入抖音短视频App,点击下方的+号…

2018抖音求婚视频教程

老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视频,点击底部的“+”,再点击左上角的上传视频。界面显示出手机里的所有视频,点击选中想要上传的视频,进入裁剪视频界面。在裁剪视频界面的底部视频帧处滑动视频,选择想要的视频帧段,选好后,点击右上角的下…

2018抖音最火拍灰舞教程

什么叫流行舞蹈?流行舞蹈(网络代名词)指网上热门流传的舞蹈,舞步较为简单,授与大众。比如海草舞、dura舞蹈、手势舞、拍灰舞、开车舞、捣蒜舞、朱碧石舞等等。1、海草舞BGM:海草舞海草舞,网络流行词,是抖音上面很火的一种舞蹈,它的背景音乐源于《社会摇》原创作者萧全最…

2018抖音最火刘海教程6

刘海怎么剪好看 6款刘海造型搭配技巧★★★☆☆活力动感的大卷,充满了春日活力与激情,带有光圈的内弯轮廓也是必不可少的。#p#副标题#e#A型丰盈卷发+轻盈弯曲刘海绝美度:★★★☆☆厚重的发量感营造出饱满的A型轮廓,如花朵般的丰盈卷度非常吸引眼球,为了符合春日氛围,所以…

2018抖音快闪ppt教程_如何制作抖音ppt快闪教程

快闪ppt怎么做壹周PPT一直想出一篇比较详细的快闪PPT制作教程,也因为某些原因一直拖着没出。今天就为大家详细来讲解一下快闪PPT的制作过程,希望能帮助到你!提及快闪PPT,我们许多人大概都能想到一个词“cool”,不错,这种幻灯片确实能给我带来不错的视觉体验!话不多说,我…

2018抖音同款舞蹈慢动作教程

honey郭书瑶舞蹈教学 慢动作和镜面分解由于这首歌出了不久、 所以教学版的只有一只跳、 并没有分解动作 、 但是郭书瑶在HITO暑期热舞社里面教过三个男的 、里面有HONEY的重要动作分解、其余的动作要领自己领悟吧。 抖音上最火的10大舞蹈抖音上最火的10大舞蹈:1、爱的就是你这…

2018抖音串烧舞教程_2018抖音串烧歌词

串烧舞蹈,怎么衔接可以连接,不过要在中间加几个动作,要有个过门。每首歌剪接一分多钟就好了。很轻松的音乐,跳起来很欢快,当时气氛是最好的请问,把歌曲剪辑合成做成串烧形式有什么技巧么?就如同抖音那种~谢谢!1. 个人觉得要么歌词之间有关联,要么至少切换的歌曲不会显…

2017抖音短视频教程_抖音短视频宠物视频教程

抖音怎么录屏别人直播1、首先打开手机抖音,点击进入“直播”,如下图所示。2、然后点击直播界面右下角的“”按钮,点击弹出窗口中的“录屏”,如下图所示。3、接着在打开的页面中,点击底部中心“红色按钮”开始录制,如下图所示。4、录屏完成,点击“存为草稿”或者“发布”…

2017抖音短视频教程_怎样上传抖音短视频教程

怎么发抖音视频一、打开手机抖音,点开你喜欢的抖音视频,点击右下方的一个转圈圈的图标。二、点开之后,进入这条视频的首页,就可以看到下方有一个拍同款的按钮。三、点击拍同款,在拍摄页面的左下方有一个道具。四、点击道具,可以选择你喜欢的主题,然后点击下载使用。五、…

2017-2019抖音教程_2017到2019的情感抖音

老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视频,点击底部的“+”,再点击左上角的上传视频。界面显示出手机里的所有视频,点击选中想要上传的视频,进入裁剪视频界面。在裁剪视频界面的底部视频帧处滑动视频,选择想要的视频帧段,选好后,点击右上角的下…

200g抖音营销教程资料包

求《抖音营销138招:一本书教会你玩赚抖音》全文免费下载百度网盘资源,谢谢~《抖音营销138招:一本书教会你玩赚抖音》百度网盘pdf最新全集下载:?pwd=59ih提取码:59ih简介:抖音营销138招:一本书教会你玩赚抖音,抖音营销,抖音运营,短视频营销;融合多种流量理论,汇集经典吸粉…

2002舞蹈视频抖音教程_抖音猩猩舞蹈视频

手机什么软件可以制作舞蹈视频常用的视频,短视频,直播软件都是可以的,像什么抖音啊,快手都是可以的。但是如果你是要编辑专业一点的,可以选择快影啊,或者巧影啊,还有vlue之类的都是可以的,有背景音乐,字幕,还有调色。先编辑视频,会声会影或者系统自带的movie make,…

2002舞蹈分解教程抖音_抖音舞蹈分解动作教程

抖音上那个哦呐呐呐,哦呐呐呐到底什么歌我猜应该是哈瓦那,havana~ havana ooh na na应该是right nowbeautiful nowaloha heja he 请采纳。谢谢隔壁的泰山抖音怎么做原创音乐1、抖音上传音乐需要有一个链接,先把视频传到百度云,分享以获取链接,如下图所示:2、打开抖音,点…

1分钟抖音烹饪视频教程_抖音上传高清视频教程

请问抖音上的那些视频(当然是稍微复杂的,比如饮食的,制作教程的等等)都是怎么做出来的呢?其实都很简单,但很繁琐,就是视频分成几个小片段分别拍摄,后期剪切,加特效。总体来说就是在有限的时间内,用片段的方式来说你的故事。视频拍的好还需要有创意,外加拍摄的技巧,…

1分钟抖音k歌小视频制作教程

抖音怎么制作1、手机打开剪映,然后点击开始创作,选择要剪辑的视频。2、打开视频后,点击左下角的“剪辑”,就可以把不要的部分删除。3、还可以设置视频变速,调整音量,添加音乐等等。4、编辑好视频后,点击右上角的导出,然后上传抖音即可。最好是自己拍的原创作品,有内容…

19张照片抖音教程_抖音能发多少张照片

抖音怎样传多张照片?首先打开【抖音短视频】APP,然后点击点击底部【+】图标,接着点击【上传】再点击【照片】,这里勾选多张照片,勾选完成后点击【确定】即可;还可以在拍摄页面点击底部【影集】,选择喜欢的模板,点击【使用】,勾选多张照片,点击【确定】即可。抖音App是…

19张照片抖音教程_抖音七十八张照片怎么弄的

抖音78张照片vlog这种卡点视频是怎么做的?有教程吗?你是说1-3张0.3秒,第4张0.4秒,5-7张0.3秒……76-78张0.4秒这种教程嘛??!其实也没有很麻烦呢,也就是剪完一支视频,今年的双十一也不必参与了,因为手已经没了 说真的,卡点帅归帅,难也是真的难,精确到秒数的剪辑不仅…

19年抖音回顾教程

下载抖音短视频。1、您可以在电脑浏览器上打开搜索【抖音】,进入抖音的官网,在右下角选择手机的系统版本,或者是扫描二维码进行下载;安卓可以下载到电脑上然后将apk安装包拖到手机上进行安装;2、在手机的应用商城搜索【抖音】;3、点击进入应用的介绍页面,然后选择下载即…

19岁的你好抖音教程

抖音未满十八周岁已经登陆那怎么可以解开?上传已经满岁的身份证验证,解除当前不满实际年龄的登录账号,并注销。为了认证之后不符合这个年龄段的话,会被限流的,就是你玩够一定时间的话,就没有办法再玩儿了。首先打开抖音app,找到我,找到右上角的≡,然后点进去下拉找到设…

1995加25抖音教程

抖音上那个出生日期加年龄怎么弄的?抖音上那个出生日期加年龄的话,一般都是自己设置的或者是一种特效,你去看看特效里面有没有。你打电话给腾讯问有没有人用这个号啊?没有的话你就和腾讯的人进行商量,交易老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视…

18年的抖音运镜教程

老铁,抖音短视频的视频编辑怎么做😊首先,在手机上打开抖音短视频,点击底部的“+”,再点击左上角的上传视频。界面显示出手机里的所有视频,点击选中想要上传的视频,进入裁剪视频界面。在裁剪视频界面的底部视频帧处滑动视频,选择想要的视频帧段,选好后,点击右上角的下…

18年的抖音舞蹈教程_抖音韩国舞蹈2022年

抖音上最火的10大舞蹈抖音上最火的10大舞蹈:1、爱的就是你这个手势舞最大的亮点就在于是两人一起组合,动作很甜蜜。两人可以互动KISS这样更甜。2、heartbeat抖音heartbeat舞又叫做心跳舞,节奏感配上流畅的手势也是有趣到不行。3、panama这首歌是因为同音C哩C哩,所以被称为C…

18年的抖音舞蹈教程_2022年抖音流行舞蹈

2018 年抖音很火的歌曲有哪些,越多越好1、星球坠落《星球坠落》是李佳隆、艾热在综艺节目《中国新说唱》中1V1对抗赛演唱的歌曲。该作品获得2018说唱金曲颁奖盛典TOP榜年度金曲TOP1,以及斩获QQ音乐TOP1单曲、酷狗音乐最受欢迎单曲奖、酷我音乐最强屠榜金曲以及网易云音乐说唱…

18年抖音bgm教程最喜欢用的

2018抖音上最火的歌曲2018抖音最火的歌曲点此立领1元红包摩挲了好半天棺木的外婆,小脚颤巍巍踱进敞院,心满意足地坐在靠椅上暖风掀起构树果腐烂的气息混合新木的桐油味如果风再大点,还可以带来远处田野的芬芳这是某年秋日的午后,我刚满九岁对生死尚无概念嗯……1.病变 2.体…

18岁的样子抖音教程

如果你18岁,要伪装成21岁的样子去参加工作,能跟他们合得来么,总感觉自己稚气未脱自己相信自己别人才会相信你,不用伪装啊,是多少就是多少,你18岁就可以像20几岁的样子参加工作,证明你的能力。也是证明你是能力的时候,你只是比别人后了一步,但也意味着你能有发展机会跟…

18岁的你好我是抖音教程

抖音直播间刷的涂鸦礼物是怎么画的?抖音不是所有人都可以涂鸦的,目前好像只有一部分人(账号)可以做到,而且还得使用比较新的版本,老版本抖音不支持涂鸦功能抖音直播间刷的涂鸦礼物是怎么画的,怎么画的可还行,网上搜教程好了,三言两句也说不清楚可能是抖音卡住了,也可…

17抖音网红视频教程

抖音上很火的特效视频是怎么制作的,其实方法第一步:打开激萌相机(可以去安卓市场下载)第二步:点击「编辑」,进入导入素材界面第三步:导入视频素材,注意必须为竖屏的素材若是横屏,则出来的水晶球是椭圆形的第4步:选择贴纸功能第五步:点击「创意」,然后在其中找出「小…

1688铺货到抖音小店教程_阿里巴巴1688怎么铺货到抖音

如何一键开启抖音小店?上架商品到抖音小店呢?1.抖音小店如何开通呢?必须要先开通抖音橱窗,然后去抖音app里面单独申请。申请方式如下:1.1进入“我”——“我的商品橱窗”1.2点击右上角“电商工具箱”1.3点击“开通抖音小店”上传商品到抖音小店可以用甩手上货助理抖音版的…

1688铺货到抖音小店教程_1688铺货到抖音需要我发货么

抖音小店一件代发流程是怎样的?有具体的步骤先进入甩手下单助手主界面,点击拼多多一键下单(抖音版)配置好抖音小店同步订单,选择店铺或者选择全部店铺方式同步,输入特定的订单编号单个同步。勾选订单,点击批量设置按钮,对应订单后面输入要采购的商品详情链接勾选订单,…

15秒抖音风景教程_唯美风景视频15秒抖音

抖音 怎么发超过15秒的视频粉丝数要达到1000才可以开通长视频权限,详细步骤如下——1、在抖音界面可以看到自己的抖音账号相关信息,在右上角可以看到三个点“”,点击这3个点。2、点击之后系统会弹出一个选择框,可以选择编辑资料、钱包、设置,这里选择设置。3、选择设置之后…

15秒抖音风景教程_15秒抖音的脚本范文风景

抖音 怎么发超过15秒的视频粉丝数要达到1000才可以开通长视频权限,详细步骤如下——1、在抖音界面可以看到自己的抖音账号相关信息,在右上角可以看到三个点“”,点击这3个点。2、点击之后系统会弹出一个选择框,可以选择编辑资料、钱包、设置,这里选择设置。3、选择设置之后…

15秒唯美抖音短视频教程

“抖音短视频”怎么上传超过15秒的视频?有两种方法:1、在抖音 我--设置--反馈与帮助--视频--如何获得长视频权限--点击更多 (申请条件1000粉以上) (如果没有1000粉只能通过第二种方法咯)2、看下图,绝对让你发上大于15秒的视频,条件加v :373814949(非免费,看图)确实…

14岁孩子拍的抖音教程

抖音里抱着宝宝变天使的视频怎么做的?1、先打开手机上的抖音短视2113频,拍摄一段小视频,作为主体视频,然后截取其中的最后一张照片保存到手机。2、打开手机上的美易,点击界面中部的【+】号,然后5261导入刚刚截取好的照片。3、导入了照片后,点击【贴纸4102】,4、在贴纸效…

13个抖音炫酷转场教程

转场的无技巧转场(一)无技巧转场 (13种)无技巧转场是用镜头自然过渡来连接上下两段内容的,主要适用于蒙太奇镜头段落之间的转换和镜头之间的转换。与情节段落转换时强调的心理的隔断性不同,无技巧转换强调的是视觉的连续性。并不是任何两个镜头之间都可应用无技巧转场方法…

12月你好抖音教程

抖音评论区发图片那没有红心❤怎么办?你好,抖音评论区里别人的图片没有红心,应该是你的抖音版本过低,或者是参数出现了错误,你可以把它卸载掉,重新安装一下安装最新版本儿。38元校园大流量学霸套餐的定向流量包括什么方面校园学霸套餐的30G/月融合多向流量,可用于以下AP…

12张卡点照片教程抖音

抖音上0.5秒的卡点照片怎么做的啊,有没有大神会的,教教我呗,感谢感谢啊,不会制作卡点视频,没办法最简单的用爱剪辑,快剪辑,前两张设置时间为一秒,后面的所有图片都设置成0.5秒,,在配上音乐走一遍,就好了抖音78张照片vlog这种卡点视频是怎么做的?有教程吗?你是说1-…

123我爱你抖音运镜教程

抖音运镜音乐有哪些 抖音最火运镜音乐完整歌词介绍抖音女生运镜音乐介绍《shape of you》这首歌原唱歌手是Ed Sheeran,然后经过韩国歌手J.Fla改编之后的版本就是女生的版本 了。The club isnt the best place to find a lover这俱乐部不是个能找到安慰的地方So the bar is whe…

123我爱你抖音舞蹈教程_就让我爱你抖音舞蹈

抖音上最火的10大舞蹈抖音上最火的10大舞蹈:1、爱的就是你这个手势舞最大的亮点就在于是两人一起组合,动作很甜蜜。两人可以互动KISS这样更甜。2、heartbeat抖音heartbeat舞又叫做心跳舞,节奏感配上流畅的手势也是有趣到不行。3、panama这首歌是因为同音C哩C哩,所以被称为C…

123我爱你抖音手舞教程

抖音直播手游吃鸡的时候在直播间有游戏音效但是没有主播的声音是怎么回事 急!1、对端的网络传输延迟大,就是用户终端的网络问题,到你使用平台延时比较高,比如,你使用的电信线路,对端使用的移动线路,你在南方,他在北方等等都可能导致网络延迟大。 2、对端设备故障。抖音…

123bitch抖音教程

抖音里三宫格的视频是怎么弄的啊方法/步骤抖音上很火的BIM视频是怎么制作出来的?智汇云BIM视频很多特效视频都是用模板制作的,因为用AE制作的话门槛有点高,所以都是用PR或者其他特效视频实现的。抖音上的特效其实也分很多种比较普遍的就是大神会事先拍摄好需要的片段,然后利…

1235抖音教程

抖音怎么🈴️拍抖音视频合拍方法1、打开抖音,选择【我】页面;2、在【我】页面中,【作品】栏下找到你要合拍的短视频(这里小伙伴需要有自己想要同框的短视频,如果作品中没有的话,需要先上传作品哦,步骤:可以先在抖音中下载一段需要用到同框短视频,然后上传即可)3、在…

11月抖音快手最新搬运教程

抖音把别人的视频下载下来去掉水印了再上传怎么能成为自己的视频,一个新视频,让系统认为这是一个新的可以用天图视频批量下载工具,下载下来的抖音、快手、火山等平台的视频都是没水印的,然后用修改MD5功能消重,可以避免平台的重复检测!格式工厂或者皮皮都可以操作,但比较…

11岁舞蹈抖音最火慢动作教程

我16岁女孩子 处 最近特别喜欢看那些电影 晚上到了就喜欢往下面摸 想和男人做爱 请问这是不是病态 正常吗思春的人也多了。少看那些电影(),多学习,转移注意力。你还小,别在这种事儿上浪费啊青春大好。。额,小姑娘,你想多了。。。青春期到了很正常。最好能调节下,分散下…

10段视频抖音卡点教程

10秒短视频如何制作?1、首先在应用商店搜索“抖音短视频”,点击“下载”→“安装”。2、登录抖音短视频后,再点击抖音短视频页面的中间“+”。3、再“选择音乐”这一项,选择你想要录制抖音短视频的音乐。4、选择好音乐后,点击“确定使用并开拍”。5、【录制抖音短视频】的…

10根淀粉肠抖音新手入门教程

纯淀粉肠的做法主料:瘦肉400g、肥肉100g、肠衣2根 辅料:盐适量1、准备肉馅,葱花泡热水备用,姜蒜末,淀粉。2、肉馅用调味料和好加入姜蒜末和白糖拌匀。3、加入淀粉水。4、肠衣备好。5、用漏斗插入肠衣的一端,开始灌拌好的肉馅。6、全部灌好的样子。7、用绳分段系好,每段流…

10张照片教程抖音_抖音如何添加照片教程

如何把十张照片合成漂亮的照片如果你的10张照片有景.有物.有人可以用PS,一张景做底图剩余的用PS抠图,在底图上拼接。如果全部是人物照,还是用光影魔术手好,选多图边框方便快捷,而且好看。打开photoshop,新建一个文件,设置内容:名称111111,宽度210象素,高度290象素,分…

10岁抖音歌曲汉服舞蹈教程

抖音最火的古风音乐排行榜 抖音最火的古风歌曲有哪些抖音最火的古风歌曲有:《红昭愿》、《风筝误》、《琵琶行》、《清明上河图》、《一曲相思》、《出山》、《锦鲤抄》1、《红昭愿》《红昭愿》,这首e69da5e887aae79fa5e9819331333433623139歌曲由音阙诗听演唱,音阙诗听在古…

10叔抖音神摇舞蹈教程

谁有完整的疯神舞步...给下小弟...不要藏哦-_o疯神舞LV6 :4458 2916 8968 834 7418 8928 2342 6822 7744(前面一个是4K)LV7 :6887 7929 2322 3442 7823 8913 8281 3148 8128 8293LV8 :3441 2912 4767 7233 8326 8978 9163 9164 9621 9821 1696 2322 7861 6483 4431 4431 66…

100天练出腹肌抖音教程_100斤能练出腹肌吗

快速腹肌出现得了吧,前人总结出来的最好的锻炼腹肌的方式就是仰卧起坐。不用追求个数,要追求时间和规范的动作。不要快,要慢,匀速起落,一个是一个,不要用爆发力。起到45度,太高了不仅没有作用,而且腹肌不够拉伸不好看,对脊柱还有伤害。下落到将要躺平,就是在空中做,…

100天练出腹肌抖音教程_100天能练出腹肌吗

•怎样练出腹肌?越简单越好仰卧起坐当然是腹肌训练的首选。 但是,怎么做才是最有效果的? 如果你是个胖子的话,我是说如果你的腹部脂肪层比较厚。 你必须采取有氧训练式的练习方法。 先慢跑。10分钟。 躺下做仰卧起坐。 然后爬起来立刻做冲刺跑。坚持30秒以上。 再马上躺下做…

100天抖音制作教程

抖音视频由少变多怎么制作打开抖音,把自己喜欢的视频保存下来。选择这个箭头。选择“保存本地”,有两个“合拍”的是15秒以内的视频。没有的话,应该长视频。这是保存下来的视频,我这里是去相册去查看,每个手机都不一样。大部分手机是保存在相册。可以看到保存的视频的信息…

100g抖音教程_100G看抖音能看多久

怎样使抖音流量包开启我的是浙江移动办的9元15GB头条抖音流量包,优惠价1块钱拿的,后来是在优惠期快结束时发送"6980"到"10086"成功取消的,其它省的移动卡是不是一样就不知道了,朋友们可以试一下这指令,不行的话可以再试一下发送"QXAK"到10086。…

0粉强开抖音橱窗教程

抖音不够1000粉丝怎么开橱窗?不够1000粉丝量是无法开通橱窗权限的,只能自己到1000个或者买1000个具体操作如下分享你1.打开抖音app,进入点击右上角的三点图标;2.进入设置界面,找到并点击【帮助与反馈】3.进入界面,找到并点击【申请商品分享权限/其他问题】4.然后点击【商品…

0粉丝抖音直播教程_抖音只有37个粉丝都能开直播

抖音怎么开通直播教程视频,怎么开直播视频1.打开抖音软件--进入我的2.点击右上角“...”3.选择反馈与帮助4.选择直播5.我是主播--如何开通直播6.点击更多--我要开播--按照要求填写要求申请即可希望可以帮助到你哦。抖音可以直播的,也可以个人开直播,但是有粉丝要求,而且官方…