webpack配置

一、很多基础方面的配置被vuecli所集成一般项目都是使用vuecli,不会真正的去从0-1进行webpack配置:

1、vuecli中的webpack基础配置:

(1)入口文件默认在src/main;输出在dist;

(2)集成了大量的插件和加载器:babel-loader 处理 JavaScript 文件、使用 css-loader 和 style-loader 处理 CSS 文件;html-webpack-plugin 自动生成 HTML 文件等

(3)集成了我们的路径别名:@

(4)开启了webpack缓存:webapck打包构建时,每次需要编译文件,利用缓存机制减少重复编译和打包的时间，从而提高开发效率和构建速度-

webapck缓存大概包含:

(1)Loader 缓存：会缓存 loader 的执行结果，以避免相同文件被多次处理。Vue CLI 4 默认启用了 Babel Loader 的缓存功能，通过使用 cacheDirectory 选项来缓存转译结果，以减少重复的 Babel 转译工作。

(2)Plugin 缓存：某些插件会提供缓存功能,如:cache-loader 等插件可以提供构建缓存的功能，加快构建速度。

(3)Module 缓存：Webpack 5 引入了 Module Federation 功能，可以通过模块缓存来提高构建性能。该功能允许将编译后的模块保存在缓存中，以便下次构建时可以重用。

(4)构建缓存：Vue CLI 4 默认启用了构建缓存，通过配置 cache 选项来启用构建缓存，将构建产物缓存在磁盘上，以便下次构建可以复用之前的构建结果。

(5)模式:集成了生产和开发两种模式:在开发模式下，使用 webpack-dev-server 启动本地开发服务器，并自动进行热更新；在生产模式下，会启用一些插件进行js和css代码压缩;

(一般情况下我们我们生产环境是npm run build打包后,放到服务器运行,在开发环境,可以理解为webpack-dev-serve会自动帮我们打包,但此次打包并不会把打包代码形成文件,而是在内存中完成形成打包结果,然后会生成一个路径,我们在浏览器中输入路径时会从内存中获取打包内容,省去了每次手动打包,而且有热更新功能,)

(6)还需要注意:在生产环境下,webpack打包生成的js文件是带hash值的,所以会保证我们每次发完包之后刷新页面,会请求到服务端的最新文件(因为文件名都变了,新的请求会拿到新的文件);;;但是打开发环境的包时,webpack打包生成的js文件不会带hash值,所以开发sit环境重新发包后刷新页面,可能拿到的资源不是最新的,需要清除浏览器缓存重新请求,或者配置打包后生成的js文件名

项目打包后,在index.html文件中通过script标签引入了js文件,每次刷新页面的时候index.html不会走缓存,都会请求新的index.html,但是如果js文件没有hash值时,每次index.html文件请求回来后js文件名都是一样的,所以会走浏览缓存,但是如果js有hash值,我们修改页面后打包生成的js文件hash变化,我们请求回来的index.html中的js名变化了和缓存中的js文件名不一致(文件指纹),所以会发起新的请求请求新的js文件

注意:配置打包后的js文件name属性,为name添加hash值,hash分为三种:hash和chunkhash和contenthash;;;在打开发包sit包时,三种配置没什么区别,每次打包hash值都会变化;但是打生产包时区别很大:(1)如果设置name为hash:每次打包都会生成js文件名都会变化;(2)chunkhash以chunkhash为单位,只有当前包内容变化时,打包后的js文件名才会变化:(3)contenthash以文件为单位,当文件内容变化时,打包对应的js文件name值才会变化,其他包name值不变;-----

使用chunkhash和contenthash的话有利于实现更精确的缓存机制;

二、其他的基础配置:

(1)是否生成sourseMap映射文件

(2)自定义打包的输出目录outputDir

(3)proxy配置跨域代理,

(4)publicPath部署生产环境和开发环境下的URL,默认情况下VueCli会假设你的应用是被部署在一个域名的根路径上;如果想要应用被部署在一个子路径上，你就需要用publicPath选项指定这个子路径;eg:VueCli脚手架默认将项目部署到http://www.baidu.com,但我们想要部署到子路径的话,就需要使用publicPath:‘uat’ —>结果http://www.baidu.com/uat/login

http://10.30.1.120:9090/win/mgmt/web/index.html#/product-manage/rated-code-config

(5)配置生产环境下去除代码注释和console.log

(6)配置拆包splitchunks:test正则匹配第三方包;common包,模块被公用几次以上,通过minChunks来设置;app主js文件以minSize为判断基准;

(7)配置打包分析工具,bundleAnalyse插件可以直观的看到打包后的js文件大小,然后进行对应的优化,好比第三方模块包实在太大,可以考虑使用CDN,配置externals忽略一些第三方库;

8、配置svg- - -:后管系统中的菜单iCON是svg图片

9、配置我们的SASS全局公共变量:

10、配置压缩插件:图片压缩、Gzip压缩等;

11、配置打包后生成的文件名:hash(3种),可以使用chunkhash或者contenthash来实现只有内容改变时,打包生成的bundle名字才会改变,刷新页面的时候只请求改变了的bundle即可;;;;注意打开发包时三种hash一样,不管改没改变都会每次打的bundle都会变化;

三、提高webpack构建速率(webpack构建大体流程便是从入口文件开始,查找模块依赖关系(递归模块和依赖模块),生成依赖树(图),然后构建编译生成一个或者多个bundle.js)

1、优化loader(加载器)的文件搜索范围—常使用的loader有css-loader,style-loader,babel-loader;对于babel-loader而言,影响打包构建速率的便是babel,因为babel需要将es6+语法转化为es5(过程是Babel会将代码转为字符串生成AST,然后AST转化为新的代码),项目越大转化代码越多,效率就越低—所以我们可以指定babel-loader的转化文件范围,排除node_module文件夹(node_modules 中使用的代码都是编译过的),可以只查找src目录下的文件

2、thread-loader 插件—多线程并行编译插件— Webpack 在打包的过程中是单线程的，特别是在执行加载器css- loader,babel-loader 转译代码、eslint-loader 检查语法错误、uglifyjs-loader 来压缩代码的时候，如果长时间编译的任务很多，这样就会导致等待的情况,前面一个loader编译完下一个loader才会执行。thread-loader插件可以将其他 loader 加载的任务分配给 worker 池中的多个 worker 来并行处理，这样就能充分利用系统资源来加快打包效率了

3、webpack-parallel-uglify-plugin—多线程并行压缩插件(webpack4以上默认production版本中开启了并行压缩代码插件)—是一个用于并行压缩 JavaScript 代码的 Webpack 插件,在传统的 UglifyJS 插件中，代码压缩是单线程进行的，当需要压缩大量的 JavaScript 代码时，会造成构建过程的阻塞，导致构建时间较长。在 Webpack4 中，不需要以上这些操作了，只需要将 mode 设置为 production 就可以默认开启以上功能。代码压缩也是我们必做的性能优化方案，当然我们不止可以压缩 JS 代码，还可以压缩 HTML、CSS 代码，并且在压缩 JS 代码的过程中，我们还可以通过配置实现比如删除 console.log 这类代码的功能。

4、缩小文件的搜索范围:可以配置extensions限制搜索列表:resolve.extensions中列出项目中实际使用的后缀名;可以将最常用的后缀扩展名放在最前面

4、优化resolve.alias配置文件路径别名:可以通过别名的方式来映射一个路径，能让 Webpack 更快找到路径

5、noParse:指定不需要解析的模块,一般是第三方模块(不需要改动), Webpack 不会扫描该文件;

6、拆包:减少每次构建时需要处理的模块数量;

7、webpack缓存:Webpack 执行打包构建过程中，可以利用缓存机制减少重复编译和打包的时间，vuecli中默认开启了;