属性 | 类型 | 作用 |
---|
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
- css-loder 处理css
- style-loader 生成style标签并且添加到项目中
- file-loader 处理图片、字体等资源文件
- url-loader 压缩图片、字体等资源文件并且转换成base64格式,减少请求次数
- babel-loader js转换loader (需要配置’@babel/preset-env’)
- html-loader 对html文件进行处理(默认会处理img src属性)
常用plugin
- clean-webpack-plugin 自动清除输出目录
- html-webpack-plugin 自动生成html文件
- copy-webpack-plugin 拷贝不需要处理的文件, 指定输出目录([‘public’])
- mini-css-extract-plugin 实现css的按需加载(样式文件不是很大建议不要单独提取150kb)
- optimize-css-assets-webpack-plugin 压缩css文件
常用插件
- webpack-dev-server 提供了一个简单的web服务器,能够热更新当前项目