webpack--基础配置

$\bullet$ mode

webpack根据不同的mode值会进行不同的内置优化，可选的值为：'none' | 'development' | 'production'，一般会提供两个配置文件一个指定development一个则指定production

$\bullet$ entry

该配置指定webpack的构建入口

$\ast$ 可以指定多入口

$\ast$ 可以将多入口的共有依赖提取

（dist下多了shared文件，index和other的文件不再包含jq源码）

$\ast$ 也可以通过函数形式生成动态入口

$\bullet$ output

指定打包后的输出目录

$\ast$ filename：导出的文件名称，可以不指定，默认以文件名作打包输出名称，多入口时一般如下。也可以组合使用

也可以是一个函数

$\ast$ path：指定导出的文件目录，没有时会自己创建，默认为dist

$\ast$ clean:打包之前清空output目录，可配置指定清空（webpack5之前一般借助CleanWebpackPlugin实现）

$\ast$ compareBeforeEmit:对比是否需要打包输出未改变的文件

$\ast$ assetModuleFilename：静态文件的输出目录，需要在静态文件处理的loader中设置

$\bullet$ loader

按文件类型进行预处理,一般是做转换处理。如我们直接在文件中引入css文件时，webpack打包会出错，因为webpack默认只认识js文件。需要使用css-loader去识别转换并利用style-loader将样式信息挂载到head的style标签上

$\ast$ 安装loader

cnpm i--save-dev style-loader css-loader (需要用yarn安装，npm或cnpm报错)

$\ast$ 使用

$\bullet$ plugin

提供某一项功能，如我们之前配置了多入口，需要每次在html中进行手动的引入。当我们在output中指定clean为true时，每次就都需要手动再添加一份index.html文件。此时我们就可以借助plugin在帮我们完成这件事

$\ast$ 安装插件

cnpm i html-webpack-plugin --save-dev

$\ast$ 使用