前提:
webpack5及其对应配套内容
node16.13.2
webpack定制化 基础配置[基础、配置、初运行]
webpack定制化 高级配置[热更新、热打包、别名、调试]
webpack定制化 加载与插件[css加载器、html插件、image打包配置、babel代码兼容、vue加载器及配置]
一.优化提速
1. thread-loader
解释:能够多进程打包,速度更快
安装:npm i thread-loader -D #本文版本是3.0.4
配置:
module.exports ={
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['thread-loader','babel-loader'],
}
]
},
}
2.HotModuleReplacementPlugin
解释:热替换完全开启,最好是配置上该插件。
const webpack = require('webpack')
module.exports ={
plugins: [new webpack.HotModuleReplacementPlugin(),],
}
3.loader合理使用
参数
- exclude:除了某文件别的都经过loader
- include:只有某文件经过loader
示例:
module.exports ={
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['thread-loader','babel-loader'],
}
]
},
}
4. 压缩
4.1 js压缩
解释:适用于生产环境,因为压缩需要费时间,但是体积更小,默认是没有该压缩效果(该使得代码集中在一行,去掉空格,尽力压缩)
安装:npm i terser-webpack-plugin -D #本文安装是5.3.6
配置:
const TerserPlugin = require('terser-webpack-plugin')
module.exports ={
optimization: {
minimizer: [
new TerserPlugin({ // 压缩JS代码
terserOptions: {
compress: {
drop_console: true, // 去除console
},
},
}), // 压缩JavaScript
],
}
}
4.2 css压缩
解释:适用于生产环境,因为压缩需要费时间,但是体积更小,(该使得代码集中在一行,去掉空格,尽力压缩)
安装:npm i css-minimizer-webpack-plugin -D #本文版本是4.0.0
配置:
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports ={
optimization: {
minimizer: [
new CssMinimizerPlugin(), // 去重压缩css
],
}
}
5.多js打包
解释:由于项目比较大之后,如果所有内容都在main.js,该文件会很大用户体验会很不好。故现在不仅需要分割,而且分割的不同项目如果有共同的导入,它们的共同内容要导入同一个文件(方便浏览器缓存),不同内容根据html文件不同分别加载
配置:
webpack.config.json
A:
解释:实现多js打包,但如果只有该配置,打包出的两个项目会分别写入共同的内容,造成浪费(应该使得共同内容在一个文件里,两个项目都调用它)
module.exports ={
// 多入口
entry: {
main: './src/app/main.js',
app:'./src/app2/main.js'
}
}
B:
解释:使得共同内容在一个文件里,两个项目都调用它
module.exports ={
optimization: {
splitChunks: {
chunks: 'all', // 可选值:all,async 和 initial。all功能最强大,所以咱们就使用all
minSize: 20000, // 引入的模块大于20kb才做代码分割,官方默认20000,这里不用修改了
// maxSize: 60000, // 若引入的模块大于60kb,则告诉webpack尝试再进行拆分
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
priority: -10, // 优先级值越大优先级越高,默认-10,不用修改
name:'common',// 共用文件的名字
},
},
},
},
}
C:
解释:当使用html-webpack-plugin插件,实现多html配置,原理就算重复写几遍.此时使用热更新服务器,需要在网址后面加上自己定义的html文件名(默认一打开找的是index.html)
module.exports ={
plugins: [
new HtmlWebpackPlugin({
template: './public/templates/index.html',
filename: path.resolve(__dirname, './dist/templates/index.html'),
// js文件插入 body里
inject: 'body',
chunks:['main']// 对应input入口文件
}),
new HtmlWebpackPlugin({
template: './public/templates/login.html',
filename: path.resolve(__dirname, './dist/templates/login.html'),
// js文件插入 body里
inject: 'body',
chunks:['app']// 对应input入口文件
})
],
}
6.多css打包
解释:多css打包需要mini-css-extract-plugin,如果要打包成多个,只需要把插件里面的配置filename的命名设为动态的即可,这种配置,一个入口被打包为对应一个css(需要提前配置多js打包的A)
module.exports ={
plugins: [
new MiniCssExtractPlugin({
filename: '../css/hh-[name].[contenthash].css',// 以webpacke配置的js路径为当前路径
ignoreOrder: true, // 忽视掉打包过程中出现的冲突警告
}),
],
}
7.gzip
解释:gzip是网络传输当中的一种压缩形式,其分两种情况;①把代码部署到nginx服务器,nginx进行压缩并且传输,②通过webpack配置插件在打包时就把代码进行压缩,但是还需要nginx服务器修改一下配置。好处显而易见,第②种能节省服务器资源,下面说的便是第二种
安装:npm i compression-webpack-plugin -D #本文版本是10.0.0
配置:
module.exports ={
plugins: [
new CompressionPlugin({
algorithm: 'gzip',
exclude: /\.(map|html)$/, //不对里面的文件进行打包
threshold: 10240,// 大于10kb进行压缩
})
],
}
nginx服务端配置:
ubuntu 20.04.1
目录结构:
html
├── static
│ ├── css
│ │ ├── app.css
│ │ ├── app.css.map
│ │ ├── main.css
│ │ └── main.css.map
│ ├── img
│ │ └── 27f4f737224efc87924d.png
│ └── js
│ ├── ch-app.a28a9a63f7dbffe571d3.js
│ ├── ch-app.a28a9a63f7dbffe571d3.js.map
│ ├── ch-common.c7fe901c10f53091261f.js
│ ├── ch-common.c7fe901c10f53091261f.js.gz
│ ├── ch-common.c7fe901c10f53091261f.js.LICENSE.txt
│ ├── ch-common.c7fe901c10f53091261f.js.map
│ ├── ch-main.390bd6e9bd01eaea6a67.js
│ └── ch-main.390bd6e9bd01eaea6a67.js.map
└── templates
├── index.html
└── login.html
/etc/nginx/sites-enabled/default
参数:添加gzip_static on;
# 关键点在倒数第二行
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html/templates;
# Add index.php to the list if you are using PHP
index index.html;
server_name _;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
#静态请求
location /static {
alias /var/www/html/static;
gzip_static on;
}
}
结语:请把本系列都看完再投入开发环境,优化配置很重要