四大核心概念
entry(入口)
种类
- 单入口
- 多入口
配置
- 字符串 标准单入口,用于单页面应用
- 数组 多个文件合并为一个入口,一般进行动态链dll配置
- 对象 每个属性为一个入口,用于多页面应用
- 函数 函数return上面三种之一
单入口
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, '../src/page/entry.js')
}
多入口
const path = require('path');
module.exports = {
entry: {
admin: path.resolve(__dirname, '../src/page/admin/entry.js'),
ticket: path.resolve(__dirname, '../src/page/ticket/entry.js'),
}
}
ouput(输出)
常用配置
- filename(输出文件的名字,可以写死,也可以使用下面方式自动匹配键名就可以对应多个入口)
- path(指定输出的目录)
- chunkFilename(除了入口外生成的文件名字)
- publicPath(指定文件打包后的引用路径,一般生产环境配置)
哈希值(跟缓存相关,每次打包发布后,哈希值不变的,打开页面就不需要重新获取,直接拿缓存)
webpack提供了这几种hash:
- hash(所有文件哈希值都一样,每次打包所有都将改变)
- chunkhash(针对entry每一个入口文件,如果其中一个发生改变,只会改变这个entry的哈希值,其他不会改变,也就是每个入口下生产的哈希值一样,如果修改某个入口的内容,只会变更这个入口下的哈希值,但是修改了公共文件,那么所有入口的哈希值都将改变,缓存都将失效)
- contenthash(所有打包出来的文件哈希值都不一样,内容不变,哈希值就不变)
单入口对应输出
const path = require('path');
module.exports = {
output: {
filename: 'main.js', // 出口文件名
chunkFilename: '[name].[chunkhash].js',
path: path.resolve(__dirname, '../dist'),
publicPath: 'http://www.baidu.com' // 页面内打包文件的引用路径前都加上这个
}
}
多入口对应输出
const path = require('path');
module.exports = {
output: {
filename: '[name].[chunkhash].js', // 根据入口名字命名
chunkFilename: '[name].[chunkhash].js',
path: path.resolve(__dirname, '../dist'),
publicPath: 'http://www.baidu.com'
}
}
loader(帮助处理打包js外的内容)
module.rules(loader配置在这里面)
- test(loader处理时匹配到的范围)
- include(loader处理时只包括的范围)
- exclude(loader处理时排除的范围)
- loader(使用单个loader)
- use(数组,使用多个loader)
- options(loader的配置项)
module.exports = {
module: {
rules: [
{
test: /\.(woff2?|eot|ttf|otf)$/i, // 单个loader与它的配置项
loader: "url-loader",
options: {
limit: 10000,
name: "[name].[hash:7].[ext]",
outputPath: "fonts",
},
},
{
test: /\.less$/i, // 多个loader和它的配置项
use: [
"vue-style-loader",
{
loader: "css-loader",
options: {
importLoaders: 2,
},
},
"postcss-loader",
"less-loader",
],
},
],
},
};
常用的loader
文件相关(字体)
- url-loader
- file-loader
js相关
- babel-loader
- @babel/core (babel核心包)
- @babel/preset-env (预设插件,里面包含一系列插件,通过.browserslistrc文件设置需要兼容的浏览器,避免兼容所有)
- @babel/runtime-corejs3
- @babel/plugin-transform-runtime (帮助runtime引入,避免冗余引入减小打包体积,其中corejs与之配合提供了沙盒环境利用假名避免全局污染,如果是corejs3,还提供corejs2不支持的实例方法.)
css相关
- css-loader(处理.css文件)
- style-loader(添加css进style标签内)
- postcss-loader(兼容,补全浏览器前缀)
- less-loader(处理.less文件)
vue相关
- vue-loader
- vue-style-loader (与style-loader差不多,只不过这个支持服务端渲染)
plugins(大多数用于优化代码,扩展loader)
让webpack能够执行更多任务,从优化和压缩,到重新定义环境中的变量,非常强大
插件目的在于解决loader无法实现的其他事。
使用时,只需要require它,并添加到plugins数组,通过new实例化即可
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
优化
开发环境
- webpack-dev-server (本地服务器) 详细配置
- HMR (热替换) 详细配置
- source-map (调试代码)
- html-webpack-plugin (简化html文件的创建) 详细配置
生产环境(主要做体积优化)
- mini-css-extract-plugin (css提取) 详细配置
- optimize-css-assets-webpack-plugin (css压缩) 详细配置
- terser-webpack-plugin (压缩js,生产环境默认开启,但是配置css压缩需要在minimizer配置,所以需要重新配置) 详细配置
- html-webpack-plugin (压缩html,简化html文件的创建) 详细配置
- tree-shaking (生产模式自动开启,但要注意引入代码有需要运行的(副作用)文件,需要通过package.json的sideEffects属性排除)
- splitChunks (代码分割) 详细配置
- externals (通过cdn引入的第三方,可以在这里设置后排除打包) 详细配置
- import (预加载和懒加载,预加载慎用)
打包速度
- thread-loader (多线程打包)
- DLL动态链
- 使用inclue和exclude(减少需要编译的文件)
- babel缓存(cacheDirectory)
- module.noParse(排除不需要被loader编译的第三方库)
