webpack

一、前期思考 最近要搞一个活动仪式，在正式写之前，我们思考了一下如何更好的实现这个需求。我们的项目比较大，这个需求也搞得很大......如果将这个活动直接放在项目A中，会有三个影响： 会造成项目体积增

最近新建了一个react项目，想加上cssModule进行样式隔离。如下： 通过拼接[文件名]__[类名]-[hash]生成一个唯一值，保证了样式不会冲突。 实现过程如下： 1、创建index.js文

每个项目的根目录下都有一个package.json文件，该文件中定义了项目需要的模块，项目的作者，关键词、运行命令等信息。它是一个json对象，文件中的key和value都要使用英文双引号进行包裹。下

当使用命令行启动项目时，npm会让命令行进入node_modules下的.bin文件，在该文件中查找webpack.sh或者webpack.cmd文件，如果找到就执行， 如果没有找到就报错。 webp

图片压缩是使用的image-webpack-loader插件进行压缩的。 Imagemin的优点： 有很多定制的选项， 可以对多种格式的图片进行单独的配置。 可以引入更多的第三方插件，比如：pngqu

一、JS删除 tree shaking原理： 将未使用的方法在编译阶段进行标记，再uglify阶段擦除，就不会被打包到bundle中。 使用： webpack默认支持的，不过要在生产环境才启用。.ba

一、使用高版本的node和webpack 使用高板本的webpack和node时，构建速度会体哦啊高60%~98% 二、webpack4的优化 v8引擎的优化，for of代替forEach、Map和

冒烟测试的作用是在版本发布的时候，检测项目是否可用，基本功能是否有问题。 比如构建是否成功，是否有js、css、html文件等。

一、优化构建日志 当我们在打包项目时，默认控制台会打印出来很多的日志信息，非常详细，但是其实我们并不需要获得到所有的日志信息，我们想突出重要的信息，比如错误、警告等，webpack提供了一个stats

正常的页面渲染是，开始接收html文件，但是还没有渲染时，先创建一个白屏，html边加载边渲染，加载成功后请求数据，然后将请求的数据渲染到页面上。这是浏览器端渲染的过程。 ssr是服务端渲染，它的过程

本文时通过实现一个大整数相加npm包的例子来讲解webpack如何打包npm包的。 该例子的要求： 有两个版本，一个是非压缩版（large-number.js），用于测试环境，一个是压缩版（large

代码分割的意义：在大型项目中，将所有的代码都打包在一起是不现实的，所以我们要将不同功能的代码拆分打包，并且在需要的时候才加载。 比如，我们项目的菜单栏有多个子项，我们想在访问一个子项的时候，其他子项页

一、原因 没有使用scope hoisting时，打包之后的代码，每一个使用es6语法引入的文件，都会创建一个这样的闭包： 然后将打包之后的文件代码放到这个闭包中，有n个文件，就会创建n个闭包，就会有

ttree shaking就是将项目中没有用到的代码，或者是永远不会执行的代码，在Uglify阶段查出，不打包到bundle中。 只支持ES6 Module代码。在production 环境默认开启。

实际项目中我们需要让一些公共资源只打包一次，避免浪费，同时避免有些文件过大，这就使用到了公共资源的分离。 比如我们在react项目中，就需要将react、react-dom进行分离，让它不打包进bun

webpack有一个devtool用来控制是否生成source map，以及source map是什么格式的，生成source map有利于我们调式代码，所以建议在开发环境打开source map，在

一、通用配置 当我们的项目由多个入口时，我们要在webpack的entry中配置入口文件，但是我们不想像这样： 这样手动的添加很麻烦，每次要增加一个入口页面，都要在entry里面增加一条，并且还要为每

资源内联也就是将一些资源以内联的方式加入到html中。 一、内联的意义 代码层面： 将页面框架初始化的脚本以内联的方式插入到html中，比如像之前说的lib-flexible库就可以以内联的方式插入到

一、样式前缀的自动补齐 现代浏览器的内核及前缀： IE浏览器：内核为Trident，前缀为-ms 火狐浏览器：内核为Geko，前缀为-moz 谷歌浏览器：内核为Webkit，前缀为-webkit 有些

在项目打包时，每一次打包之后都会产生一个打包目录，没有配置打包前自动删除构建目录时，打包后的文件会继续向该目录添加，造成该目录中的文件个数越来越多，除非我们在每次构建前手动的删除构建目录，但是这样很麻