webPack学习之路(渡一)

322 阅读2分钟

继续沉淀吧,自己与别人的差距还很大,没有什么事情可以一步登天,让webPack成为你简历的一部分吧!

webpack简介

webpack是基于模块化的打包(构建)工具,它把一切视为模块它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(压缩、合并),最终生成运行时态的文件。

打包出来的结果是把所有依赖,所有代码都转化成js函数,把多个文件打包成一个可以在浏览器,node中执行的文件,且只有一行,减少代码体积,同时保护代码版权,包括 let,const都转换成var等等,增加代码的兼容性,使得开发者在开发过程中不用去考虑模块化兼容性问题,降低开发者的心智负担。

webpack的特点:

为前端工程化而生: webpack致力于解决前端工程化,特别是浏览器端工程化中遇到的问题让开发者集中注意力编写业务代码,而把工程化过程中的问题全部交给webpack来处理

简单易用: 支持零配置,可以不用写任何一行额外的代码就使用webpack强大的生态:webpack是非常灵活、可以扩展的,webpack本身的功能并不多,但它提供了一些可以扩展其功能的机制,使得一些第三方库可以融于到webpack中

基于nodejs: 由于webpack在构建的过程中需要读取文件,因此它是运行在node环境中的(就是在打包的过程中要用到,打包前跟打包后不用)

基于模块化: webpack在构建过程中要分析依赖关系,方式是通过模块化导入语句进行分析的,它支持各种模块化标准,包括但不限于CommonJs、ES6 Module

使用

webpack

默认情况下,webpack会以./src/index.js 作为入口文件分析依赖关系,打包到 ./dist/main.js 文件中

通过--mode选项可以控制webpack的打包结果的运行环境

--development 表示开发环境打包(打包成开发者已理解的代码,便于开发者调试)

--production(生产环境)打包成生产环境(变成一行代码)

CMJ跟ESM混合导出,webpack会打包时可以互相转换,es6的export default会变成一个属性

不同的模块化标准,webpack按照如下的方式处理

本文章主要用于渡一课程个人学习成果的复盘与总结,如有侵权马上就删🤗🤗🤗