Webpack 重要知识点快速汇总
Webpack 已经是前端打包构建的不二选择
每日必用,面试必考
webpack是一个成熟的工具,重点在于配置和使用,原理并不高优
一、基本配置
安装配置
yarn add webpack webpack-cli -D
hash是为了前端在代码不变的情况下命中缓存,从本地读取,提高速度
mode: 'production',
entry: path.join(srcPath, 'index.js'),
output: {
path: distPath,
filename: '[contenthash:8].js',
}
dev-server
yarn add webpack-dev-server
devServer: {
port: 9000,
progress: true, // 显示打包进度
contentBase: distPath, // 根目录
open: true, // 自动打开浏览器
compress: true, // 启动 gzip 压缩
// 设置代理
proxy: {
// 将本地 /api/xxx 代理到 localhost:3000/api/xxx
'/api': 'http://localhost:3000',
// 将本地 /api2/xxx 代理到 localhost:3000/xxx
'/api2': {
target: 'http://localhost:3000',
pathRewrite: {
'/api2': ''
}
}
}
}
配置package.json中的scripts
注意:在webpack4以后版本中,webpack-dev-server无法指定配置文件,可以替换使用webpack/server
"scripts": {
"dev:build": "webpack --config build-base-conf/webpack.dev.js",
"dev": "webpack serve --config build-base-conf/webpack.dev.js",
"build": "webpack --config build-base-conf/webpack.prod.js"
}
解析ES6
yarn add @babel/core @babel/preset-env babel-loader
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['@babel/preset-env']
}
}
解析样式
yarn add style-loader css-loader postcss-loader autoprefixer less-loader less
{
test: /\.(css)$/,
use: ['style-loader', 'css-loader', 'postcss-loader'] // postcss-loader 处理 css 的兼容性问题
},
{
test: /\.(less)$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
postcss-loader的配置文件 postcss.config.js
module.exports = {
plugins: [require('autoprefixer')]
}
解析图片文件
yarn add file-loader url-loader
生产模式:
// 图片,考虑 base64 编码的情况
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 小于 5kb 的图片用 base64 格式产出,否则依然沿用 file-loader 的形式,产出 url
limit: 5 * 1024,
outputPath: '/img/',
}
}
]
}
开发模式:
// 直接引入图片URL
{
test: /\.(jpg|jpeg|png|gif)$/,
loader: 'file-loader'
}
模块化
webpack 本身默认支持模块化
常见loader和plugin
二、高级特性
webpack基本配置只能做demo,不能做线上项目。面试考察基本配置,只是为了快速判断你是否用过webpack。以下高级配置,也是通过面试的必要条件
多入口
SPA - 单页应用
但有时候也需要多页应用,就得打包多入口
entry: {
index: path.join(srcPath, 'index.js'),
other: path.join(srcPath, 'other.js')
},
output: {
path