webpack属性配置

属性	类型	作用
entry	string、object（多入口）	指定入口文件
output	object	指定文件的出口（详细信息看下文output配置）
mode	string	development、 production（默认， 对代码进行压缩）、none(不进行处理)
module	object	解析除了js、json之外的文件（详细信息查看下文module.rules 配置）
plugins	array	使用各种插件 eg：[new htmlWebpackPlugin()]
devServer	object	开发环境配置（详细配置查看下文devServe配置）
devtool	string	配置辅助工具（详细配置查看下文courseMap类型）
optimization	object	集中配置webpack优化功能(详细配置查看下文optimization配置)

output配置

属性	类型	作用
filename	string	指定文件名称
path	string	指定输入文件目录（path.join(__dirname, ‘dist’)）
publicPath	string	指定根目录（‘dist/’）, 一般不需要指定，可以自动引入

module.rules 配置

属性	类型	作用
test	正则表达式	判断文件类型
use	string、array、object	处理不同文件的loader，loader为数组时执行顺序从后往前执行（类型为object详细信息查看下文use配置）

use配置（Object）

属性	类型	作用
loader	string	文件转换
option	array	基础配置

eg： 图片、字体等资源处理，小于10KB 进行base64转换并且嵌入到页面中， 大于10KB不进行压缩

devServe 配置

属性	类型	作用
contentBase	string	为开发服务器指定查找资源目录
port	number	端口
proxy	object	配置代理
hot	boolean	是否开启热更新（需要在plugin中调用 new webpack.HotModuleReplacementPlugin()）
hotOnly	boolean	当页面出现错误时不会执行热更新

courseMap类型

属性	类型	是否生成对应的sourceMap文件	是否源代码	特点
evel	string	no	no	使用evel函数包装
evel-source-map	string	yes	no	能定位到行列信息
cheap-evel-source-map	string	yes	no	只能定位到行
cheap-module-evel-source-map	string	yes	yes	能定位到源码错误位置
inline-source-map	string	yes	no	嵌入到url中
hidden-source-map	string	yes	no	影藏sourceMap文件
nosource-source-map	string	yes	no	看不到代码信息

建议：开发环境：cheap-module-eval-source-map（会显示出源码错误位置）
生成坏境： nosource-source-map（不会暴漏源码，只会抛出错误位置）

optimization配置

属性	类型	作用
usedExports	boolean	标记未使用代码
minimize	boolean、array（自定义压缩插件）	去除无用代码
concatenateModules	boolean	尽可能将所有的模块放到同一个函数中
sideEffects	boolean	判断是否有副作用
splitChunks	object	设置spllitChunks.chunks = all提取公共模块

html-webpack-plugin 属性配置

属性	类型	作用
title	string	html文件标题
meta	object	指定窗口大小
template	string	指定模板路径
filename	string	指定文件名称（默认index.html）

// webpack.config.js中配置
// npm install html-webpack-plugin --save-dev

const htmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
	new htmlWebpackPlugin({
     title: 'cache',
     meta: {
      	viewport: 'width-device-width'
     },
     template: './src/index.html'
  })
]

常用loader

1. css-loder 处理css
2. style-loader 生成style标签并且添加到项目中
3. file-loader 处理图片、字体等资源文件
4. url-loader 压缩图片、字体等资源文件并且转换成base64格式，减少请求次数
5. babel-loader js转换loader （需要配置’@babel/preset-env’）
6. html-loader 对html文件进行处理（默认会处理img src属性）

常用plugin

1. clean-webpack-plugin 自动清除输出目录
2. html-webpack-plugin 自动生成html文件
3. copy-webpack-plugin 拷贝不需要处理的文件， 指定输出目录（[‘public’]）
4. mini-css-extract-plugin 实现css的按需加载（样式文件不是很大建议不要单独提取150kb）
5. optimize-css-assets-webpack-plugin 压缩css文件
   

常用插件

1. webpack-dev-server 提供了一个简单的web服务器，能够热更新当前项目