Vue基础知识总结 9：vue webpack打包原理

article/2025/9/24 15:12:17

🏆作者简介：哪吒，CSDN2022博客之星Top1、CSDN2021博客之星Top2、多届新星计划导师✌、博客专家💪，专注Java硬核干货分享，立志做到Java赛道全网Top N。

🏆本文收录于，Java基础教程系列，目前已经700+订阅，CSDN最强Java专栏，包含全部Java基础知识点、Java8新特性、Java集合、Java多线程、Java代码实例，理论结合实战，实现Java的轻松学习。

🏆姐妹篇，Java基础教程（入门篇），包含面向对象、基本数据类型、数组、继承和多态、泛型、枚举等Java基础知识点。

🏆姐妹进阶篇，Java基础教程（进阶篇），包含Java高并发、Spring、MySQL等Java进阶技术栈。

🏆全部订阅，可加入Java学习星球，完成Java从入门、实战、进阶全方位的Java知识体系学习。

目录

一、前端模块化

二、打包

三、安装webpack

1、安装node.js

 2、安装webpack

四、webpack打包js

1、普通打包方式

2、webpack.config.js配置和package.json配置

3、理解开发时依赖和运行时依赖

五、loader

1、loader简介

2、使用 loader

3、配置[Configuration]允许你在 webpack 配置中指定多个 loader

六、less与url-loader

1、安装less

 2、less示例

4、url-loader用法

5、file-loader

七、加载图片代码实例

1、项目目录

 2、index.html

3、main.js

4、info.js

5、mathUtils.js

6、normal.css

7、special.less

八、ES6语法处理

1、安装babel-loader

2、在 webpack 配置对象中，需要添加 babel-loader 到 module 的 loaders 列表中，

九、webpack使用vue的配置过程

1、安装vue的三种方式

2、npm安装vue

十、el和template区别

1、正常运行之后，我们要考虑一个问题

2、解决方法 --> 定义template属性

十一、认识plugin

1、plugin是什么？

2、loader和plugin的区别？

3、plugin的使用过程

4、代码实例

5、htmlWebpackPlugin

6、第三方插件uglifyjs-webpack-plugin

7、webpack-dev-server搭建本地服务器

一、前端模块化

webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。

并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。

二、打包

webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）。

在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

和gulp的有什么区别？

  1. gulp叫做前端自动化任务管理工具；
  2. gulp会定义一系列的task，处理各种事务（ES6、ts转化、图片压缩、scss转成css）
  3. 通过gulp依次执行这些task，并且让整个流程自动化；
const gulp = require('gulp')
const babel = require('gulp-babel')gulp.task('js',() => gulp.src('src/*.js').pipe(babel({prests:['es2015']})).pipe(gulp.dest('dist'))
);

什么时候使用gulp呢？

  1. 如果工程模块依赖比较简单，甚至没有用到模块化的概念；
  2. 只需要进行简单的合并、压缩；

总而言之，webpack是功能更加强大的gulp。

三、安装webpack

1、安装node.js

打开官网下载链接:Download | Node.js 我这里下载的是node-v6.9.2-x64.msi,如下图：

 2、安装webpack

npm install webpack@3.6.0 -g

四、webpack打包js

1、普通打包方式

webpack .\src\main.js .\dist\bundle.js

打包之后，就可以在index.html中引入bundle.js了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script src="./dist/bundle.js"></script>
</body>
</html>

2、webpack.config.js配置和package.json配置

（1）webpack.config.js

const path = require('path')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},
}

（2）package.json

{"name": "meetwebpack","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"author": "","license": "ISC","devDependencies": {"webpack": "^3.6.0"}
}

3、理解开发时依赖和运行时依赖

本地安装webpack

npm install webpack@3.6.0 --save-dev

 在终端中敲的命令，运用的都是全局的webpack。

五、loader

1、loader简介

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

npm install --save-dev css-loader
npm install --save-dev ts-loader

然后指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader：

webpack.config.js

module.exports = {module: {rules: [{ test: /\.css$/, use: 'css-loader' },{ test: /\.ts$/, use: 'ts-loader' }]}
};

2、使用 loader

在你的应用程序中，有三种使用 loader 的方式：

  • 配置（推荐）：在 webpack.config.js 文件中指定 loader。
  • 内联：在每个 import 语句中显式指定 loader。
  • CLI：在 shell 命令中指定它们。

3、配置[Configuration]允许你在 webpack 配置中指定多个 loader

这是展示 loader 的一种简明方式，并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览：

六、less与url-loader

1、安装less

npm install --save-dev less-loader less

 2、less示例

将 css-loader、style-loader 和 less-loader 链式调用，可以把所有样式立即应用于 DOM。

module.exports = {...module: {rules: [{test: /\.less$/,use: [{loader: "style-loader" // creates style nodes from JS strings}, {loader: "css-loader" // translates CSS into CommonJS}, {loader: "less-loader" // compiles Less to CSS}]}]}
};

 3、安装url-loader

npm install --save-dev url-loader

4、url-loader用法

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

import img from './image.png'

 webpack.config.js

module.exports = {module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]}]}
}

当图片大小大于limit中限制时，需要使用file-loader进行图片加载，再转为base64字符串。 

5、file-loader

1、安装file-loader

npm install --save-dev file-loader

七、加载图片代码实例

1、项目目录

 2、index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script src="./dist/bundle.js"></script>
</body>
</html>

3、main.js

// 1.使用commonjs的模块化规范
const {add, mul} = require('./js/mathUtils.js')console.log(add(20, 30));
console.log(mul(20, 30));// 2.使用ES6的模块化的规范
import {name, age, height} from "./js/info";console.log(name);
console.log(age);
console.log(height);// 3.依赖css文件
require('./css/normal.css')// 4.依赖less文件
require('./css/special.less')
document.writeln('<h2>你好啊,哪吒!</h2>')

4、info.js

export const name = 'why';
export const age = 18;
export const height = 1.88;

5、mathUtils.js

export const name = 'why';
export const age = 18;
export const height = 1.88;

6、normal.css

body {/*background-color: red;*/background: url("../img/timg.jpg");
}

7、special.less

@fontSize: 50px;
@fontColor: orange;body {font-size: @fontSize;color: @fontColor;
}

八、ES6语法处理

webpack打包的js文件，并没有将ES6语法转译成ES5的语法，因此可能对某些浏览器不兼容，此时需要使用babel。

1、安装babel-loader

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

2、在 webpack 配置对象中，需要添加 babel-loader 到 module 的 loaders 列表中，

像下面这样：

module: {rules: [{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['es2015']}}}]
}

bundle.js从ES6语法编译为ES5语法了。

九、webpack使用vue的配置过程

1、安装vue的三种方式

  1. 直接下载应用
  2. CDN引入
  3. npm安装

2、npm安装vue

因为不是运行时依赖，以后部署的时候也要使用vue，所以不需要-vue

npm install vue --save

runtime-only -> 代码中，不可以有任何的template

runtime-compiler -> 代码中可以有template，因为有compiler可以用于编译template

使用如下配置解决找不到template的报错问题：

resolve: {// alias: 别名extensions: ['.js', '.css', '.vue'],alias: {'vue$': 'vue/dist/vue.esm.js'}}

十、el和template区别

1、正常运行之后，我们要考虑一个问题

如果我们将data中的数据显示在界面中，就必须修改index.html；

如果我们后面自定义了组件，也必须修改index.html来使用组件；

但是html模板在之后的开发中，并不希望手动的频繁的修改index.html；

2、解决方法 --> 定义template属性

在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容；

这里我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素；

但是如果我们依然希望在其中显示{{message}}的内容，我们可以定义一个template属性；

如果el和template同时存在时，template会替换掉el的内容：

new Vue({el:'#app',template:`<div><h2>{{message}}</h2><button @click="btnClick">按钮</button><h2>{{name}}</h2></div>`,data:{message:'hello webpack',name:'哪吒'},methods:{btnClick(){console.log('i am csdn 哪吒！')}}
})

简化：

const App = {template:`<div><h2>{{message}}</h2><button @click="btnClick">按钮</button><h2>{{name}}</h2></div>`,data:{   return {message:'hello webpack',name:'哪吒'}},methods:{btnClick(){console.log('i am csdn 哪吒！')}}
}new Vue({el:'#app',template:`<App/>`,components:{App}
})

再次简化：

app.js

export default {template:  `<div><h2>{{message}}</h2><button @click="btnClick">按钮</button><h2>{{name}}</h2></div>`,data() {return {message: 'Hello Webpack',name: 'coderwhy'}},methods: {btnClick() {}}
}

main.js

// 5.使用Vue进行开发
import Vue from 'vue'
import App from './vue/app'new Vue({el: '#app',template: '<App/>',components: {App}
})

终极优化

App.vue

<template><div><h2 class="title">{{message}}</h2><button @click="btnClick">按钮</button><h2>{{name}}</h2><Cpn/></div>
</template><script>import Cpn from './Cpn'export default {name: "App",components: {Cpn},data() {return {message: 'Hello Webpack',name: 'coderwhy'}},methods: {btnClick() {}}}
</script><style scoped>.title {color: green;}
</style>

main.js

// 5.使用Vue进行开发
import Vue from 'vue'
import App from './vue/App.vue'new Vue({el: '#app',template: '<App/>',components: {App}
})

但是，此时程序无法加载vue文件，需要npm安装loader

npm install vue-loader vue-template-compiler --save-dev

webpack.config.js中配置：

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

十一、认识plugin

1、plugin是什么？

plugin是插件的意思，通常适用于对某个现有的框架的扩展。

webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等。

2、loader和plugin的区别？

loader主要用于转换某些类型的模板，它是一个转换器。

plugin是插件，它是对webpack本身的扩展，是一个扩展器。

3、plugin的使用过程

  1. 通过npm安装需要使用的plugins
  2. 在webpack.config.js中的plugins中配置插件

4、代码实例

plugins: [new webpack.BannerPlugin('最终版权归aaa所有'),
],

5、htmlWebpackPlugin

（1）、作用

  1. 自动生成一个index.html文件
  2. 将打包的js文件，自动通过script标签插入到body中

（2）安装htmlWebpackPlugin

npm install htnl-webpack-plugin --save-dev

（3）使用插件

修改webpack.config.js文件中plugins部分的内容

plugins: [new webpack.BannerPlugin('最终版权归aaa所有'),new HtmlWebpackPlugin({template: 'index.html'})
],

6、第三方插件uglifyjs-webpack-plugin

指定版本1.1.1，和CLI2保持一致。

（1）安装

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

（2）修改配置文件

plugins: [new webpack.BannerPlugin('最终版权归aaa所有'),new HtmlWebpackPlugin({template: 'index.html'}),new UglifyjsWebpackPlugin()
],

7、webpack-dev-server搭建本地服务器

（1）webpack-dev-server简介

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

（2）安装

npm install --save-dev webpack-dev-server@2.9.1

（3）属性介绍

devserver作为webpack的一个选项，选项本身可以设置如下属性：

  1. contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
  2. port：端口号
  3. inline：页面实时刷新
  4. historyApiFallback：在SPA页面中，依赖HTML5的history模式

（4）配置实例

  devServer: {contentBase: './dist',inline: true}

8、webpack配置文件的分离

（1）安装插件

npm install webpack-merge --save-dev

（2）分离代码实例

webpack-config.js

const path = require('path')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',publicPath: 'dist/'},module: {rules: [{test: /\.css$/,// css-loader只负责将css文件进行加载// style-loader负责将样式添加到DOM中// 使用多个loader时, 是从右向左use: [ 'style-loader', 'css-loader' ]},{test: /\.less$/,use: [{loader: "style-loader", // creates style nodes from JS strings}, {loader: "css-loader" // translates CSS into CommonJS}, {loader: "less-loader", // compiles Less to CSS}]},{test: /\.(png|jpg|gif|jpeg)$/,use: [{loader: 'url-loader',options: {// 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.// 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.limit: 13000,name: 'img/[name].[hash:8].[ext]'},}]},{test: /\.js$/,// exclude: 排除// include: 包含exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['es2015']}}},{test: /\.vue$/,use: ['vue-loader']}]},resolve: {// alias: 别名extensions: ['.js', '.css', '.vue'],alias: {'vue$': 'vue/dist/vue.esm.js'}}
}

build/base.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, '../dist'),filename: 'bundle.js',// publicPath: 'dist/'},module: {rules: [{test: /\.css$/,// css-loader只负责将css文件进行加载// style-loader负责将样式添加到DOM中// 使用多个loader时, 是从右向左use: [ 'style-loader', 'css-loader' ]},{test: /\.less$/,use: [{loader: "style-loader", // creates style nodes from JS strings}, {loader: "css-loader" // translates CSS into CommonJS}, {loader: "less-loader", // compiles Less to CSS}]},{test: /\.(png|jpg|gif|jpeg)$/,use: [{loader: 'url-loader',options: {// 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.// 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.limit: 13000,name: 'img/[name].[hash:8].[ext]'},}]},{test: /\.js$/,// exclude: 排除// include: 包含exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['es2015']}}},{test: /\.vue$/,use: ['vue-loader']}]},resolve: {// alias: 别名extensions: ['.js', '.css', '.vue'],alias: {'vue$': 'vue/dist/vue.esm.js'}},plugins: [new webpack.BannerPlugin('最终版权归aaa所有'),new HtmlWebpackPlugin({template: 'index.html'})]
}

build/dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')module.exports = webpackMerge(baseConfig, {devServer: {contentBase: './dist',inline: true}
})

build/prod.config.js  

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')module.exports = webpackMerge(baseConfig, {plugins: [new UglifyjsWebpackPlugin()]
})

更改package.json

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config ./build/prod.config.js","dev": "webpack-dev-server --open --config ./build/dev.config.js"}

🏆本文收录于，Java基础教程系列，目前已经700+订阅，CSDN最强Java专栏，包含全部Java基础知识点、Java8新特性、Java集合、Java多线程、Java代码实例，理论结合实战，实现Java的轻松学习。

🏆姐妹篇，Java基础教程（入门篇），包含面向对象、基本数据类型、数组、继承和多态、泛型、枚举等Java基础知识点。

🏆姐妹进阶篇，Java基础教程（进阶篇），包含Java高并发、Spring、MySQL等Java进阶技术栈。

🏆全部订阅，可加入Java学习星球，完成Java从入门、实战、进阶全方位的Java知识体系学习。


http://chatgpt.dhexx.cn/article/3LXn0ZvD.shtml

相关文章

webpack 打包流程

webpack 打包流程

流程梳理 在开始之前我们先对于整个打包流程进行一次梳理。 这里仅仅是一个全流程的梳理&#xff0c;现在你没有必要非常详细的去思考每一个步骤发生了什么&#xff0c;我们会在接下来的步骤中去一步一步带你串联它们。 整体我们将会从上边5个方面来分析Webpack打包流程: 初…
阅读更多...
Webpack打包

Webpack打包

webpack【依赖node环境】 什么是webpack&#xff1f; 从本质上将&#xff0c;webpack是一个现代的JavaScript应用的静态模板打包工具。 前端模块化&#xff1a; 前端模块化是指&#xff0c;通过将前端代码根据一定的规则解耦封装成几个代码文件&#xff08;模块&#xff09;&…
阅读更多...
使用webpack打包vue项目

使用webpack打包vue项目

使用webpack打包vue项目 安装webpack工具&#xff0c;安装方式有两种&#xff1a;全局安装&#xff08;命令&#xff1a;npm install -g webpack webpack-cli&#xff09;以及安装在项目中&#xff0c;这里使用第二种&#xff1a; //在项目中安装&#xff0c;这里的-D表示运用到…
阅读更多...
Idea 2017.3.+永久破解方法

Idea 2017.3.+永久破解方法

一、下载Intellij IDEA2017.3.5x64旗舰版 去官网下载此处不赘述 二、下载破解jar包 链接在此http://idea.lanyus.com/jar/JetbrainsCrack-2.7-release-str.jar 三、打开安装好的IDEA路径下的bin目录 将下载好的jar包复制进来 例如 四、修改bin目录下的两个文件 idea.exe…
阅读更多...
InetlliJ IDEA 2017破解（亲测，可用）

InetlliJ IDEA 2017破解（亲测，可用）

1.InetlliJ安装好后&#xff0c;启动&#xff0c;至License Activation界面&#xff1b; 2.选择License server&#xff1b; 3.在License server address中填入 http://idea.imsxm.com/
阅读更多...
Intellij IDEA2017安装破解

Intellij IDEA2017安装破解

IntelliJ IDEA&#xff08;2017&#xff09;安装和破解 IDEA 全称 IntelliJ IDEA&#xff0c;是Java语言开发的集成环境&#xff0c;IntelliJ在业界被公认为最好的java开发工具之一&#xff0c;尤其在智能代码助手、代码自动提示、重构、J2EE支持、各类版本工具(Git、svn、gith…
阅读更多...
idea 2017 破解 可以使用

idea 2017 破解 可以使用

新版本的 自从升级到idea2017.3之后,之前的license server破解方法貌似已失效.于是找到大神用的破解插件,很好很强大. 安装好idea之后不要打开软件,从http://idea.lanyus.com/下载破解插件&#xff0c;这里面的插件是进行更新的&#xff0c;可能已经不是下面的文件名了&#xf…
阅读更多...
IntelliJ idea2017 安装破解

IntelliJ idea2017 安装破解

下载 idea的安装包可以去官网下载&#xff0c;地址&#xff1a;IDEA各个历史版本请点击下载&#xff0c;选择自己需要的版本进行下载&#xff0c;本人下载的是ideaIU-2017.3.6.exe版本专业版。 安装 1、开始安装&#xff0c; 双击ideaIU-2017.3.6.exe&#xff0c;运行安装文…
阅读更多...
intelliJ idea 2017破解

intelliJ idea 2017破解

一、先进入Intellij IDEA的官网&#xff1a;https://www.jetbrains.com&#xff0c;下载安装 二、破解。 网上的破解方法较多&#xff0c;总结下来大概有下面几种办法供大家作为参考 声明&#xff1a;破解用于学习和试用&#xff0c;如果有经济条件的话&#xff0c;请支持…
阅读更多...
idea 2017 破解方法

idea 2017 破解方法

一、先进入Intellij IDEA的官网&#xff1a;https://www.jetbrains.com&#xff0c;下载安装 二、破解。 网上的破解方法较多&#xff0c;总结下来大概有下面几种办法供大家作为参考 声明&#xff1a;破解用于学习和试用&#xff0c;如果有经济条件的话&#xff0c;请支持…
阅读更多...
IDEA 2017破解补丁方法

IDEA 2017破解补丁方法

本文使用破解方式注册。 下载破解文件JetbrainsCrack-2.6.2.jar 下载地址&#xff1a; http://download.csdn.net/detail/gnail_oug/9824630 http://idea.lanyus.com/ 开始破解 一、将下载的 JetbrainsCrack-2.6.2.jar 破解补丁放在你的安装idea下面的bin的目录下面&#xff0…
阅读更多...
INTELLIJ IDEA 2017 破解教程（2018也可以！）

INTELLIJ IDEA 2017 破解教程（2018也可以！）

INTELLIJ IDEA 破解教程 我们一般都用licence server来激活idea&#xff0c;网上传闻较广的licence server是 http://idea.iteblog.com/key.php&#xff0c;但是该server在2017年12月后就失效了&#xff0c;故我们现在不用licence server&#xff0c;直接破解吧&#xff01; …
阅读更多...
IDEA 2017 破解 license 激活

IDEA 2017 破解 license 激活

IDEA 2017 破解 license 激活 转自&#xff1a;http://blog.csdn.net/zhangwenwu2/article/details/54948959 进入ide主页面&#xff0c;help-register-license server,然后输入 http://idea.iteblog.com/key.php&#xff08;注意&#xff1a;php要小写&#xff09;即可~ 如下图…
阅读更多...
IDEA 2017 破解教程（2018也可以）

IDEA 2017 破解教程（2018也可以）

点击 安装教程 获取安装详细步骤。 补充&#xff1a; 这一行是破解的jar包&#xff08;JetbrainsCrack-2.7-release-str.jar&#xff09;所在路径&#xff0c;本人的这个jar包已下载&#xff08;在安装教程链接里面有下载地址&#xff09;。 而且&#xff0c;这么配是错的。应…
阅读更多...
intelliJ IDEA 2017 破解方法

intelliJ IDEA 2017 破解方法

原地址&#xff1a;http://blog.csdn.net/u013673242/article/details/72243066?utm_sourceitdadao&utm_mediumreferral 本文使用破解方式注册。 下载破解文件JetbrainsCrack-2.6.2.jar 下载地址&#xff1a; http://download.csdn.net/detail/gnail_oug/9824630 http://…
阅读更多...
GAN（对抗生成网络）原理及数学推导

GAN（对抗生成网络）原理及数学推导

本文主要涉及GAN网络的直观理解和其背后的数学原理。 参考课程&#xff1a; 计算机视觉与深度学习 北京邮电大学 鲁鹏 概述 在所有生成模型中&#xff0c;GAN属于 “密度函数未知&#xff0c;直接硬train” 的那一类&#xff0c;和密度函数可定义的PixelRNN/CNN以及变分自编码…
阅读更多...
对抗生成网络GAN系列——GANomaly原理及源码解析

对抗生成网络GAN系列——GANomaly原理及源码解析

&#x1f34a;作者简介&#xff1a;秃头小苏&#xff0c;致力于用最通俗的语言描述问题 &#x1f34a;往期回顾&#xff1a;对抗生成网络GAN系列——GAN原理及手写数字生成小案例   对抗生成网络GAN系列——DCGAN简介及人脸图像生成案例   对抗生成网络GAN系列——AnoGAN原…
阅读更多...
强化学习和生成对抗网络

强化学习和生成对抗网络

1. 强化学习的定义 强化学习&#xff08;reinforcement learning&#xff09;是机器学习的一个重要分支&#xff0c;是一门多领域交叉学科&#xff0c;它的本质是自行解决决策问题&#xff0c;并且能进行连续决策。 强化学习有四个主要组成部分∶ 1.代理&#xff08;Agent&…
阅读更多...
对抗生成网络（GAN）学习笔记

对抗生成网络（GAN）学习笔记

生成模型与判别模型 判别模型&#xff1a;由数据直接学习决策函数Yf(X)或条件概率分布P(Y|X)作为预测模型&#xff0c;即判别模型。判别方法关心的是对于给定的输入X&#xff0c;应该预测什么样的输出Y。 生成模型&#xff1a;由数据学习联合概率分布P(X,Y), 然后由P(Y|X)P(X…
阅读更多...
生成对抗网络GAN

生成对抗网络GAN

1. 概述 生成对抗网络GAN&#xff08;Generative adversarial nets&#xff09;[1]是由Goodfellow等人于2014年提出的基于深度学习模型的生成框架&#xff0c;可用于多种生成任务。从名称也不难看出&#xff0c;在GAN中包括了两个部分&#xff0c;分别为”生成”和“对抗”&am…
阅读更多...
推荐文章

Copyright @ 2022~2023