随笔分类 - webPack
webPack学习
摘要：如何⾃⼰编写一个Loader ⾃己编写一个Loader的过程是比较简单的， Loader就是⼀个函数，声明式函数，不能⽤用箭头函数 拿到源代码，作进一步的修饰处理，再返回处理后的源码就可以了 简单案例 l 创建一个替换源码中字符串的loader //index.js console.log("hel
阅读全文
摘要：Step14.Webpack构建项目进一步优化 webpack dll VS external webpack在打包后，生成的文件主要分为三种类型： * 业务代码 * 外部依赖库 * webpack runtime webpack中的dll和external在本质上其实是解决的同一个问题：避免将某些
阅读全文
摘要：RR4 本次采用单代码仓库模型架构（monorepo），这意味者这个仓库里面有若干相互独立的包，分别是： react-router React Router 核心 react-router-dom 用于 DOM 绑定的 React Router react-router-native 用于 Reac
阅读全文
摘要：Error: // webpackCannot find module '@babel/core'解决办法一： 原因"babel-loader": "^8.0.0" 版本问题。 使用"babel-loader": "^7.1.5"即可解决该错误。 package.json { "devDepende
阅读全文
摘要：参考：http://www.ferecord.com/webpack-summary.html#base64 写的比较详细了
阅读全文
摘要：项目 为了 兼容各个浏览器，需要加各种 c3前缀，如果手动的加肯定 相对比较麻烦，但是现在有webpack，gulp之类的 工具可以自动给我们加上，可以说效率上加速不少。如果 配置中 做个happypack打包缓存的话，配置的时候需要注意下，自己也踩了坑。 关键的一步就是： 如果是 开发环境 就 用
阅读全文
摘要：ftl-server 是一前端开发工具，支持解析freemarker模板，模拟后端接口，反向代理等功能。 特性 解析freemarker模板 静态资源服务 mock请求 代理请求 livereload weinre 安装 npm install -g node-gyp node-gyp instal
阅读全文
摘要：转自：https://github.com/lmk123/blog/issues/28 方法一：使用淘宝镜像 直接运行下面的命令即可： 我们可能更希望能直接使用 npm install 安装所有依赖，所以我的做法是在项目内添加一个 .npmrc 文件： 这样使用 npm install 安装 nod
阅读全文
摘要：1. 如何定位webpack打包速度慢的原因 首先需要定位webpack打包速度慢的原因，才能因地制宜采取合适的方案，我们可以在终端输入： webpack --profile --json > stats.json 然后将输出的json文件上传到如下2个网站进行分析 http://alexkuz.g
阅读全文
摘要：http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts Webpack 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包
阅读全文
摘要：1. 比如在项目中我们的publicPath需要根据服务器环境的变化而变化，这时我们会写一个配置文件，在webpack.config.js中读取，可以 如何才能 取到变量呢？ 这里介绍一种方法： 如果用node命令： 如下： "script" : { .... "server":"node getS
阅读全文
摘要：在项目开发中，一般写相对路径是没有问题的，但是在项目比较大的情况下，我的scss文件可能为了方便管理，会放在不同的文件夹下，有的可能又不需要放在文件夹下,比如我的scss文件结构如下： module common.scss test.scss about about.scss login.scss
阅读全文
摘要：Webpack有几个和模块化相关的loader，imports-loader,exports-loader,expose-loader，比较容易混淆。今天，我们来理一理。 imports-loaders 文档介绍的是：用于向一个模块的作用域内注入变量（Can be used to inject va
阅读全文
摘要：https://robertknight.github.io/posts/webpack-dll-plugins/ webpack一般会把一个文件里import/require的文件都会打包在一起，最近就在做这方面的工作，文件全部打包在一起了 对服务器的请求确实减少了，可是对于jquery和jque
阅读全文
摘要：关于对图片的打包 我们之前也说，webpack对与静态资源来说，也是看作模块来加载的。CSS我们是已经看过了，那图片是怎么作为模块打包加载进来呢？这里我们可以想到，图片我们是用url-loader加载的。我们在css文件里的url属性，其实就是一种封装处理过require操作。当然我们还有一种方式就
阅读全文
摘要：webpack中可以写commonjs格式的require同步语法，可以写AMD格式的require回调语法，还有一个require.ensure，以及webpack自己定义的require.include，再加上ES6的import语法，这么多岂不是会把人给搞乱。本篇就来梳理一下这些require
阅读全文
摘要：一般情况下，我们用webpack的时候。大多是用在单页应用上。 单是，某些情况下，我们用来做多页面的时候，有的时候，会需要在html内嵌 <script>，比如说，这个页面是服务端渲染的，我需要服务端带出一个变量。 比如说，在laravel的blade 模板引擎里。我们会这么写。 这样的话，这是一个
阅读全文
摘要：安装 loaders 如果loader在npm里，可以这样安装: 或者 $ npm install xxx-loader --save-dev 使用方法 There are multiple ways to use loaders in your app: explicit in the requi
阅读全文
摘要：文件的hash指纹通常作为前端静态资源实现增量更新的方案之一，Webpack是目前最流行的开源编译工具之一，其强大的功能也带来很多坑（当然，大部分麻烦其实都可以在官方文档中找到答案）。 比如，在Webpack编译输出文件的配置过程中，如果需要为文件加入hash指纹，Webpack提供了两个配置项可供
阅读全文
摘要：node的glob模块允许你使用 *等符号, 来写一个glob规则,像在shell里一样,获取匹配对应规则的文件. 这个glob工具基于javascript.它使用了 minimatch 库来进行匹配 用法: 首先下载glob包: npm install glob 调用格式: "globs" 就是模
阅读全文
浙公网安备 33010602011771号