webpack学习

最新推荐文章于 2024-03-14 23:10:33 发布

豆子的玻尿酸鸭

最新推荐文章于 2024-03-14 23:10:33 发布

阅读量102

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/yihayu4345/article/details/102879362

版权

学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文深入探讨Webpack的最新特性，包括mode属性、插件和优化改进、WebAssembly支持、多模块类型、0配置模式及新的插件系统。详细解析配置文件的入口、出口设置，加载器如url-loader和babel-loader的使用，DefinePlugin与HtmlWebpackPlugin的功能，以及DevServer的自动化刷新机制。

摘要由CSDN通过智能技术生成

webpack学习笔记

该学习笔记源于B站视频https://www.bilibili.com/video/av51579321?t=137

webpack是一个现代JavasScript应用程序的模块打包器(module bunder)

一、介绍
webpack新特性：1、mode属性：development（开发模式）和production(生产模式，默认)
2、插件和优化：删除了CommonsChunkPlugin等插件
3、开箱即用WebAssembly带来运行时性能的大幅度提升
4、支持多种模块类型
5、0CJS：0配置，默认入口为’./src/‘ 输出为‘./dist/’
6、新的插件系统

二、配置文件–入口和出口
1、webpack.config.js
入口叫entry(多个文件使用对象)，出口叫output
2、loaders（加载器,后写的先执行）：预处理源文件
url-loader:小于边界的会变成Base64，大于边界的会变成普通的物理文件。
babel-loader（重要）：把ES代码转换成普通浏览器上运行的代码（也就是ES5）。
sass-loader=>MiniCssExtractPlugin
3、DefinePlugin/HtmlWebpackPlugin（plugin可以直接帮忙插入js）
4、DevServer:自动化刷新，路径和output相同，只是把js和css导入内存文件，不生产新文件。
5、autoPrefixer自动加前缀，使用到了browserslist，browserslist原理利用can i list里的API去检查你所使用属性的兼容性。