webpack学习笔记（附Webpack5介绍）

喵桑丶
1,265 阅读11分钟

前言

在学习webpack过程当中整理的一系列笔记，如有不对的地方请各位老哥指导。

webpack到底是用来干什么的呢？

webpack是一个打包工具，它可以有什么作用呢？以下列举几类：

  • 1、打包你的代码，并去除你代码里面用不到的部分，提取用到的部分，也就是tree shaking
  • 2、配合各种loader让你可以使用sass，less，ts，es新语法，并且解析各种各样的文件
  • 3、帮你对于打包之后的项目通过使用plugin进行各种优化操作（压缩，混淆代码）

webpack的下载和基本使用

下载webpack

通过 npm install webpack webpack-cli -g(最新版本)

查看webpack版本号

webpack -v

// 创建webpack.config.js文件
const { resolve } = require('path');
module.exports = {
    entry:"./src/index.js", // 入口文件
    output:{ // 输出配置
        filename:'./built.js' // 输出文件名
        path:resolve(__dirname,'build/js') // 输出文件路径配置
    },
    mode:"production" // 生产环境
}
// 在任何模块文件内部，可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。



// index.js 入口文件配置
import data from "./data/json"
console.log(data);

function add(x, y){
    return x + y;
}
console.log(add(1, 2));

使用webpack指令对文件进行打包

image.png

打包成功后生成的文件和代码（因为生产环境js代码会自动压缩成一行进行显示）

image.png

image.png

基本使用结论

  • 1、webpack能处理js/json资源，css/img资源需要下载专属依赖来进行打包
  • 2、webpack分为开发环境和生产环境
  • 3、开发环境：就是你的代码在本地服务器上在测试、更改、运行，
  • 4、生产环境：你的代码就是已经开始在真实服务器中使用

webpack开发环境配置

1.打包样式资源

通过npm install css-loader style-loader less-loader -d安装处理样式资源的所需要的依赖

// 在webpack.config.js中的module里的rules中配置
// loader(样式)的配置
module:{
    rules:[
        // 详细loader配置
        {
            // 匹配哪些文件
            text:/\.css$/,
            // 使用哪些loader进行处理
            use:[
                // use数组中loader执行顺序从右到左/从下到上依次执行
                // 创建style标签，将js中的样式资源插入进去，添加到head中生效
                'style-loader',
                // 将css文件以字符串的形式变成comm模块加载js中
                'css-loader'
            ]
        },
        {
            text:/\.less$/,
            use:[
                'style-loader',
                'css-loader',
                // 将less文件编译成css文件
                'less-loader'
            ]
        }
    ]
}

2.打包HTML资源

通过npm install html-webpack-plugin -d安装处理html文件所需要的依赖

// 在webpack.config.js配置项中的plugins里配置如下选项
const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins:[
    // plugins的配置
    // html-webpack-plugin
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的HTML文件
    new HTMLWebpackPlugin({
        // 复制 "./src/index.html"文件，并自动引入打包输出的所有资源（JS/CSS）
        // title:'这是一个自定义的title'
        template:"./src/index.html"
    })
],
mode:"development"

3.打包图片(img)资源

通过npm install url-loader -d安装处理图片文件所需要的依赖

// 在webpack.config.js中的module里的rules中配置
module:{
    rules:[
        {
            // 问题：默认处理不了html中img图片
            // 处理图片资源
            test:/\.(jpg|png|gif)$/,
            // 使用一个loader
            loader:"url-loader",
            options:{
                // 图片大小小于8kb，就会被base64处理
                // 优点：减少请求数量（减轻服务器压力）
                // 缺点：图片体积更大（文件请求速度更慢）
                limit:8 * 1024,
                // 问题：因为url-loader默认使用es6模块解析，而html-loader引入的图片是commonjs规范
                // 解析时会出现问题[object,object]
                // 解决：关闭url-loader的es6模块化，使用commonjs解析
                esModule:false, // 关闭es6模块语法
                // 给图片进行重命名
                // [hash:10]取图片的hash值的前10位
                // [ext]取文件原来的扩展名
                name:'[hash:10].[ext]'
            },
            // webpack 5 需要加
            type:'javascript/auto'
        }
    ]
}

4.打包其他资源（iconfont..）

通过npm install file-loader -d安装处理图片文件所需要的依赖

// 在webpack.config.js中的module里的rules中配置
// 打包其他资源（除了html/js/css资源以外的资源）
{
    // 排除css/js/html资源
    exclude:/\.(css|js|html)$/,
    loader:'file-loader',
    options:{
        name:"[hash:10].[ext]"
    }
}

5.devServer（开发服务器）

在webpack.config.js中配置devServer

devServer:{
    // webpack5
    static:{
        directory: resolve(__dirname,"build")
    },
    // contentBase:resolve(__dirname,"build") 报错
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 是否自动打开页面
    open: true,
}

作用：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）

特点：只会在内存中编译打包，不会有任何输出

启动命令: npx webpack serve

6.开发环境完整配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const{ resolve } = require('path');

module.exports = {
    entry:"./src/js/index/js",
    output:{
        filename:"js/built.js",
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            // loader处理样式的配置
            // 处理less资源
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            // 处理css资源
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            // 处理图片资源
            {
                test:/\.(jpg|png|gif)$/,
                loader:"url-loader",
                options:{
                    // 代表8kb以下的图片会通过base64处理
                    limit:8 * 1024,
                    name:"[hash:10].[ext]",
                    esModule:false,
                    outputPath:"imgs"
                },
                type:"javascript/auto"
            },
            // 处理html中的img资源
            {
                test:/\.html$/,
                loader:"html-loader"
            },
            {
             // 处理其他资源
                 exclude:/\.(html|js|css|less|jpg|png|gif)/,
                 loader:"file-loader",
                 options:{
                     name:"[hash:10].[ext]",
                     outputPath:"media"
                 }
            }
        ]
    },
    plugins:[
        // plugins的配置
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        })
    ],
    // 开发服务器
    devServer:{
        static:{
            directory:resolve(__dirname,"build")
        },
        compress:ture,
        port:3000,
        open:true
    },
    mode:"development"
}

webpack生产环境配置

1.提取css成单独文件

通过npm install mini-css-extract-plugin -d安装所需要的依赖

const HtmlWebpackPlugin = requrie('html-webpack-plugin')
const MinCssExtractPlugin = requrie('mini-css-extract-plugin')
const { resolve } = require('path')

module.exports = {
    entry:"./src/js/index.js",
    output:{
        filename:"js/built.js",
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    // 创建style标签将样式放上去
                    // 'style-loader'这个loader取代style-loader
                    // 作用：提取js中的css成单独文件
                    MiniCssExtarctPlugin.loader,
                    // 将css文件整合到js文件中
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        }),
        new MiniCssExtractPlugin({
            // 对文件进行重命名
            filename:"css/built.css"
        })
    ],
    mode:"production"
}

效果

image.png

2.css兼容性处理

通过npm install mini-css-extract-plugin -d安装所需要的依赖

// 在webpack.config.js中的module里rules处理css的时候添加如下配置
// css兼容性处理：postcss => postcss-loader postcss-preset-env
// 帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性内容
{
    loader:"postcss-loader",
    options:{
        // webpack 5
        postcssOptions:{
            plugins:[
                "postcss-preset-env",
                [
                    // Opitons
                ]
            ]
        }
    }
}

效果

image.png

3.压缩css

通过npm install optimize-css-assets-webpack-plugin -d安装所需要的依赖

// 在webpack.config.js中的plugins配置如下
plugins:[
    new HtmlWebpackPlugin({
        template:"./src/index.html"
    }),
    new MiniCssExtractPlugin({
        filename:"css/built.css"
    }),
    new OptimizeCssAssetsPlugin()
]

效果

image.png

4.js语法检查

通过npm install eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -d安装所需要的依赖

// 在webpack.config.js配置中的modules里的rules配置如下选项
module:{
    rules:[
        // 语法检查:eslint-loader eslint
        // 注意：只检查自己写的源代码，第三方库是不用检查的
        {
            test:/\.js$/,
            exclude:/node_modules/,
            loader:"eslint-loader",
            options:{
                // 自动修复eslint的错误
                fix:true
            }
        }
    ]
}

在package.json中配置eslintConfig

image.png

5.js的兼容性处理

通过npm install babel-loader @babel/core @babel/preset-env-d安装所需要的依赖

  • 1、基本js兼容性处理@babel/preset-env 问题：只能转换基本语法，如promise不能转换
  • 2、全部js兼容性处理 @babel/问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了
  • 3 、需要做兼容性处理的就做：按需加载 core-js
module:{
    rules:[
        {
            test:/\.js$/,
            exclude:/node_module/,
            loader:"babel-loader",
            options:{
                // 预设：指示babel做什么样的兼容性处理
                [
                    '@babel/preset-env',
                    {
                        // 按需加载
                        useBuiltIns:'usage',
                        // 指定core-js版本
                        corejs:{
                            version:3
                        },
                        // 指定兼容性做到哪个版本的浏览器
                        targets:{
                            chrome:'60',
                            firefox:'60',
                            ie:'9',
                            safari:'10',
                            edge:'17'
                        }
                    }
                ]
            }
        }
    ]
}

6.html的压缩

通过安装npm install html-webpack-plugin -d实现html压缩

plugins:[
    new HtmlWebpackPlugin({
        template:'./src/index.html',
        minify:{
            // 移除空格
            collapseBooleanAttributes:true,
            // 移除注释
            removeComments:true
        }
    })
]

7.生产环境完整配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { resolve } = require('path');
const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        // 需要在package.json中定义browserslist
        loader:'postcss-loader',
        options:{
            postcssOptions:{
                plugins:[
                    [
                        'postcss-preset-env',
                        [
                            // Options
                        ]
                    ]
                ]
            }
        }
    }
]
// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';
module.exports = {
    entry:"./src/js/index.js",
    output:{
        filename:"js/builts.js",
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[...commonCssLoader]
            },
            {
                test:/\.less$/,
                use:[...commonCssLoader,'less-loader']
            },
            // 正常来讲，一个文件只能被一个loader处理当一个文件要被多个loader处理
            // 那么一定要指定loader执行的先后顺序；先执行eslint再执行babel
            {
                test:/\.js$/,
                exclude:/node_modules/,
                // 优先执行
                enforce:"pre",
                loader:"eslint-loader",
                options:{
                    fix:true
                }
            },
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                options:{
                    presets:[
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns:'usage',
                                corejs:{
                                    versions:3
                                },
                                targets:{
                                    chrome:'60',
                                    firefox:'50'
                                }
                            }
                        ]
                    ]
                }
            },
            {
                test:/\.(jpg|png|gif)/,
                loader:'url-loader',
                options:{
                    limit:8 * 1024,
                    name:"[hash:10].[ext]",
                    outputPath:'imas',
                    esModule:false
                },
                type:'javascript/auto'
            },
            {
                test:/\.html$/,
                loader:'html-loader',
            },
            {
                exclude:/\.(js|css|less|html|jpg|png|gif)/,
                loader:'file-loader',
                options:{
                    outputPath:'media'
                }
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:'css/built.css'
        }),
        new OptimizeCssAssetsPlugin(),
        new HtmlWebpackPlugin({
            template:"./src/index/html",
            minify:{
                collapseWhitespace:true,
                removeComments:true
            }
        })
    ],
    mode:"production"
}

webpack优化配置

1.HMR（优化打包速度）

HMR:hot module replacement 热模块替换/模块热替换

作用：一个模块发送变化，只会重新打包这一个模块，而不是打包所有模块，极大提升构建速度

  • 1、样式文件：可以使用HMR功能，因为style-loader内部实现了

  • 2、js文件：默认不能使用HMR功能，需要修改js代码。添加支持HMR功能的代码

注意：HMR功能对js的处理，只能处理非入口js文件。

if(module.hot){
    // 一旦module.hot为true，说明开启HMR功能 --> 让HMR功能代码生效
    module.hot.accept('./print.js',function(){
        // 方法会监听print.js文件的变化，一旦发生变化，其他模块不会重新打包构建
        // 会执行后面的回调函数
        print();
    })
}
  • 3、html文件：默认不能使用HMR功能。同时会导致问题：html文件不能热更新了

解决：修改entry入口，将html文件引入

module.exports = {
    entry:['./src/js/index.js','./src/index.html'],
    output:{
        ....
    }
}

2.soure-map（源代码映射技术）

// 在webpack.config.js配置devtool选项

module.exports = {
    entry:['./src/js/index.js'],
    output:{
        ....
    },
    module:{
        ...
    },
    plugins:[
        ...
    ]
},
mode:"development",
devtool:'hidden-source-map'

source-map:一种提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射关系可以追踪源代码错误）

  • 1 、sourec-map（外部）：错误代码准确信息和源代码的错误位置
  • 2 、inline-source-map（内联）：只生成一个内联source-map错误代码准确信息和源代码的错误位置
  • 3 、hidden-source-map（外部）：错误代码错误原因，但没有错误位置，不能追踪源代码错误，只能提示到构建后代码的错误位置
  • 4 、eval-source-map（内联）：每一个文件都生成对应的source-map，都在eval，错误代码准确信息和源代码的错误位置
  • 5 、nosources-source-map（外部）：错误代码准确信息，但没有任何源代码信息
  • 6 、cheap-source-map（外部）：错误代码准确信息，但没有任何源代码信息，只能精确到行
  • 7 、cheap-module-source-map（外部）：错误代码准确信息，但没有任何源代码信息，module会将loader的source-map加入

开发环境：速度快，调试更友好，速度（eval>inline>cheap>..）

生产环境：源代码要不要隐藏？调式要不要更友好？

内联会让代码体积变大，所以在生产环境不用内联，nosources-source-map全部隐藏，hidden-source-map只隐藏源代码，会提示构建好代码错误信息

3.缓存（上线代码性能优化）

babel缓存，cacheDirectory：true让二次打包速度更快，文件资源缓存

  • 1 、hash：每次webpack构建时会生成一个唯一的hash值， 问题：js和css同时使用一个hash值，如果重新打包会导致所有缓存失效，（可能我只改动一个文件）
  • 2 、chunkshash：根据chunk生成的hash值，如果打包来源同一个chunk（入口文件），那么hash值就一样 问题：js和css的hash值还是一样，因为css是在js中被引入的，所以同属于一个chunk
  • 3 、contenthash：根据文件的内容生成hash值，不同文件的hash值一定不一样 让代码上线运行缓存更好使用（上线代码性能优化）
// 在output中的filename文件后缀添加

module.exports = {
    entry:"./src/js/index/js",
    output:{
        filename:"js/builts.[contenthash:10].js",
        path:resolve(__dirname,'build')
    },
}

效果

image.png

创建serve.js文件 启动服务器

    // 服务器代码
    // 启动服务器起来
    // npm install nodemon -g
    // nodemon server.js
    // 访问服务器地址：http://localhost:3000
    
    const express = require('express');
    
    const app = express();
    // 暴露build目录 有效期为大概1个小时
    app.use(express.static('build',{ maxAge: 1000 * 3600 }))
    
    app.listen(3000)

4.tree shaking（去除无用代码）

前提：1.必须使用ES6模块化，2.开启production生产环境

作用：减少代码体积，请求速度加载更快

在package.json中配置

    "sideEffects":false // 所有代码都没有副作用（都可以进行tree shaking）

webpack5中 "sideEffects" 修改为 "sideEfects"

问题：可能会把css/@babel/polyfill（副作用）文件干掉 文件直接引入没有使用可能会干掉

解决："sideEfects":["*.css"]排除.css文件

5.lazyding（懒加载和预加载）

// 在入口文件index.js中配置

document.getElementById('btn').onclick = function (){
    // 懒加载：当文件需要使用时才加载
    // 预加载：prefetch会在使用之前，提前加载js文件
    // 正常加载可以认为是并行加载（同一时间加载多个文件）
    // 预加载 prefetch：等其他资源加载完毕，浏览器空闲了再偷偷加载资源
    import(/* webpackChunkName:'test',webpackPrefetch:true */'./test')
    .then(({ mul }) => {
        console.log(mul(4, 5))
    })
}

6.PWA（渐进式网络开发应用程序--离线可访问）

安装npm install workbox-webpack-plugin -d

// 在webpack.config.js中plugins配置如下选项

plugins:[
    new WorkboxWebpackPlugin.GenerateSW({
        // 1.帮助serviceworker快速启动
        // 2.删除旧的serviceworker
        // 功能：生成一个serviceworker配置文件
        clientsClaim:true,
        skipWaiting:true
    })
]

/* 在入口文件index.js配置
 1.eslint不认识window.navigator全局变量
 解决：需要修改package.json中eslintConfig配置
"env":{
    "browser":true 支持浏览器端全局变量
}
2.sw代码必须运行在服务器上
--> nodejs
-->
    npm install serve -g
    serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去
*/ 


// 注册serviceWorker 处理兼容性问题
if('serviceWorker' in navigator){
    window.addEventListener('load',() => {
        navugator.serviceWorker.register('./service-worker.js')
        .then(() => {
            console.log('sw注册成功了');
        }).catch(() => {
            console.log('sw注册失败了')
        })
    })
}

image.png

7.多线程打包

安装npm install thread-loader -d

// 在webpack.config.js中module里的rules配置
{
    test:/\.js$/,
    exclude:/node_modules/,
    use:[
        /*
        开启多线程打包，
        进程启动大概为600ms，进程通信也有开销
        只有工作消耗时间比较长，才需要多线程打包
        */
        {
            loader:'thread-loader',
            options:{
                // 产生的worker的数量，默认是cpu的核心数
                workers:2,
                // 一个worker进程中并执行工作的数量
                // 默认为20
                workerParallelJobs:50,
                // 额外的node.js参数
                workerNodeArgs:['--max-old-space-size','1024'],
                // 闲置时定时删除worker进程
                // 默认为500ms
                // 可以设置为无限大，这样在监视模式(--watch)下可以保持worker持续存在
                poolTimeout:2000,
                // 池(pool)分配给worker的工作数量
                // 默认200
                // 降低这个数值会降低总体的效率，但是会提升工作分布更均一
                poolParallelJobs:50,
                // 池(pool)的名称
                // 可以修改名称来创建其余选项都一样的池(pool)
                name:'my-pool'
            }
        }
    ]
}

externals（拒绝一些包参与打包）

例如：jquery

    const { resolve } = require('path');
    
    const HTMLWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        entry:"./src/js/index.js",
        output:{
            filename:"built.js",
            path:resolve(__dirname,"build")
        },
        plugins:[
            new HTMLWebpackPlugin({
                template:"./src/index.html"
            })
        ],
        mode:"production",
        // 拒绝一些包参数打包
        externals:{
            // 拒绝jQuery被打包进来
            jquery:"jQuery"
        }
    }

dll（对代码进行单独打包）

使用webpack里的DllReferencePlugin

安装依赖包npm install add-asset-html-webpack-plugin -d

    // 在webpack.config.js中的plugins配置如下
    const { resolve } = require('path');
    
    const webpack = require('webpack');
    const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
    module.exports = {
        // entry:....
        plugins:[
            // 告诉webpack哪些库不参与打包，同时使用时的名称也得变
            new webpack.DllReferencePlugin({
                manifest:resolve(__dirname,"dll/manifest.json")
            })
            // 将某个文件打包输出出去，并在html中自动引入
            new AddAssetHtmlWebpackPlugin({
                filepath:resolve(__dirname,"dll/jquery.js"),
                // 输出目录
                outputPath:"auto/"
            })
        ]
    }

效果

image.png

webpack配置详解

1.entry（入口起点）

  • 1 、单入口:string类型，打包形成一个chunk文件，输出一个bundle文件，此时chunk的名称默认是main。

    代码：entry:'./src/index'

  • 2 、多入口:array类型，所有入口文件最终只会形成一个chunk，输出出去的只有一个bundle文件。

    代码：entry:['./src/add.js','./src/count.js']。(只有在HMR功能中才能让html热更新生效)

  • 3 、多入口:object类型，有几个入口文件就形成几个chunk，输出几个bundle文件，此时chunk的名称是key

    代码：entry:{index:"./src/index.js",add:"./src/add.js"}

  • 4 、特殊用法：所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件

    代码：entry:{ index:["./src/index.js","./src/count.js"], add:"./src/add.js" }

2.output（打包后输出文件目录）

module.exports = {
    entry:"./src/index.js",
    output:{
        // 文件名称（指定目录+目录）
        filname:"js/[name].js",
        // 输出文件目录（将来所有资源输出的公共目录）
        path:resolve(__dirname,'dist'),
        // 所有资源引入公共路径前缀 --> "imas/a.jpg --> /imgs/a.jpg"
        publicPath:"/",
        // 非入口chunk的名称
        chunkFilename:'[name]_chunk.js',
        // 整个库向外暴露的变量名
        libray:"[name]",
        /* 
        librayTarget:'window', 变量名添加到那个上 browser
        librayTarget:'global', 变量名添加到那个上 node
        librayTarget:'commonjs', 变量名添加到哪个上 node
        */
    }
}

3.module里的loader配置

module:{
    rules:[
        // loader的配置
        {
            // 检查某些文件
            test:/\.css$/,
            // 多个loader用use
            use:['style-loader','css-loader']
        },
        {
            test:/\.js$/,
            // 排除node_modules下的js文件
            exclude:/node_modules/,
            // 只检查src下的js文件
            include:resolve(__dirname,'src'),
            // 优先执行
            enforce:"pre",
            // 延后执行
            // enforce:'post'
            // 单个loader用loader
            loader:"eslint-loader"
        },
        {
            // 以下配置只会生成一个
            oneOf:[]
        }
    ]
}

4.resolve（解析模块的规则）

// 解析模块的规则
resolve:{
    // 配置解析模块路径别名：优点简写路径，缺点路径没有提示
    alias:{
        $css:resolve(__dirname,'src/css')
    },
    // 配置省略路径的后缀名
    extensions:['.js','.json','.jsx','.css'],
    // 告诉webpack解析模块是去找哪个目录
    modules:[resolve(__dirname,'../../node_modules'),'node_modules']
}

5.devServer（开发环境服务器）

devServer:{
    // 运行代码的目录
    static:{
        directory:resolve(__dirname,'build')
    },
    // comtentBase:resolve(__dirname,'dist'),报错
    // 监视 contentBase 目录下的所有文件，一旦文件变化就会reload重载
    watchContentBase:true,
    // 监视文件
    watchOptions:{
        // 忽略文件 不参加监视
        ignored:/node_modules/
    },
    // 启动gzip压缩
    compress:true,
    // 端口号
    port:5000,
    // 域名
    host:"localhost",
    // 自动打开浏览器
    open:ture,
    // 开启HMR功能
    hot:true,
    // 不要显示启动服务器日志信息
    clientLogLeval:'none',
    // 除了一些基本启动信息以外，其他内容都不要显示
    quite:true.
    // 如果出现错误，不要全屏提示
    overlay:false,
    // 服务器代理 --> 解决开发环境跨域问题
    proxy:{
        // 一旦devServer(5000)服务器接受到 /api/xxx 的请求，就会把请求转发带到另外的地址
        'api':{
            target:'http://localhost:3000',
            // 发送请求时，请求路径重写，将/api/xxx --> /xxx(去掉/api)
            pathRewrite:{
                '^/api':''
            }
        }
    }
}

6.optimization（优化配置）

optimization:{
    splitChunks:{
        chunks:'all',
        // 以下为默认值，可以不写
        // 分割的chunk最小为30kb 小于30kb不会进行分割
        misSize:30 * 1024,
        // 最大没有限制 有多大都要分割
        maxSize:0,
        // 要提取的chunks最少被引用1次
        minChunks:1,
        // 按需加载时并行加载的文件最大数量为5
        maxAsyncRequests:5,
        // 入口js文件最大并行请求数量为3个
        maxInitialRequest:3,
        // 名称连接符
        automaticNameDelimiter:'~',
        // 可以使用命名规则
        name:true,
        // 分割chunk的组
        cacheGroups:{
            // node_modules文件会被打包到vendors组的chunk中 --> vendrors~xxx.js
            // 满足上面的公共规则：如 大小超过30kb，至少被引用一次
            vendors:{
                test:/[\\/]node_modules[\\/]/,
                // 优先级
                priority:-10
            },
            default:{
                // 要提取的chunk最少被引用2次
                minChunks:2,
                // 优先级
                priority:-20,
                // 如果当前要打包的模块和之前已经被提取的模块是同一个，就会复用
                reuseExistingChunk:ture
            }
        }
    },
    // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
    // 问题：修改a文件导致b文件的contenthash值变化
    // 解决：
    runtimeChunk:{
        name:entrypoint => `runtime=${entrypoint.name}`
    },
    minimizer:[
        // 配置生产环境的压缩方案：js和css
        new TerserWebpackPlugin({
            // terserOptions:{
                // 开启缓存
                // cache:true,
                // 开启多线程打包
                parallel:true,
                // 启动source-map
                // sourceMap:true
            }
        })
    ]
}

webpack5介绍

image.png

结语

如果你觉得此文对你有帮助，点个赞，鼓励一下。

avatar
文章
阅读
粉丝
相关推荐
《从 Webpack 到 Vite 系列一》大话 Webpack
745阅读
 · 
1点赞
webpack学习之路（一）基础配置
1.8k阅读
 · 
11点赞
webpack-cli 在 webpack 打包中的作用
3.4k阅读
 · 
17点赞
Webpack5 配置手册
3.7k阅读
 · 
8点赞
Webpack 如何配置热更新
11k阅读
 · 
12点赞
webpack5开箱体验
4.2k阅读
 · 
11点赞
前端工程化之Webpack
908阅读
 · 
3点赞
『转』vue-cli脚手架中webpack配置基础文件详解 | 切图妞
3.5k阅读
 · 
206点赞
webpack 5 prefetch runtime 代码解析
1.1k阅读
 · 
4点赞