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