webpack是前端工程非常重要的静态模块化打包工具，可以帮助我们将less、sass、esmodule、commonjs等模块依赖处理成浏览器可识别的静态资源.webpack虽然非常好用，但是配置项和语法非常多，理解和掌握的难度还是很大的。让我们从最基础的开始，一步步体验。不用webpack的时候，浏览器可以识别一些js代码。即使没有webpack，我们的代码也可以在浏览器端运行。使用esmodule做一个demo，新建demo文件夹，在demo文件夹新建src文件夹和index.html文件，在src文件夹新建util文件夹和index.js文件，在util文件夹添加math.js文件和项目结构如下demo├─src│├─util││└─math.js│├─index.js└─index.html在math.js中使用模块化导出方式，在index.js中导入，在index.html、index.js是通过script标签引入的。注意这里的script标签要加上type="module"来表示模块化//math.jsfunctionadd(a,b){returna+b;}functionsub(a,b){returna-b;}export{add,sub};//index.jsimport{add,sub}from"./utils/math.js";console.log(add(20,30));console.log(sub(20,30));//index.html表示esmodule可以被浏览器识别，但是如果我们只修改import和export的方式，改成commonjs浏览器是无法识别的//math.js-export{add,sub};+module.exports={+add,+sub,+};//index.js-import{add,sub}from"./utils/math.js";+const{add,sub}=require("./utils/math.js");浏览器不识别commonjs语法，所以会报错，说明浏览器不支持某些特定的语法。虽然commonjs可以用于浏览器端的一些解决方案，但是这个问题是单一方式解决的，可能还是有其他语法解析问题，为了处理所有的语法兼容问题，使用一个通用的解决方案，webpack统一处理浏览器无法解析某些语法的问题~要使用webpack，必须先安装webpack和webpack-clinpmiwebpackwebpackglobal-cli-gwebpack将编译我们编写的代码。如下表示index.js和math.js文件已经编译完成。虽然有“warning”警告，但还是编译成功。在上面的代码中，我们并没有告诉webpack要编译哪个文件，最后编译到哪个文件夹，怎么能直接编译成功呢？其实它有自己默认的编译规则，将src文件夹下的index.js文件和index.js文件使用的其他js文件的代码编译到dist文件夹下的main.js文件中。我们在index.html中引入main.js文件，看看编译结果~和上面使用esmodule导出的打印结果是一致的。初始化进一步体验webpack，需要依赖node。传入刚才demo文件夹的根目录。npminit-y初始化节点项目并生成一个package.json文件。项目中安装webpack和webpack-cli，以区别于全球版本5.70.0。我们指定安装5.60.0版本npmiwebpack@5.60.0-D全局和项目中安装webpack时，直接执行webpack看看你用的是哪个版本。仍然使用全局的webpack版本。当项目与全局的webpack版本不一致时，可能会出现一些问题。那么我们就可以通过以下方法获取项目中的webpack版本。直接在项目node_modules目录的.bin文件夹中找到webpack指令。/node_modules/.bin/webpack使用npx指令执行node_modules下的命令npxwebpack在package.json中的“script”中定义了指令“script”：{"build":"webpack"}然后通过npmrunbuild执行首先通过npmiwebpack-cli-D在项目中安装webpack-cli，然后就可以通过任意一个在项目中执行webpack命令行以上方法。编译时默认搜索有两条规则。如果不匹配，编译将不会成功。在src文件夹中找到index.js文件。执行webpack.config.js文件，把index.js文件的名字改成main.js，然后编译就报错了。有时候我们的项目结构可能和webpack默认的编译规则不一致。这时候我们可以通过命令行自定义编译规则，比如指定导入路径--entry文件名，指定导出文件夹--output-path文件名也可以在package.json中定义“脚本”:{"build":"webpack--entry./src/main.js--output-path./build"}然后通过npmrunbuild执行我们可能会有很多规则需要自定义，包括解析模块的入口、出口等资源解析方式。如果使用命令行或者package.json，可读性会很差，所以我们通过单独的js文件来定义。webpack.config.js定义了webpack.config.js文件，指定编译入口为src下的main.js，出口为dist文件夹下的bundle.js，然后通过module.exports导出定义的配置。这里有两点需要注意，webpack是在node环境下解析的，所以需要通过commonjs的export方式编译导入。可以使用相对路径，但导出需要使用绝对路径。使用_diname获取当前文件所在目录的绝对路径。constpath=require("path");module.exports={entry:"./src/main.js",output:{filename:"./bundle.js",path:path.resolve(__dirname,"./分布"),},};配置完成后，可以直接通过npxwebpack进行编译。这里也可以修改配置文件的名称，比如wk.config.js，或者通过命令行npxwebpack--configwk.config在.js或者package.json中配置构建规则来执行依赖图。webpack在处理应用时，会根据命令或配置文件找到入口文件。从条目开始，将生成一个依赖图。这个依赖图会包含应用程序中需要的所有模块（比如.js文件、css文件、图片、字体等），然后遍历图结构，将模块一一打包。上面我们做了webpack的初体验，还有很多配置规则，loader，plugin，source-map等等，持续更新中~
