webpack5 externals打包时取消打包指定的库

默认情况vue的build打包，都是基于根路径来进行的，但是，如果我们将打包的文件放置再二级目录，就会导致文件无法加载，页面空白。原因有两个：路由路径无法正确匹配资源文件路径错误下面我们就来讲讲做法路由配置在路由实例的创建时，我们常常会看到一个base选项，内容如下：const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })base官方有很明确是解释：类型: string 默认值: "/"应用的基路径。例如，如果整个单页应用服务在 /app/ 下...

前言为了兼容之前的旧浏览器版本，特别是安卓4.4这种低版本，transform是一定得增加浏览器前缀的，但是我在项目中遇到了设置无效的问题，极度蛋疼，下面是我的解决教程，当然没这个问题，看这篇文章，相信你对如果给项目增加浏览器前缀，会有很充分的认识。教程给css增加浏览器前缀，业界的做法就是使用postcss，目前webpack与vue cli他们需要安装的依赖略有不同：webpack：pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...

问题多页面打包后，生成的script.php中包含了所有页面的js文件引入多页面打包后，生成的css.php中包含了所有页面的css文件引入解决方案个人判断是再new HtmlWebpackPlugin进行处理的时候出现了问题，他无法分辨被打包的页面是谁的。那么在HtmlWebpackPlugin中唯一区分的属性，就是chunks。但是在官方文档中，并没有声明他的类型。然后百度的文章，有两种：chunks:"xxxx"chunks:["xxxx","xxxx"]根据以往的经验，第一种应该是用于唯一值得情况，如果有多个则使用数组，...

图片处理yarn add url-loader file-loader --dev很多人教程都莫名其妙，一张嘴就说推荐使用url-loader解析器，但是闭嘴不提url-loader是基于file-loader的，所以用url就必须两个都装，否则一旦你设置了url的limit限制文件大小，文件超出设置得大小后，就会报file-loader不存在的错误。webpack.config.jsmodule.exports = (env, argv) => ({ //模块-解析器loader module: { rules: [ //图片文件 { ...

初始化安装yarn init yarn add webpack webpack-cli --devwebpack建议全局安装，省事yarn global add webpack webpack-cli如果不适用全局安装，直接在终端运行本项目的webpack需要使用npx命令npx webpack -v还有一个种办法就是在package.json创建快捷npm脚本，这样就不用加npx前缀了{ "scripts": { "build": "webpack" }, }使用scssyarn add style-loade...

莫名其妙就提示css冲突和顺序问题，而且组件里面的样式和class类名完全不相干，不知道怎么就给你冲突了。顺序都有点莫名其妙，这玩意谁先谁后都无所谓啊。看了好半天github上的issues也没有谁说出个所以然，反正就是大量的警告，18年就有人提出这个问题了，唉，头疼issues目前普遍的解决办法就是忽略这个警告，因为不是真的影响代码的运行。忽略警告打开vue.config.js文件夹，插入以下代码：module.exports = { css: { extract: { ignoreOrder: true }, }, }保存，然后重新打包，不会再提示 冲突和顺序问题了

经常漏删console真的很头疼，又不得不重新打包，所以希望有一款能在打包时自动删除console的插件。于是乎，就有了这篇文章。安装yarn add babel-plugin-transform-remove-console --dev安装完毕我们开始使用使用打开_babel.config.js_文件，输入以下代码，没有这个文件就手动创建。let plugins = []; if (process.env.NODE_ENV === 'production') { //正式环境自动删除console plugins.push('transform-remove-console')...

因为有这个需求，所以分享出来，省的百度找到的都是一堆垃圾文章。vue.config.js配置一个属性即可module.exports = { //指定输出路径 outputDir: 'build/dist' }outputDir配置输出的路径，默认是dist，我打包后文件输出到当前目录（vue.config.js相对）下的build目录下的dist文件夹

对于打包的优化，除gzip和按需引入，就只有cdn是效果最明显的了。首先使用cdn我们要明确一个事实，就是我们cdn加载的文件，他是没有所谓的按需引入的概念，他就是一个完整的包，顶多给你分为基础包、核心包、完整包啥的。所以，引入是定死的，不可能说你用到什么功能自动引入什么功能，那是本地打包才能做到的。就好比如element ui ，本地打包，我可以按需引入，用到什么引入什么，然后生成一个js文件，但是cdn，你要么就引入全部功能，要么就自己本地，只能这么二选一。所以，对于像element ui 这种框架的打包优化，如果你是按需引入，你可能需要调整为完整引入，因为最终打包使用的是cdn资源...

最近遇到一个需求设计一个开发的环境，由于产品本身很庞大，所以需要划分区域开发，每个人负责一个部分，但是又不太想使用官方的那种资源分布的模式，想独立开发，最后整合，且不相互干扰。于是有了这个。[hide]具体要求需要将每个分类单出拆分为一个独立的项目模块，里面有路由、vuex、组件、单页、静态资源等目录。例如：商城：购物车、订单页、商品页、设置页...文章：新建文章、文章列表、修改页、标签页...由于这种分类非常多，所以需要将类似商城、文章这些作为一个模块，每个小组负责一个模块开发，开发vue文件，组件、vuex、路由、静态文件、导航菜单都单独拆分，自己这个项目写一个入口文件，用于资源的调...