webpack学习

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去检查你所使用属性的兼容性。