$cnpminstall-gwebpack$npminit最后再Ctrl+C跳出$cnpminstallwebpack--save-devfunctionhello(str){alert(str);}$webpackhello.jshello.bundle.js ...

现实webpack的打包产物大概长这样(只把核心代码留下来)：  实现一个简版的webpack依葫芦画瓢，实现思路分2步：1.分析入口文件，把所有的依赖找出来（包括所有后代的依赖）2.拼接出类似上面的立即执行函数找依赖constfs=require('fs');constpath=require('...

一般我们谈的webpack优化，无非就是分为打包时间和打包体积的优化。打包时间　　优化打包时间，我们能想到的策略：减少需要读取和解析的文件 和 提高打包性能。　　减少需要读取和解析的文件　　　　1.优化loader　　　　　　以babel-loader为例，如果可以，我们尽量规定includeexc...

由于系统业务比较复杂，微前端（多页应用）实现期望用一个app一个webpack的形式，这样可以更好隔离，而且每个app的webpackconfig可以定制。Nginx在前端项目中安装比较麻烦，所以考虑用nodejs来代理，社区比较成熟的node代理显然就是express的http-proxy-middleware了：v...

由于项目文件越来越多，最终导致在打包时报javaScriptheapoutofmemory错误解决方案：1.增加v8内存使用increase-memory-limit1）安装npmi-gincrease-memory-limit2）在项目目录运行increase-memory-limit它会默认吧v8引擎的内存上限提高...

用到一个新插件：html-webpack-inline-source-plugin(依赖于html-webpack-plugin)1.安装npmi-Dhtml-webpack-inline-source-pluginhtml-webpack-plugin2.编写webpack.config.jsconstpath=re...

在此之前，我们先谈谈前端项目的性能优化。优化前端项目无非就是2方面的优化：一、网络性能优化（重点）减少请求数量（webpack的天职就是打包）减少请求资源大小（压缩gzip,后端会完成）CDN加速、负载均衡（运维负责）二、运行性能优化减少DOM操作减少图片数量显而易见的，我们前端除了一些游戏、WEBGL项目、有大量DO...

webpack开发前端的时候往往是单独自己的服务器：1.express带上webpack-dev-middleware（自己实现了热更新，而且在memory-fileSystem,不会产生多余文件）2.webpack-dev-server（自己实现了热更新，而且在memory-fileSystem,不会产生多余文件）3...

有时候我们不想bundle.js过于大，想把一些库独立成文件单独拿出来module.exports={entry:{　　//bundle是我们要打包的项目文件的导出名字，app是入口js文件　　bundle:'app'，　　//vendor就是我们要打包的第三方库最终生成的文件名，数组里是要打包哪些第三方库,如果不是在...

我们在日常开发的时候会遇到一些每个页面都可能会引用到的库(例如jquery)这可能会导致我们在每一个页面都需要写这样一个语句：import$from'jquery';可能有人会担心，最后打包的时候，会不会重复的引入这个库的代码？webpack很聪明，无论在多少个模块页引入，同一个库最后打包也只会打包一次 但是...

去除没用到的css需要用到purifycss-webpack插件，而这个插件又依赖于purify-css1.安装npmipurifycss-webpackpurify-css-D2.加入插件//...plugins:[newextractPlugin('css/index.css'),newpurifycss({pat...

想要webpack帮忙自动加上“-webkit-”之类的css前缀，我们需要用到postcss-loader和它的插件autoprefixer1.安装npmipostcss-loaderautoprefixer-D2.加loader//...module:{rules:[{test:/.scss...

将本来镶嵌在bundle.js的css转到外面来，我们需要用到一个插件：extract-text-webpack-plugin使用方法：1.安装npmiextract-text-webpack-plugin-D2.配置letextractPlugin=require('extract-text-webpack-plug...

之前的博文有提到怎么样去实现热更新,但是居然要用到另外一个node框架（express）而且新增了一个入口（entry）两个插件（plugin）来实现，大大提高了配置的复杂度，这样其实对使用webpack的开发者来说是非常不友好的。之后我在技术胖的博客发现，原来早在webpack3.6的时候已经推出了webpack-d...

上一篇博文讲了怎么使用路由，这次主要讲讲怎么编写一个vue组件vue定义了一种“单文件组件”后缀为‘.vue’的文件，大概长这样子：<template><div><divv-for="ninobj":class="msg"@click="sa...