webpack是一种打包工具
----安装
npm install webpack webpack-cli webpack-dev-server -D
----webpack配置文件
可命名 webpack.config.js 单个总的配置文件
也可以拆分成3个配置文件,另建文件夹config,新建3个配置文件:webpack.common.js、webpack.dev.js、webpack.prod.js
其中,webpack.common.js配置文件中存放一些开发环境和生产环境公用的配置;webpack.dev.js配置文件中存放开发环境需要用到的一些私有配置;webpack.prod.js则存放生产环境需要用的一些私有配置
----entry 入口
程序执行的入口文件,可以通过webpack配置文件中的entry属性来配置指定一个或多个入口起点
例如:![](https://img-blog.csdnimg.cn/606953d714974b7db1029a6283576937.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Iqx6Ze05rC05ry-,size_20,color_FFFFFF,t_70,g_se,x_16)
上图中,main和util是两个入口起点
----output 输出
![](https://img-blog.csdnimg.cn/1ef51e533a894202adc5b2244e12a414.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Iqx6Ze05rC05ry-,size_20,color_FFFFFF,t_70,g_se,x_16)
output设置webpack打包后的文件输出文件名以及输出路径
filename属性设置entry配置的入口输出文件名称,如果含有多个入口文件,则如上图中,[name]对应entry中配置的多个入口的文件名
path属性设置输出路径
例如上图中的配置,在webpack打包后,会在dist文件夹中生成 main.build.js 和 util.build.js 两个入口文件
----loader 加载器
loader加载器,让webpack可以解析并打包除了js文件以外的其他文件(例如.css/.styl等),loader可以将所有类型的文件转换为webpack能够处理的有效模块
loader能够import导入任何类型的模块
![](https://img-blog.csdnimg.cn/4442fcda76c740f7a3cd0b0d50ce79f3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Iqx6Ze05rC05ry-,size_20,color_FFFFFF,t_70,g_se,x_16)
loader配置在module的rules中,具有2个属性,test属性和use属性
test属性,用于标识出应该被对应loader进行转换的某个或某些文件
use属性,表示进行转换时,应该使用哪个loader,可以按顺序配置多个loader
----plugins 插件
插件用于执行范围更广的任务,包括打包优化和压缩、重新定义环境中的变量等等
使用插件,需要require()引入,然后将其追加到plugins数组中
![](https://img-blog.csdnimg.cn/a363dff5af8341a7ab1cf99c2849ff84.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Iqx6Ze05rC05ry-,size_20,color_FFFFFF,t_70,g_se,x_16)
![](https://img-blog.csdnimg.cn/2e69491bed7641f5b5560553cdaf5e70.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Iqx6Ze05rC05ry-,size_20,color_FFFFFF,t_70,g_se,x_16)
html-webpack-plugin 插件 用来自定生成html文件
clean-webpack-plugin 插件 用来清理dist目录中的文件
uglifyjs-webpack-plugin 插件 用来压缩代码
webpack-bundle-analyzer 插件 用来查看打包模块依赖关系以及size
html-webpack-externals-plugin 插件 用来配置另外打包的第三方模块(不打包在vendors中) 便于自动生成script (其中,externals是一组供应商模块,第三方模块;externals[].module 模块名称;externals[].entry 模块路径;externals[].global 供应商的 dist 文件全局导出的对象的名称)
----mode 模式
可选择 development 或 production 中的一个来设置,设置后,可以一穷相应模式下的webpack内置的优化
![](https://img-blog.csdnimg.cn/ce513bc645da4fcabae7edaaf69613fa.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Iqx6Ze05rC05ry-,size_20,color_FFFFFF,t_70,g_se,x_16)
----devtool属性 和 webpack-dev-server工具
将devtool属性设置为 source-map 后生成源码的映射文件,方便进行debug调试
![](https://img-blog.csdnimg.cn/14465652d9014fffae57bce74c914cf7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Iqx6Ze05rC05ry-,size_20,color_FFFFFF,t_70,g_se,x_16)
webpack-dev-server工具用于监听和热更新
npm install webpack-dev-server -D
具体配置见上图中 devServer
----node 配置文件中 配置3个快捷命令
![](https://img-blog.csdnimg.cn/a607d084dd384c4fb55ac3ba72efcc83.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Iqx6Ze05rC05ry-,size_20,color_FFFFFF,t_70,g_se,x_16)
----分模块打包
![](https://img-blog.csdnimg.cn/c111d7b5d6d147489a5fd026ff1dc99b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Iqx6Ze05rC05ry-,size_20,color_FFFFFF,t_70,g_se,x_16)
externals 排除 指定某些模块不打包
optimization 提取多入口模块中的第三方库 单独整合打包 命名为vendors