webpack基础

1. 什么是webpack
   模块打包工具

npx webpck index.js

上述命令在当前项目中查找webpack ，使用webpack打包index.js文件 index.js也就是打包的入口文件

webpack默认输出的文件夹是dist 默认输出的文件是main.js

如果未配置入口文件 执行npx webpack会报错

在 webpack.config.js 中配置入口文件后执行npx webpack 就可以打包成功

webpack默认的配置文件 webpack.config.js

不使用默认配置文件名执行npx webpack

指定执行的配置文件即可

使用脚本进行打包

上述scripts中的配置与下述相同

未设置mode会有如下警告，mode 有两个值分别为 development 和production，如果不设置默认为production，production模式代码会进行压缩混淆，development模式下不会压缩混淆代码

loader

为什么需要使用loader

webpack默认只能打包js文件，如果需要打包其他的文件需要使用loader

url-loader和file-loader的区别

url-loader多一个limit配置项，小于limit被打包成base64，大于打包成图片， 默认是会转换为base64

plugins
html-webpack-plugin // 自动在dist文件夹下生成html文件的插件
clean-webpack-plugin // // 在打包前删除上次打包的dist文件夹

sourceMap

下图是不同环境下的sourceMap的配置（建议）

热模块更新需要进一步学习

使用babel处理es6语法

tree shaking 只支持es module模式
作用：只引入导入的模块中需要的代码
生产模式下webpack配置文件中不需要做任何配置
在package.json中添加相关不希望受影响的文件 比如css文件

代码分割
作用：减小包的体积，提升加载速度 优化性能，提高用户体验

懒加载
懒加载可以优化性能，事现方式 import实现异步加载