# 2022-06 问题记录

# 一、source map 类型

# 几个名词描述：

• eval: 使用eval包裹模块代码
• source map:产生.map文件
• cheap：不包含列信息
• inline: 将.map作为DataURL嵌入，不单独生成.map文件
• module:包含loader的sourcemap
• eval: 每个模块被转化为字符串，在尾部添加//# souceURL（指明eval前文件）后，被eval包裹起来

# 几种类型：

• source-map: 最原始的source-map实现方式，打包代码的同时生成一个sourcemap文件，并在打包文件的末尾添加//# souceURL，注释会告诉JS引擎原始文件位置
• hidden-source-map：打包结果与source-map一致，但是.map文件结尾不显示//# sourceMappingURL
• inline-source-map：为打包前的每个文件添加sourcemap的dataUrl，追加到打包后文件内容的结尾；此处，dataUrl包含一个文件完整 souremap 信息的 Base64 格式化后的字符串
• eval-source-map：将每个模块转化为字符串，使用eval包裹，并将打包前每个模块的sourcemap信息转换为Base64编码，拼接在每个打包后文件的结尾
• cheap-source-map：同source-map,但不包含列信息，不包含 loader 的 sourcemap，（譬如 babel 的 sourcemap）
• cheap-module-source-map：不包含列信息，同时 loader 的 sourcemap 也被简化为只包含对应行的。最终的 sourcemap 只有一份，它是 webpack 对 loader 生成的 sourcemap 进行简化，然后再次生成的

# 这么多模式，到底使用哪个？

开发环境推荐： cheap-module-eval-source-map

生产环境推荐： cheap-module-source-map

相关解释：

• 大部分情况我们调试并不关心列信息，而且就算 sourcemap 没有列，有些浏览器引擎（例如 v8） 也会给出列信息，所以我们使用 cheap 模式可以大幅提高 souremap 生成的效率。

• 使用 module 可支持 babel 这种预编译工具（在 webpack 里做为 loader 使用）。

• 使用 eval 方式可大幅提高持续构建效率，参考webapck devtool速度对比列表，这对经常需要边改边调的前端开发而言非常重要

• 直接将sourceMap放入打包后的文件，会明显增大文件的大小，不利于静态文件的快速加载；而外联.map时，.map文件只会在F12开启时进行下载（sourceMap主要服务于调试），故推荐使用外联.map的形式。

# 二、clean-webpack-plugin

clean-webpack-plugin 用来清理项目的构建文件夹。rebuild 的时候，会自动清理 output 对应的文件。可以指定 webpack 打包之后删除一些不需要的文件，比如上传完 Sentry 需要的 sourcemap 后，删除 sourcemap ，防止 sourcemap 文件被传到服务器。

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const webpackConfig = {
  mode: 'development',
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
  },
  devtool: 'hidden-source-map',
  plugins: [
    /**
     * All files inside webpack's output.path directory will be removed once, but the
     * directory itself will not be. If using webpack 4+'s default configuration,
     * everything under <PROJECT_DIR>/dist/ will be removed.
     * Use cleanOnceBeforeBuildPatterns to override this behavior.
     *
     * During rebuilds, all webpack assets that are not used anymore
     * will be removed automatically.
     *
     * See `Options and Defaults` for information
     */
    new CleanWebpackPlugin({
      protectWebpackAssets: false, // 重要
      cleanAfterEveryBuildPatterns: ['**/*.map']
    }),
  ],
};

module.exports = webpackConfig;

# 三、Anaconda 安装后使用

# 配置环境变量

1. 配置环境变量后，可以直接在命令行使用 python 命令。

E:\anaconda3（Python需要）
E:\anaconda3\Scripts（conda自带脚本）

2. 检验安装成功

# python 环境
python

# conda 环境
conda --version

# 四、you-get 下载视频

# 1.安装

• windows 安装，python 环境下运行

pip3 install you-get

# 2. 下载视频

you-get [url]

# 3. 常用选项

# 五、命令行切换磁盘

# windows 相关的 (cmder, cmd)

直接输入：

d:

# git bash

cd /d