Webpack学习

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属性来配置指定一个或多个入口起点

例如：

上图中，main和util是两个入口起点

----output 输出

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导入任何类型的模块

loader配置在module的rules中，具有2个属性，test属性和use属性

test属性，用于标识出应该被对应loader进行转换的某个或某些文件

use属性，表示进行转换时，应该使用哪个loader，可以按顺序配置多个loader 

----plugins 插件

插件用于执行范围更广的任务，包括打包优化和压缩、重新定义环境中的变量等等

使用插件，需要require()引入，然后将其追加到plugins数组中

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内置的优化

----devtool属性 和 webpack-dev-server工具

将devtool属性设置为 source-map 后生成源码的映射文件，方便进行debug调试

webpack-dev-server工具用于监听和热更新

npm install webpack-dev-server -D

具体配置见上图中 devServer

----node 配置文件中 配置3个快捷命令

----分模块打包

externals 排除 指定某些模块不打包

optimization 提取多入口模块中的第三方库 单独整合打包 命名为vendors