本文目录一览：
- 1、webpack和gulp的区别
- 2、vue.config.js中的webpack配置，优化及多页面应用开发
- 3、Vue项目打包后js文件压缩
- 4、webpack 如何配置 CSS抽取 和 打包压缩
webpack和gulp的区别
gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作
1.构建工具
2.自动化
3.提高效率用
webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案
1.打包工具
2.模块化识别
3.编译模块代码方案用
所以定义和用法上来说 都不是一种东西，无可比性 ，更不冲突！【当然，也有相似的功能，比如合并，区分，但各有各的优势】
vue.config.js中的webpack配置，优化及多页面应用开发
目录
官方文档
vue-cli3以下版本中，关于webpack的一些配置都在config目录文件中，可是vue-cli3以上版本中，没有了config目录，那该怎么配置webpack呢？
3.x初始化项目后没有了build和config文件，如果你想对webpack相关内容进行配置，需要自己在根目录下(与package.json同级)创建一个vue.config.js文件，这个文件一旦存在，那么它会被 @vue/cli-service 自动加载。(但需要我们自己手动创建哦vue.config.js，跟package.json同级)
在配置中绝大多数都是（可选项）
常规操作还是用到了commjs语法
部署应用包的基本Url，默认/, 可以设置为相对路径./,这样打出来的包，可以部署到任意路径上
输出文件目录（打包后生成的目录，默认dist）
打包后生成的静态资源目录，默认“ ” ，也就是我们打包后的css，js等存放的位置
是否在保存的时候检查
生产环境的 source map，可以将其设置为 false 以加速生产环境构建，默认值是true
可通过 devServer.proxy解决前后端跨域问题（反向代理）
扩展： hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
扩展：
Preload： 用于标记页面加载后即将用到的资源，浏览器将在主体渲染前加载preload标记文件。Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示；
Prefetch: 用于标记浏览器在页面加载完成后，利用空闲时间预加载的内容。Vue CLI 应用默认为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成prefetch提示。
webpack配置
扩展:
在这里configureWebpack和chainWebpack的作用相同，唯一的区别就是他们修改webpack配置的方式不同：
这里配置了全局sass 需要安装的依赖 sass-loader less-loader
由于 sass-loader 版本不同，loaderOptions 中的 additionalData 的键名也不同
vue-cli3中的webpack与vue多页面应用开发
相关参数:
封装
很好的pwa插件相关配置
pwa介绍及使用
当运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js;
上面已经提到过去掉打印的操作（console、debug）这里详细讲解一下
新版uglifyjs-webpack-plugin需写成以下方式
gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。
和我们正常创建项目相同，这里通过vue-cli3脚手架进行创建
Vue项目打包后js文件压缩
这段时间因为免费试用了 一台阿里云的服务器，配置是 2核4G 2M，
因为带宽太低了，每次在第一次加载的时候太慢了，通过F12调试，发现主要是因为加载的 js 过大而引起的。因此本文将主要讲解Vue项目打包后js、css、svg等文件过大的解决办法。
通过引入 compression-webpack-plugin 插件来打包，然后开启 nginx gzip 来解决问题
配置 compression-webpack-plugin 前后打包对比，我们查看 dist目录，能够发现大于10KB的 js ， css 等文件已经被压缩了
webpack 如何配置 CSS抽取 和 打包压缩
我们一般打包， webpack 会自动把 css 打包到 js 文件中去。 css 抽取 就是是把 css 抽取出来，生成 css 文件单独打包，然后在进行压缩。
接下来，我详细介绍下 css 是如何抽取 和 压缩的！
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/232214.html
微信扫一扫 
支付宝扫一扫 