Entry 入口
- string 打包形成一个chunk 输出一个bundle 文件
- array 多入口 HRM功能中html热更新
- object 多入口 多个chunk 多个bundle
Output 输出
- filename
- path
- publicPath 资源引入路径
- chunkFilename 非入口chunk的名称的修改
- library 向外暴露
- libraryTarget 暴露到
Loader module 转化 翻译 预处理
- test 匹配
- use 多个loader
- exclude 排除
- exforce: ‘pre‘ 优先执行 ‘post‘ 延后执行
- loader 单个loader
- options
- oneOf 以下只匹配一个
Pligins 插件
Mode 模式
运行指令 webpack 会以./src/index.js 为入口文件开始打包 打包输出到./build/build.js
// 开发环境:
webpack ./src/index.js -o ./build/build.js --mode=development
// 生产环境：
webpack ./src/index.js -o ./build/build.js --mode=prodection
-
打包样式资源
-
打包html资源
-
打包图片资源
-
打包其他资源
-
缓存
babel 缓存 cachedirectory: true
文件资源缓存
- chunkhash 根据chunk生成的hash值 js中应用css文件hash值还是一致 属于同一个chunk
- hash 每次构建hash都会变化
- contenthash 根据文件的内容生成hash值 不同的文件hash一定不一样
-
代码分割
-
懒加载 webpackChunkName
-
预加载 webpackPrefetch: true
-
多进程打包 thread-loader
// webpack.config.js 配置文件
const { resolve } = require(‘path‘)
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘)
const OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin‘)
const AddAssetHtmlWebpackPlugin = require(‘add-asset-html-webpack-plugin‘)
// 复用cssloader
const commonCssLoader = [
// 这个loader取代style-loader 提取js中的css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件变成commomjs模块加载js中，里边内容是样式字符串
‘css-loader‘,
{
// 需要在package.json中定义browserslist
loader: ‘postcss-loader‘,
options: {
ident: ‘postcss‘,
plugins: () => [
require(‘postcss-preset-env‘)()
]
}
}
]
module.exports = {
// 入口
entry: [‘./src/index.js‘, ‘./src/index.html‘],
// 输出
output: {
// 输出文件名 [contenthash:10]hash值取10位 每次构建hash值不一样
filename: ‘[name].[hash:10].js‘,
// 输出路径
// ——dirname 当前文件的目录绝对路径
path: resolve(__dirname, ‘build‘)
},
// loader 配置 不同的文件配置不同的loader
module: {
rules: [
// 语法检查 eslint-loader eslint
// 设置检查规则 package.json中
{
test: /\.js$/,
exclude: /node_module/,
// 优先执行
enforce: ‘pre‘
loader: ‘eslint-loader‘,
options: {
// 自动修复eslint的错误
fix: true
}
},
{
// 以下loader只会匹配一个
// 不能有两个loader处理同一个文件 所以把eslint放在同级
oneOf: [
// 处理css
{
// 匹配文件类型
test: /\.css$/,
// 使用哪些loader进行处理
use: [...commonCssLoader]
},
// 处理less
{
test: /\.less$/,
use: [
// use数组的执行顺序 右到左 下到上
...commonCssLoader,
// npm i less less-loader -D
‘less-loader‘
]
},
// 处理img
{
// 处理不了html中的图片
test: /\.(jpg | png | gif)/,
// npm i url-loader file-loader -D
loader: ‘url-loader‘,
options: {
// 图片小于8kb，就会被base64处理
// 减少请求数量 减轻服务器压力
// 图片体积会更大 文件请求速度更慢
limit: 8*1024,
// url-loader默认使用es6模块化解析而html-loader引入图片是commonjs 解析时会出现问题 关闭url-loader的es6模块化 使用commonjs
esModule: fasle,
name: ‘[hash: 8].[ext]‘,
outputPath: ‘img‘
}
},
// 处理html
{
test: /\.html$/,
loader: ‘html-loader‘
},
// 处理其他
{
// 排除css/js/html
exclude: /\.(css|js|html|less|jpg|gif|png)$/,
loader: ‘file-loader‘,
outputPath: ‘other‘
},
// 1.js兼容处理babel-loader @babel-core @babel/preset-env
// 只能转换基本语法 promise不能转换
// 2.全部js兼容处理 @babel/polyfill 体积大 不考虑
// 3.按需加载 core-js
{
test: /\.js$/,
loader: ‘babel-loader‘,
exclude: /node_module/,
options: {
presets: [
‘@babel/preset-env‘,
{
// 按需加载
useBuiltIns: ‘usage‘,
// 制定cor-js版本
corejs: {
version: 3
},
// 指定兼容到哪个版本的浏览器
targets: {
chrome: ‘60‘,
ie: ‘9‘
}
}
],
// 开启babel缓存 第二次构建时会读取缓存
cacheDirectory: true
}
}
]
}
]
},
// plugins 配置
plugins: [
// 引入 html-webpack-plugin
// 创建一个空的html 自动引入打包输出的所有资源（JS/CSS）
// 需要有结构的html
new HtmlWebpackPlugin({
template: ‘./src/index.html‘,
// 压缩html
minify: {
// 移除空格
collspseWhitespace: true,
// 移除注释
removeComments: true
}
}),
// npm i mini-css-extract-plugin -D
new MiniCssExtractPlugin({
// 对输出文件进行重命名
filename: ‘css/build.css‘
}),
// 压缩css npm i optimize-css-assets-webpack-plugin -D
new OptimizeCssAssetsWebpackPlugin(),
// 告诉webpack哪些库不参与打包 同时使用时名称也得变
new webpack.DllReferenceOlugin({
manifest: resolve(__dirname, ‘dll/manifest.json‘)
}),
// 将某个文件打包输出出去 并在html自动引入该资源
new AddAssetHtmlWebpackPlugin({
filepath: require(__dirname, ‘jquery.js‘)
})
],
// 模式
mode: ‘development‘, // 生产会将js自动压缩
// devServer 自动化 只会在内存中编译打包 不会有任何输出
devServer: {
// 运行代码目录
contentBase: resolve(__dirname, ‘build‘),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true,
// 域名
host: ‘localhost‘
// 开启HMR功能 模块热替换
hot: true,
// 监视contentBase 目录下的文件 变化就 reload
watchContentBase: true,
// 忽略日志信息
clientLogLevel: ‘none‘,
// 除基本启动信息以外 其他内容都不显示
quiet: true,
// 如果出错 不全屏提示
overlay: false,
// 代理
proxy: {
‘/api‘: {
target: ‘http://localhost:9000‘,
pathRewrite: {
‘^/api‘: ‘‘
}
}
}
},
// source-map 调试工具 源代码到构建后代码映射技术 调试追踪源代码错误
dectool: ‘source-map‘,
// 解析模块的规则
resolve: {
// 配置路径别名
alias: {
$css: resolve(__dirname, ‘src/css‘),
@: resolve(__diename, "src")
},
// 配置文件后缀名
extensions: [‘.js‘, ‘.json‘],
// 告诉webpack 解析模块是去找哪个目录
module: []
},
optimization: {
// 可以将node_module中代码单独打包成一个chunk最终输出 分析多入口chunk中 有没有公共的文件 有会打包成单独一个chunk
splitChunks: {
chunks: ‘all‘,
// 分割的chunk最小为30kb
minSize: 30*1024,
// 没有最大限制
maxSize: 0
}
},
// 拒绝某些被打包进来
externals: {
jquery: ‘JQuery‘
}
}
dll 单独打包
webpack --config webpack.dll.js
const { resolve } = require(‘path‘)
const webpack = require(‘webpack‘)
module.exports = {
entry: {
jquery: [‘jquery‘]
},
output: [
filename: ‘[name].js‘,
path: resolve(__dirname, ‘dll‘),
// 打包的库里边向外暴露出去的名字
library: ‘[name]_[hash]‘
],
plugins: [
new webpack.Dllplugin({
// 映射库的暴露的内容名称
name: ‘[name]_[hash]‘,
// 输出文件路径
path: resolve(__dirname, ‘dll/maniifest.json‘)
})
],
mode: ‘production‘
}
webpack5