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