細水、長流√的专栏

SplitChunks 插件是什么呢？简单的来说就是 Webpack 中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。提到前端优化，提取公共代码是必不可少的手段。在 Webpack 出现前，提取公共代码是人为去处理，而 SplitChunks 插件的作用就是通过配置让 Webpack 去帮你提取公共代码。Webpack创始人的初衷也是希望能有更多时间写更多代码，所以这种纯体力的劳动交给Webpack去完成。

umi本身提供了postcss、cssloader等，但是要想将jsx中的px转换成rem，并未找到相关的插件。而github上webpackChain的issue回复速度也是让人无语，文档也是不清不楚。上说了，umi本身的配置已经很完善了，但是肯定满足不了所有人各种各样的奇葩需求。比如今天说的将jsx中的style里，将px转换为rem。，觉得可以尝试，并且相信阿里。之后便是修改umi的webpack配置。很简洁的一句话，让人摸不着头脑。终于，在快要放弃的时候成功了。在配置config的时候，

Webpack之Loader原理及自定义Loader

2、使用 vue inspect 可以查看当前 webpack 配置。

转载于：http://xiaowiba.com/archives/1182/

（1）首先，在index.html页面增加配置（2）vue.config.js文件配置以上，chainWebpack中可以设置默认标题（1）首先在index.html文件配置（2）vue.conflg.js文件配置目录如下： ————————————————版权声明：本文为优快云博主「lala_shine」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.youkuaiyun.com/u013594477/arti

当有一个可在全局使用的公共less变量文件variable.less如何写才能一次性在所有.vue文件中引入这个文件?我尝试了几种方法1:安装style-resources-loader然后配置使用后 没有任何效果测试了 ./src @/src ~@/src 依然没有任何效果使用后 没有任何效果测试了 ./src @/src ~@/src 依然没有任何效果2:在main.js中引入variable.less这样确实可以获取到variable.less中的样式 但是变量拿不到提示:Var

刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功，后来经过自己不断尝试之后终于成功了。稍微坐下总结：1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置，而不要用webpack-simple，因为webpack里面很多插件加载器之类的都是给你预配好的，这样在项目构建中就不会遗漏什么。2.cnpm install postcss-pxtorem -D安装postcss-pxtorem，此插件如果你用的是webpack的话只要进行安装

场景在开发过程中，通常会遇到这样的问题：在开发环境、测试环境和生产环境中我们会用到不一样的接口 在生产环境出现了出现了某个bug，但是在测试环境不存在，这时候就需要开发环境访问生产环境的接口 多端一体的项目模式这些情况都要手动去切换接口地址，这样会很麻烦，有时还可能出现操作失误。这时候就需要用到cross-env进行分环境配置了，根据不同的环境，我们使用对应的接口，这样也就不用手动去操作。如何配置？通常情况下，我们可以在package.json文件中直接修改：例{ "scri

Entry：配置模块的入口。 Output：配置如何输出最终想要的代码。 Module：配置处理模块的规则。 Resolve：配置寻找模块的规则。 Plugins：配置扩展插件 DevServer：配置DevServer。 其他配置项：其他零散的配置项。 整体配置解构：整体地描述各配置项的结构。 多种配置类型：配置文件不止可以返回一个Object，还可以返回其他形式。 配置总结：...

package.json 非官方字段集合package.json官方字段请参考https://docs.npmjs.com/files/package.json。下面介绍的是非官方字段，也就是各种工具定义的相关字段。1.yarn相关字段yarn: 类似npm的依赖管理工具，但yarn缓存了每个下载过的包，所以再次使用时无需重复下载，同时利用并行下载以最大化资源利用率，因...

使用教程（一）--- entry，devtool，output，resolve使用教程（二）--- module.loaders使用教程（三）--- plugins我的Webpack版本是3.10.0DevServer （官方的文档）在开发模式下，DevServer提供虚拟服务器，让我们进行开发和调试。 而且提供实时重新加载。简直美滋滋。大大减少开发时间。 它不是we...

首先先说正确的操作步骤吧！1.首先你要确保nodejs安装成功2.在window+r --> cmd或者node.js command prompt或者git bash中操作如下命令，这里我用的是git bashnpm install webpack -gnpm install webpack --save-dev第二条命令是 npm install webpack --sa...

npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件 一个是 --save || -S // 运行依赖（发布）1另一个是–save-dev || -D //开发依赖（辅助）1区别是它们会把依赖包添加到package.json 文件–save ： dependencies 键下，发布后还需要依赖的模块，譬如像jQuery库或者Angular...

关于网友提出的“ webpack build后生成的app、vendor、manifest三者有何职能不同？”问题疑问，本网通过在网上对“ webpack build后生成的app、vendor、manifest三者有何职能不同？”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：问题： webpack build后生成的app、vendor、manifest三者有何职能不同？描述:...

在前文 Webpack 打包优化之体积篇中，对如何减小 Webpack 打包体积，做了些探讨；当然，那些法子对于打包速度的提升，也是大有裨益。然而，打包速度之于开发体验和及时构建，相当重要；所以有必要对其做更为深入的研究，以便完善工作流，这就是本文存在的缘由。Webpack Package optimization随着时间的推移，Webpack 也在不断的优化迭代；截至目前，已经更新至...

书接上文，利用http-server测试vue-cli打包后的项目。已经可以用http-server测试打包后的项目了，可是看到打包后的代码。。。.map文件第一次打包，发现打包后的文件怎么这么大，.map文件又是什么鬼？     经过一顿搜索，发现js的map文件.原来map文件只是帮助我们调试用的，毕竟打包后的代码都是压缩的，调试起来很不方便。测试没问题，正式上线时，我们完全...

利用PostCSS解决移动端REM适配问题上一期有提到结合postcss-px2rem插件来处理移动端适配的方案，以及相关的避坑方法，之后总觉得这个解决方案问题太多，也就诞生了另一套方案运用postcss-pxtorem插件来进行处理。那么这期番外篇讲的就是postcss-px2rem和postcss-pxtorem的利弊了。题外话，其实我也很好奇，为什么postcss-px2rem没...

使用 require.context 可以动态引入文件。参考官方文档，但是文档中的表述不甚清晰，因此我整理了几种用法和结果。先新建一个测试目录，安装 webpack。目录结构如下：使用 require完全使用变量 require(variable)代码如下：const filename = './dir/first-level.js';const func = requ...

因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。解决方法：找到webpack .prod.conf.js   1.定义版本变量： const  Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ，也可以自己定义成别的如：1.1    2.修改要生成的js和cs...

以前一直在纠结一个npm安装的包依赖管理的问题。是这样的：我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，他们是：--save-dev或--save首先需要说明的是Dependencies一词的中文意思是依赖和附属的意思，而dev则是develop（开发）的简写。所以它们的区别在 package.js...

在利用webpack的Vue项目中，在main.js中使用import Vue from 'vue' 导入的Vue的包，功能不完善，只是提供了runtime-only的方式，并没有提供像在普通网页中使用Vue那样的功能完善。包的查找规则（1）在项目根目录中查找有没有node_modules 的文件夹（2）在node_modules 中，根据包名，找对应的vue文件夹（3）在vue文...

2017年12月7日更新，添加了clean-webpack-plugin,babel-env-preset,添加本文涉及到的所有代码的示例，如果你在学习过程中出错了，可点击此处参考写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的...