关键词
计算机图形学、前端可视化、ubuntu、linux、WebGL、Three.js、react
问题汇总
前端资源的区别
webpack代码打包之后的static目录与assets目录：
static：静态资源，几乎不会有变动，可以直接引用，比如库文件，一般是现有的
assets：基本上是自己写的一些代码，或者其他文件，会有改动的可能。
git指令
https://www.cnblogs.com/qufanblog/p/7606105.html（待整理）
webpack简单总结（摘自网络）
什么是Webpack
https://webpack.docschina.org/concepts/#入口-entry-
是一个针对JavaScript 应用程序的静态模块打包器(module bundler).分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
执行思路:递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
在Dreaview中对应的文件app.bundle.js (或者带哈希值)
入口(entry)
入口起点指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
每个依赖项随即被处理，最后输出到称之为 bundles 的文件中(过程)
可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。
接下来我们看一个 entry 配置的最简单例子：
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
出口(output)
告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
webpack.config.js
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。
Loader
Loader(装载机)
webpack支持通过装载机预处理文件.这允许你处理任何静态资源(不仅仅是JavaScript),你可以很轻松的写出在Nodejs上运行的装载机.
处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
注意，loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的，因为这可以使开发人员创建出更准确的依赖关系图。
在更高层面，在 webpack 的配置中 loader 有两个目标：
test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。
插件(plugins)
用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
我眼中的webpack 看官方文档感觉很容易 实际配置起来比较麻烦)一般的主流前端框架,比如vue,react这些,自带的cli(脚手架工具),一般都会帮我们生成一个webpack.config.js我的文件.把基本的webpack参数配置好,而不需要我们自己去配置,
WHY USE?
对于比较大的前端项目,一般都有复杂和多量的JavaScript代码.和很多依赖包.webpack所做的就是简化这些项目的结构.
1.让我们可以把复杂的程序细化为小的文件;
2.对于一些浏览器不能识别的预览,webpack可以做为预处理,转为可识别的语言 比如对sass和less的预处理.
３.减少加载时间：通过压缩合并代码，JS文件打包,尽可能少的建立ＨＴＴＰ请求．
4.适用于大型项目
本周踩坑
1.前端资源更改未变动，记得强制刷新浏览器，清除缓存