四个核心概念
entry(入口)
entry是整个配置文件的入口，没有之一。
entry有两种入口，四种配置。
两种入口
- 单文件入口
- 多文件入口
四种配置
- value为字符串
- value为对象
- value为数组
- 函数
代码演示
「第一种配置（字符串），主要用在单页面应用」
const { resolve } = require('path')
module.exports = {
entry:resolve(__dirname,'src/index.js')
}
「第二种配置（对象），主要用在多页面应用」
const { resolve } = require('path')
module.exports = {
entry:{
test:resolve(__dirname,'src/index.js'),
test2:resolve(__dirname,'src/index2.js')
}
}
「第三种配置（数组），这种配置可能比较少用，也是用在单页面应用，这种配置主要将数组的1-n项，打包到0项上，有时会用在js兼容，动态链DLL上」
const { resolve } = require('path')
module.exports = {
entry:[resolve(__dirname,'src/index.js'),resolve(__dirname,'src/index2.js')],
}
「第四种配置（函数），函数只要返回上面三种的其中一种就可以」
const { resolve } = require('path')
module.exports = {
entry:()=>'./src/index.js',
}
output(出口)
output的常用配置
- path(输出的位置，默认dist目录下)
- filename(输出文件的乳名，默认main)
- pulibPath(指定打包后的文件应该在哪里引用，一般用在生产环境,默认空)
代码演示
const { resolve } = require('path')
module.exports = {
output:{
path:resolve(__dirname,'dist'),
filename:'bundle.js',
publicPath:'http:baidu.com'
}
}
「filename的几种配置，可以直接像上面一样写死，也可以文件名加hash值动态设置，比如这样」
module.exports = {
output:{
filename:'[name]_[hash].js'
}
}
哈希值
webpack提供了以下几种哈希值：
- hash
- chunkhash (同一个chunk同一个hash)
- contenthash (一个文件一个hash)
module
module.rules就是loader的配置位置，loader用于解决一些代码的兼容性
module.rules的常用配置
- test (loader的匹配规则)
- exclude (排除哪些文件不需要匹配)
- include (只匹配哪些文件)
- loader (使用哪个loader,单个)
- use (使用哪些loader,多个)
代码演示
module.exports = {
module:{
rules:[
{
test:/.html$/,
exclude:/node_modelus/,
include:/src/,
loader:'html-loader',
},
{
test:/.css/,
use:['style-loader','css-loader']
}
]
}
}
loader的常用配置
- loader (使用哪个loader)
- options (传给loader的参数，loader的不同，options的参数也不同)
module.exports = {
module:{
rules:{
test:/.js$/,
exclude:/node_modelus/,
use:[
// 没参数
'thread-loader',
// 有参数
{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
}
]
}
}
}
plugins
plugins是配置插件的位置，它是一个数组,插件大多数情况是用于代码的优化。
一些常用的loader
css相关
- style-loader ( 处理style内联样式 )
- css-loader （处理.css文件）
- postcss-loader （处理css兼容）
- less-loader （处理.less文件）
- sass-loader （处理.sass/.scss文件）
let comment = [
"style-loader",
"css-loader",
{
loader:"postcss-loader",
options:{
postcssOptions:{
plugins:['postcss-preset-env']
}
}
}
]
module.exports = {
module:{
rules:[
{
test:/.css/,
use:[
...comment
]
},
{
test:/.less$/,
use:[
...comment,
'less-loader'
]
}
]
}
}
js相关
- babel-loader
- @babel/core
- @babel/preset-env
- @babel/polyfill
module.exports = {
entry:['@babel/polyfill','./src/index.js']
...
module:{
rules:[
{
test:/.js$/,
use:[
{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
// 或者
presets:[['env',{module:false}]]
}
}
]
}
]
}
}
文件相关
- url-loader
- file-loader
- html-loader
module.exports = {
...
module:{
rules:[
{
test:/.(png|jpg|gif)$/,
use:[
{
loader:file-loader,
options:{
limit:4 *1024,
name:'img/[name]_[hash:10].[ext]'
}
}
]
},
{
test:/.html$/,
loader:'html-loader'
}
]
}
}
vue相关
- vue-loader
- vue-style-loader
module.exports = {
...
module:{
rules:[
{
test:/.vue$/,
loader:'vue-loader'
},
{
test:/.css$/,
use:[
'vue-style-loader',
'css-loader'
]
}
]
}
}
优化
开发环境
- HRM (热替换)
- webpack-dev-server （本地服务器）
- soure-map （调试）
- webpack-bundle-analyzer（打包生成代码块分析视图）
- size-plugin（监控打包资源的体积变量化）
- speed-measure-webpack-plugin（分析loader和plugin打包的耗时）
体积优化
- css提取（mini-css-extract-plugin）
- css压缩 （optimize-css-assets-webpack-plugin）
- html压缩 （html-webpack-plugin ）
- externals （排除不需要被打包的第三方）
- js压缩 （production模式自动开启）
- tree-shake ( production模式自动开启(webpack4限EsModule;webpack5不限EsModule,CommonJs,优秀得很) )
- code-split ( optimization )
- import(懒加载，预加载（预加载慎用））
打包速度优化
- 多线程打包（thread-loader 、happyPack
- 动态链 （ DLL ）
- babel缓存（ 缓存cacheDirectory ）
- exclude / exclude (排除一些不需要编译的文件)
- module.noParse (排除不需要被loader编译的第三方库)
