webpack怎么打包：基础实操流程

webpack怎么打包需要先初始化npm环境，安装webpack与webpack-cli，编写入口文件、配置webpack.config.js，执行打包命令生成dist产物，支持开发模式与生产模式切换，开发模式打包速度更快、保留源码映射便于调试，生产模式会自动压缩代码、去除冗余注释，这套流程适配单页面JS项目，静态资源多、多页面分离的项目需要额外配置loader与插件，不适合直接用来打包原生多页面、无模块化的静态页面集合。

webpack打包前置环境准备

你先在本地新建项目文件夹，打开终端进入目录，运行npminit-y生成package.json文件，这个文件用来记录项目依赖与脚本命令。接着执行npminstallwebpackwebpack-cli--save-dev，把核心打包工具安装到开发依赖，webpack负责模块解析与依赖图构建，webpack-cli提供终端调用命令，缺少webpack-cli会无法直接在终端执行打包指令。项目目录里新建src文件夹，内部创建index.js作为入口文件，所有业务代码、模块导入都从这个文件开始解析，webpack会顺着import或者require语句抓取全部依赖资源。

准备好基础文件之后，在项目根目录新建webpack.config.js，这是webpack打包的核心配置文件，采用CommonJS规范导出配置对象，基础配置需要填写entry指定入口路径，output设置输出文件名称与输出目录，输出目录默认推荐dist，每次打包前可以配置清理旧文件，避免历史残留文件干扰部署。

webpack打包基础配置编写

基础配置里entry字段填写'./src/index.js'，代表打包入口；output里面path使用path.resolve(__dirname,'dist')，filename设置为'main.js'，path模块是node自带模块，需要在配置文件顶部用require('path')引入，用来拼接绝对路径，防止不同操作系统路径识别异常。mode字段用来选择打包模式，取值为development或者production，mode不手动指定时，webpack会给出告警，默认偏向生产模式处理逻辑。

配置完成后打开package.json，在scripts节点新增build脚本，写入"build":"webpack"，后续你只需要在终端运行npmrunbuild就能触发打包。如果想要单独启动开发打包，新增dev脚本，"dev":"webpack--modedevelopment"，开发脚本不会开启代码压缩，构建后的代码可读性更高。

直接运行npmrunbuild。

命令执行结束，终端没有报错就代表打包成功，根目录自动生成dist文件夹，里面的main.js就是最终打包后的JS文件，你可以在HTML文件中通过script标签引入这个文件，在浏览器运行项目。如果打包过程出现模块无法识别的报错，代表引入了非JS类型文件，比如css、图片，webpack原生只能解析JS模块，需要额外安装对应loader，css文件搭配css-loader与style-loader，图片资源使用asset模块类型处理。

loader按照从右往左的顺序执行，配置rules数组匹配文件后缀，test字段写正则匹配文件后缀，use数组填写对应的loader名称，处理css资源时use数组顺序固定为['style-loader','css-loader']，顺序颠倒会出现样式无法注入页面的问题。asset资源类型可以替代旧版file-loader、url-loader，直接在type设置为'asset'，配合parser限定资源大小，小体积资源转base64嵌入JS，大资源输出为独立静态文件。

插件在plugins数组内配置，插件独立于loader，作用于打包全生命周期，clean-webpack-plugin可以在每次打包前清空dist目录，html-webpack-plugin能够自动生成HTML页面并注入打包后的JS资源，省去手动维护script标签的操作，插件都需要先安装为开发依赖，再在配置文件顶部引入实例化。

该方法的适用边界是项目采用ESModule或者CommonJS模块化写法，代码通过import、require管理依赖，纯静态页面没有模块化导入语句时，webpack不会自动串联多个JS文件，打包产物不会按预期合并代码，这类场景更适合使用gulp这类工具。

打包完成后，dist目录内的文件可以直接上传服务器部署，不要修改src内源码之后忘记重新执行打包命令，浏览器读取的依旧是旧的dist产物。