使用场景多页应用一般会重复多次使用部分公共代码，这样每次加载单页的时候，就会重复去加载这些公共代码，会造成以下问题： 相同资源重复被加载，浪费用户流量，增加服务器成本 每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验 如果将这些公共代码抽取出来，并让浏览器缓存起来，用户在请求资 ...

两个webpack自带的优化：tree-shaking 和 scope-hosting 都是在生产（production）模式下 tree-shaking在 mode: production 下，使用 import 引入模块，打包时会忽略模块中没有使用的代码 举例： Javascript// t ...

使用 happypack 模块进行多线程打包，适用于文件较大的情况，本身启动多线程需要耗费时间 安装 happypack powershellyarn add happypack -D 修改配置文件，实现多线程打包 js 和 css Javascriptlet path = require( ...

场景需求在打包一个 react 的项目的时候，会把 react 和 react-dom 这两个库打包进来。这两个库很大且基本不会变，所以如果每次打包都要打包这两个第三方包的话，浪费时间，消耗性能 所以可以将 react 和 react-dom 单独打包好，然后动态链接引入即可。第二次打包时，发现 ...

- noParse 不解析没有依赖的库module 的 noParse 选项可以指定模块不进行依赖库的解析，直接进引入，加快打包速度；适用于引入一些没有依赖的独立的第三方库（例如 jquery） 正常引用 jquery import jq from jquery 时，会解析 jquery 库有没 ...

跨域问题基于浏览器的同源策略，即协议，域名，端口都一致浏览器才能发送请求，而服务端发送请求没有跨域的问题 使用 webpack 进行开发解决跨域问题主要有以下方法： 通过配置服务器代理不能操控后端代码时（比如前后端联调）可用 在配置文件 webpack.config.js 中添加 devSer ...

三种引入图片的方式： 1在 js 中创建 Image 实例引入把图片当做模块引入 javascriptimport logo from "./logo.png"let img = new Image()img.src = 'logo'document.body.appendChild(img) ...

概念webpack 是一个基于 NodeJS 开发的静态模块打包工具， 当 webpack 处理应用程序时，它会递归地构建一个依赖关系图( dependency graph )，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 代码构建是前端工程化，自动化的体现， ...

单页应用单页，只有一个 index.html src 文件下 index.js 引入了 a.js 模块，另外还有一个 b.js，将 index.js 和 a.js 作为入口打包成一个文件 build.js 引入页面内 javascript// webpack.config.jslet path ...

- CommonJS规范Node 应用由模块组成，采用 CommonJS 规范 导出模块采用module.exports,module.exports是一个对象，也是导出的接口 导入模块采用require引入这个对象 javascript// example.jslet x = 5var add ...