一文彻底读懂webpack常用配置

开发环境

const webpack = require("webpack");
const path = require('path')
module.exports = {
    // entry: {
        // a: './src/0706/a.js',
        // c: './src/0706/c.js',
    // },
    entry: "./src/0707/reactDemo.js",
    output: {
        filename: '[name]_dist.js',
        path: path.resolve(__dirname, 'dist3'),
    },
    mode: 'development',
    devtool: 'source-map',
    module: {
        rules: [
            {
                test:/.js$/,
                use: 'babel-loader',
            },
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: 'file-loader'
            },
            {
                test: /.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10240 * 10
                    }
                }
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: 'file-loader'
            }
        ],
    },
    // plugins: [
        // new webpack.HotModuleReplacementPlugin()
    // ],
    // 在使用devServer的时候,如果hot为true的话,会自动帮我们添加HotModuleReplacementPlugin
    // 如果使用自己实现的服务器,就需要自己添加
    devServer: {
        contentBase: './dist3',
        hot: true
    }
}

生产环境

const webpack = require("webpack");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// minicssextractplugin 推荐使用cssminimizerwebpackplugin来压缩css
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
// 根据模板生产html,并插入相应的chunk,同时也可以压缩html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除构建产物的插件,注意这里的引入方式
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
    // entry: {
        // a: './src/0706/a.js',
        // c: './src/0706/c.js',
    // },
    entry: "./src/0707/reactDemo.js",
    output: {
        // 文件指纹 chunkhash chunk改变就会重新生成
        // hash 整个项目有文件改变就会重新生成
        // contenthash 文件内容改变才会重新生成
        filename: '[name]_[chunkhash:8].js',
        path: path.resolve(__dirname, 'dist3'),
    },
    mode: 'production',
    optimization: {
        minimizer: [
            // 压缩CSS
            new CssMinimizerPlugin(),
            // webpack5内置了terser-plugin,但是上面的插件会覆盖掉默认的terser-plugin,所以通过下面的一行来将默认的插件加回去
            '...'
        ]
    },
    module: {
        rules: [
            {
                test:/.js$/,
                use: 'babel-loader',
            },
            {
                test: /.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test:/.less$/,
                use: [
                    // 使用miniCssExtractPlugin提取css后,这里需要替换成它的loader
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name]_[hash:8].[ext]'
                    }
                }
            },
            {
                test: /.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10240 * 10
                    }
                }
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: 'file-loader'
            }
       ],
    },
     plugins: [
        new MiniCssExtractPlugin({
            // 使用contenthash 这样如果只改变了js的话css也无需重新生成
            filename: '[name]_[contenthash:8].css'
        }),
        new HtmlWebpackPlugin({
            // 模板所在路径
            template: path.resolve(__dirname, 'src/index.html'),
            // 生成的html的名字
            filename: 'index2.html',
            // 用到了哪个chunk
            // chunks: ['a']
            // 压缩选项
            minify: {
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: true
            }
        })
    ]
}

自动添加CSS前缀

  • 使用postcss-loader + autoprefixer
  • 添加postcss.config.js 新版本直接在webpack配置文件里添加会报错,所以需要写到一个独立的配置文件里
module.exports = {
    plugins: [
        require('autoprefixer')({
            overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']
        })
    ]
}
  • 添加loader
{
    test: /.css$/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader' // 这里为新加的loader
    ]
},

移动端适配 css px自动转rem

  • 使用手淘lib-flexible 动态计算font-size
// 将lib-flexible静态内联到html上,因为要最先执行计算
// 在头部加入如下代码
// 使用了raw-loader,相当于在对应的位置是插入字符串
// 需注意raw-loader新老版本引入的差异
<script type="text/javascript"
<%=require('raw-loader!babel-loader!./node_modules/lib-flexible/flexible.js')%>
</script>
  • 使用px2rem-loader 将px转成rem
{
    test: /.less$/
    use: [
        'style-loader',
        'css-loader',
        'less-loader',
        {
            loader: 'px2rem-loader',
            options: {
                // 以设计稿宽度750px为例,1rem = 75px
                remUnit: 75,
                // 转换后的小数点后保留位数
                remPrecision: 8,
            }
        }
    ]
}
  • 代码里面直接按设计稿一样写px
// 下面的px最后会被转成em,如果有些特殊的地方不想转,可写成大写PX
.box {
    width: 100px;
    height: 100px;
    // 写成大写则不会被转换
    border: 1PX;
}

代码分割

  • 利用splitChunks plugin将公共代码抽离
optimization: {
    splitChunks: {
        cacheGroups: {
            vendors: {
                chunks: 'all',
                name: 'vendors',
                // 将react和react-dom提取出一个包
                test: /(react|react-dom)/
            },
            common: {
                name: 'common',
                chunks: 'all',
                minSize: 0,
                // 被引用两次以上的提取出一个包
                minChunks: 2
            }
        }
    }
}

参考 前端进阶面试题详细解答

动态import 懒加载

  • 通过ES6的动态import + babel插件@babel/plugin-syntax-dynamic-import
//babel配置里增加
plugins: [
    '@babel/plugin-syntax-dynamic-import'
]
// 代码里按需引入
import('xxx').then(res => res.default);

webpack结合eslint

  • 以react为例,用到几个插件eslint eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
  • 安装解析器babel-eslint
  • 用airbnb的规则,需安装eslint-config-airbnb
  • 安装eslint-loader
  • 增加eslint配置 eslintrc.js
module.exports = {
    // 使用babel-eslint作为解析器
    "parser": "babel-eslint",
    // 继承airbnb的规则
    "extends": ["airbnb"],
    // 指定环境,这样使用全局变量的时候不会报错
    "env": {
        "browser": true,
        "node": true
    },
    // 自定义规则覆盖默认规则
    "rules": {
        // 使用4个空格缩进,否则error
        "indent": ["error", 4]
    }
}

webpack打包库

  • 代码写好后,webpack配置如下
const path = require('path');
module.exports = {
    // 同时提供未压缩和压缩的版本
    entry: {
        'mylibrary': './src/entry.js',
        'mylibrary.min': './src/entry.js'
    },
    output: {
        path: path.resolve(__dirname, 'lib'),
        // mylibrary.js mylibrary.min.js
        filename: '[name].js',
        // 对外暴露的库的名称
        library: 'mylibrary',
        // 支持cjs, ejs, script脚本等引入方式
        libraryTarget: 'umd',
        // 不加这个的话,使用的时候可能需要mylibrary.default
        libraryExport: 'default'
    }
}
  • 添加terser-webpack-plugin进行压缩

const TerserPlugin = require(‘terser-webpack-plugin’);

optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin({
            // 只对min版本压缩
            test: /.min.js/
        })
    ]
}
  • package.json 指定入口文件
"main": "index.js"
  • index.js里面做环境判断
if(process.env.NODE_EVN === 'production') {
    module.exports = require('./lib/mylibrary.min.js');
} else {
    module.exports = require('./lib/mulibrary.js');
}

主动捕获异常

  • 通过插件主动捕获异常
plugins: [
    function() {
        this.hooks.done.tap('done', (stats) => {
            if(stats.compilation && stats.compilation.errors.length > 1) {
                console.log('error')
            }
        })
    }
]

构建优化

速度优化:

  • speed-measure-webpack-plugin分析构建速度
const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
const spm = new SpeedMeasureWebpackPlugin();
module.exports = spm.wrap({...});
  • thread-loader开启多进程,放在需要的loader上面
module: {
    rules: [
        {
            test: /.js$/
            use: [
                {
                    loader: 'thread-loader',
                    options: {
                        workers: 3
                    }
                }
            ]
        }
    ]
}
  • include exclude缩小构建目标
  • resolve减少文件搜索范围
modules.exports = {
    ...
    resolve: {
        // 指定node_modules的路径,减少模块搜索层级
        modules: [path.resolve(__dirname, 'node_modules')]// import react的时候直接从指定的路径去找
        alias: {
            react: path.resolve(__dirname, './node_modules/react/dist/react.min.js')
        },
        // import xx from 'a'的时候,只找.js后缀的
        // 高频文件后缀名放前面
        extensions: ['.js'],
        // 指定入口,避免不必要的分析
        mainFields: ['main']
    }
}
  • 开启babel-loader缓存
// 仅需加个url参数
module: {
    rules: [
        {
            test: /.js$/,
            use: ['babel-loader?cacheDirectory=true'
        }
    ]
}
  • terser-webpack-plugin开启缓存
// webpack5之后不再用这种方式
new TerserWebpackPlugin({
    cache: true
})
  • cache-loader缓存
  • hard-source-webpack-plugin缓存,减少二次构建时间
plugins: [new HardSourceWebpackPlugin()]
  • terser-webpack-plugin默认开启了JS多进程压缩
optimization: {
    minimizer: [
        new TerserWebpackPlugin({
            // 指定进程数量
            parallel: 4
        })
    ]
}
  • 使用DLLPlugin进行分包

先构建出单独的包

// 单独的配置文件用于生成包
module.exports = {
    entry: {
        // 将react react-dom抽离出单独的包
        library: ['react', 'react-dom']
    },
    output: {
        filename: '[name].dll.js',
        path: path.resolve(__dirname, 'dist3/lib')
        library: '[name]'
    },
    plugins: [
        // 使用DLLPlugin抽离,生成manifest
        new webpack.DllPlugin({
            name: '[name]_2',
            path: path.resolve(__dirname, 'dist3/lib/[name].json'),
        }),
        // new CleanWebpackPlugin(),
    ]
}

再通过manifest关联抽离的包

// webpack.prod.config.js
new webpack.DllReferencePlugin({
    manifest: require('./dist3/lib/library.json')
})

最后将抽离的包插入html模板中

  • noParse 对完全不需要解析的库进行忽略 (不去解析但仍会打包到 bundle 中,注意被忽略掉的文件里不应该包含 import、require、define 等模块化语句)

体积优化

  • webpack-bundle-analyzer分析体积
plugins: [
    new WebpackBundleAnalyzer()
]
  • 图片压缩

使用image-webpack-loader

rules: [{
    test: /\.(gif|png|jpe?g|svg)$/i,
    use: [
        'file-loader',
        {
            loader: 'image-webpack-loader',
            options: {
                mozjpeg: {
                    progressive: true,
                },
                // optipng.enabled: false will disable optipng
                optipng: {
                    enabled: false,
                },
                pngquant: {
                    quality: [0.65, 0.90],
                    speed: 4
                },
                gifsicle: {
                    interlaced: false,
                },
                // the webp option will enable WEBP
                webp: {
                    quality: 75
                }
            }
        },
    ],
}]
  • 对CSS 进行tree shaking

使用purgecss-webpack-plugin,要配合mini-css-extract-plugin一起使用

const purgecssPath = path.join(__dirname, 'src');
const glob = require('glob');
new PurgecssPlugin({
    paths:
    glob.sync(`${purgecssPath}/**/*`, { nodir: true }),
}),
  • 动态polyfill

根据浏览器的user agent 动态下发polyfill

<script src="https://polyfill.io/v3/polyfill.min.js"></script>

或者可以自建CDN

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/1630.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Bezier + BSpline + CatmullRom】移动机器人曲线路径规划

问题&#xff1a;现有n1n1n1个2维的离散点Pi(xi,yi),(i0,1,⋯,n){P_i} \left( {{x_i},{y_i}} \right),\left( {i 0,1, \cdots ,n} \right)Pi​(xi​,yi​),(i0,1,⋯,n), 如何用Pi{P_i}Pi​拟合一条平滑的曲线&#xff0c;最后将曲线分割成数条 2阶/3阶贝塞尔曲线&#xff0c;…

HDFS的API操作

目录 客户端环境准备&#xff1a; 添加环境变量&#xff1a; 配置Path环境变量&#xff1a; IDEA操作&#xff1a; 创建包名&#xff1a; HDFS的API案例操作&#xff1a; 封装代码&#xff1a; 封装代码1&#xff1a; 封装代码2&#xff1a; 实现操作&#xff1a; 1.创…

每日一博 - Java 异步编程的 Promise 模式 CompletableFuture

文章目录概述概述Executor与线程池Java 中的线程池使用线程池的注意事项强烈建议使用有界队列默认拒绝策略要慎重使用注意异常处理的问题如何获取任务执行结果概述 最近在阅读耗子叔的《左耳听风》 &#xff0c; 记一些小笔记 概述 在 Java 中&#xff0c;在 JDK 1.8 里也引入…

深度学习应用技巧总结与pytorch框架下训练过程的记忆技巧

大家好&#xff0c;我是微学AI&#xff0c;今天给大家总结一下深度学习模型训练过程中的一些技巧总结&#xff0c;以及pytorch框架下训练过程的记忆技巧&#xff0c;很有用的干货&#xff0c;理解模型训练过程的步骤&#xff0c;让流程难懂&#xff0c;难记忆的过程变得简单&am…

通讯录-文件操作版

之前我们写过通讯录-动态开辟版&#xff0c;但里面的数据录入后&#xff0c;若退出程序&#xff0c;里面的数据也就跟着一起销毁&#xff0c;无法保存&#xff0c;所以今天我们来写可建议将通讯录信息保存起来的版本&#xff0c;这只要在原来的基础上加以改进就可以了。首先&am…

发光立方体效果 html+css

一.话不多&#xff0c;看效果 css简单创意特效&#xff0c;关注我看更多简单创意特效~ 二.实现&#xff08;附完整代码&#xff09; 定义标签&#xff1a; <div class"container"><div class"q1"></div><div class"h2"&…

Day921.chatGPT

chatGPT Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于chatGPT的内容。 一、什么是chatGPT ChatGPT&#xff08;全名&#xff1a;Chat Generative Pre-trained Transformer&#xff09;&#xff0c;ChatGPT 是一种基于 GPT (Generative Pre-trained Transformer)…

【Linux】进程的基础概念 进程的相关操作 进程的状态

进程一、进程的基本知识1、基本概念2、进程的描述 —— PCB3、task_ struct内容分类二、进程的相关操作1、在Linux下查看进程2、通过系统调用在代码中获取进程标示符3、如何创建子进程4、关于fork()的一些深度理解三、进程的状态Linux中的进程的状态四、僵尸进程与孤儿进程僵尸…

L2-014 列车调度 L1-082 种钻石 L1-083 谁能进图书馆

输入格式&#xff1a; 输入第一行给出一个整数N (2 ≤ N ≤105 )&#xff0c;下一行给出从1到N的整数序号的一个重排列。数字间以空格分隔。 输出格式&#xff1a; 在一行中输出可以将输入的列车按序号递减的顺序调离所需要的最少的铁轨条数。 输入样例&#xff1a; 9 8 4 2 …

STM32开发(九)STM32F103 通信 —— I2C通信编程详解

文章目录一、基础知识点二、开发环境三、STM32CubeMX相关配置四、Vscode代码讲解GPIO模拟I2C代码SHT30相关代码main函数中循环代码五、结果演示方式一、示波器分析I2C数据方式2、通过Modbus将获取到的数据传到PC上一、基础知识点 本实验通过I2C通信获取SHT30温湿度值&#xff…

一文带你看透前端世界里的日期时间,对就是Date

很高兴我们能够通过不同空间&#xff0c;不同时间&#xff0c;通过这篇博客相识&#xff0c;那一定是一种缘分&#xff0c;一种你和狗哥的缘分。今天我希望通过这篇博客对我所熟知的前端世界里的日期时间做一个汇总&#xff0c;不止是代码上的汇总哦&#xff01; 目录 一、时区…

flex布局优化(两端对齐,从左至右)

文章目录前言方式一 nth-child方式二 gap属性方式三 设置margin左右两边为负值总结前言 flex布局是前端常用的布局方式之一&#xff0c;但在使用过程中&#xff0c;我们总是感觉不太方便&#xff0c;因为日常开发中&#xff0c;大多数时候&#xff0c;我们想要的效果是这样的 …

C++数据结构 —— 哈希表、unordered_map/set封装

目录 1.哈希概念 1.1哈希函数 1.2哈希冲突 2.闭散列实现 3.开散列实现 4.容器的封装 4.1unordered_map 4.2unordered_set 4.3封装过程中遇到的问题 1.哈希概念 顺序结构以及平衡二叉搜索树结构中&#xff0c;在查找一个元素时需要经过比较。顺序查找时间复杂度为O(N…

顺序栈的实现

目录 一、数据结构中的栈 二、接口函数 三、栈的初始化 四、入栈 五、判断栈是否为空 六、出栈 七、栈顶元素及元素总数 八、顺序栈的销毁 一、数据结构中的栈 首先&#xff0c;栈&#xff08;Stack&#xff09;这个词在数据结构和操作系统两个学科中都有出现。 操作系…

图像分割系列(一)

图像分割分类 语义分割 把每个像素都打上标签&#xff08;这个像素点是人&#xff0c;树&#xff0c;背景等&#xff09; &#xff08;语义分割只区分类别&#xff0c;不区分类别中具体单位&#xff09; 实例分割 实例分割不光要区别类别&#xff0c;还要区分类别中每一个…

面向切面编程AOP

1.Spring的AOP简介 1.1什么是AOP AOP为Aspect Oriented Programming的缩写&#xff0c;意思是面向切面编程&#xff0c;是通过预编译和运行期动态代理实现程序功能维护的一种技术 AOP是OOP&#xff08;面向对象&#xff09;的延续&#xff0c;利用AOP可以对业务逻辑的各部分…

5个代码技巧,加速你的Python

5个代码技巧&#xff0c;加速你的Python 人生苦短&#xff0c;快学Python&#xff01; Python作为一种功能强大的编程语言&#xff0c;因其简单易学而受到很多初学者的青睐。它的应用领域又非常广泛&#xff1a;科学计算、游戏开发、爬虫、人工智能、自动化办公、Web应用开发…

蓝桥杯C++组怒刷50道真题(填空题)

&#x1f33c;深夜伤感网抑云 - 南辰Music/御小兮 - 单曲 - 网易云音乐 &#x1f33c;多年后再见你 - 乔洋/周林枫 - 单曲 - 网易云音乐 18~22年真题&#xff0c;50题才停更&#xff0c;课业繁忙&#xff0c;有空就更&#xff0c;2023/3/18/23:01写下 目录 &#x1f44a;填…

【C++】智能指针

文章目录&#x1f4d6; 前言1. 智能指针的引入1.1 内存泄露的危害&#xff1a;1.2 异常安全中的内存泄露&#xff1a;1.3 RAII思想&#xff1a;1.3 拦截异常解决不了的内存泄漏&#xff1a;1.4 智能指针解决&#xff1a;2. 智能指针的拷贝2.1 直接拷贝的问题&#xff1a;2.2 au…

STM32实战项目-触摸按键

前言&#xff1a; 通过触摸按键控制LED灯以及继电器&#xff0c;具体实现功能如下&#xff1a; 1、触摸按键1单击与长按&#xff0c;控制LED1&#xff1b; 2、触摸按键2单击与长按&#xff0c;控制LED2; 3、触摸按键3单击与长按&#xff0c;控制LED3; 4、触摸按键4单击与长…
最新文章