webpack-cli没被找到：在webpack4.0之后，需要全局安装webpack-cli，在全局安装webpack之后，cnpmi webpack-cli-g在局部使用webpack时无需再安装了 ...

问题：解决：命令：npminstallwebpack-dev-server--save-dev以上就可以解决了。运行命令：    ....

（1）安装webpack  首先创建一个目录，比如demo，然后使用npm初始化配置npminit  接下来填好选项后，完成后会在demo目录下生成一个package.json的文件。输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在...

（1）前端工程化 近几年来，前端领域飞速发展，前端的工作早已不再是切几张图，写几个页面那么简单，项目比较大时，很可能会多人协同开发，模块化，组件化，CSS预编译等技术也被广泛的使用。前端自动化（半自动化）工程已经成为现在的主流。前端工程化主要解决一下问题Javascript、CSS代码的合并和压缩CSS预处理...

一.用file-loader编译不同后缀的图片1.配置webpeck.config.js文件constpath=require('path');consthtmlWebpackPlugin=require('html-webpack-plugin');module.exports={//node.js语法导出一个对象e...

为什么要使用proxyTable很简单，两个字，跨域。在平时项目的开发环境中，经常会遇到跨域的问题，尤其是使用vue-cli这种脚手架工具开发时，由于项目本身启动本地服务是需要占用一个端口的，所以必然会产生跨域的问题。当然跨域有多种解决方式，这里就不一一例举，下次弄篇文章单独讲，在使用webpack做构建工具的项目中使...

1、路径__dirname是一个全局变量，在项目html和js中没有单独定义，直接写就可以得到项目的根目录的路径module.exports={//__dirname是nodejs里的一个全局变量，它指向的是我们项目的根目录entry:__dirname+'/src/script/main.js',//入口文件outp...

1、安装css-loader和style-loader$cnpminstallcss-loaderstyle-loader--save-dev2、引用的时候使用css-loader，让webpack可以打包css文件 require('css-loader!./style.css');3、打包4、引入styl...

$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...