m0_74019046的博客

Content Delivery Network 或 Content Distribution Network 的缩写一般把静态资源或第三方资源放到CDN上。可以在 output的publicPath配置cdn的地址，打包后所有的脚本的前缀都变为这个cdn地址了,一般不会这样使用设置externals排除需要打包的包(使用的较多)需要在index.html引入对用的js脚本。

1.**对打包后的结果进行优化(**分包处理，减小包的体积，使用cdn服务器)2.优化打包速度(exclude,cache-loader)一般更侧重于对打包后的结果进行优化。默认情况下所有打包后的结果都会放到一个文件中，如自己编写的代码，第三方库react,axios,dayjs等都会打包到一个文件中，这就需要对代码进行分离。

它可以将 ES6/ES7/ES8 等新特性转换为 ES5 等旧版本的 JavaScript 代码，使得开发人员可以使用最新的语言特性而不必担心兼容性问题。此外，Babel 还可以用于转换 JSX 语法为普通的 JavaScript 代码，从而在项目中使用 React 等库。通常会使用预设好的插件 @babel/preset-env,并单独建立一个babel.config.js。babel作为一个独立的工具和postcss一样，可以单独来使用。babel是一个编译器，将源代码转换为浏览器可以直接识别的代码。

通常运行在浏览器上的代码是压缩过的，在浏览器上运行的代码和编写的代码是有差异的，这些代码会进行丑化压缩，修改变量名称，将ts转换为js等操作。当代码出错时调试转化后代码很困难，可以通过source-map将转换后的代码映射到源文件，使浏览器可以重构原始源并在调试器中显示重建后的原始源。使用source-map的步骤：1.根据源代码，生成source-map文件，webpack在打包时，可以通过配置生成source-map。2. 在转换后的代码最后添加一行注释，指向source-map。

npm i vue编写一个vue文件：在index.html中设置 一个id为app的div将vue文件挂载到app中vue比较特殊，除了使用loader外，还使用了plugin。

可以直接配置两个文件：dev。

浏览器的兼容性问题不知包括随屏幕大小而变化，还包括针对浏览器支持的特性（如css特性，js特性） 做处理。目前市场上有很多浏览器：Chrome,Safari,IE,Edge等，要根据它们的市场占有率来决定是否兼容它们。在脚手架中经常看到类似的配置:在生产环境中，该配置指定了支持的浏览器版本范围，包括超过全球市场份额0.2%的浏览器、尚未停止维护的浏览器，以及排除了Opera Mini所有版本的浏览器。在开发环境中，该配置指定了最新版本的Chrome、Firefox和Safari浏览器。

引入css后执行打包命令发现报错：webpack默认只能处理js其他的像css,图片都需要借助loader来处理。

path模块用于对路径和文件进行处理，dirname: 获取文件的父文件夹。basename:获取文件名。extname: 获取文件拓展名。如果希望将多个路径进行拼接时，由于不同的操作系统(Mac OS 和Linux的Unix操作系统上使用/来作为文件路径的分割符，window上使用\或 \作为文件的分割符，目前也支持/ )可能使用不同的分隔符，拼接时需要区分，但是使用path.join()就不用考虑操作系统的问题。与path.resolve()相比path.join()用的比较少。