一、webpack概念本质上webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)然后将你项目中所需的每一个模块组合成一个或多个bundles它们均为静态资源用于展示你的内容。二、安装1.使用webpack前我们先安装yarn npm install yarn -g 全局安装初始化文件 yarn init -y安装webpack yarn add -D webpack webpack-cli2.创建src文件夹 创建index.js文件打开index文件方法 创建html页面 进行js的引入或者使用在终端使用node命令 node js文件名称 直接执行当前的js命令3.配置 webpack 创建webpack.config.js 因为是个js文件想要全局进行使用所以进行抛出webpack 偏node写法 所以webpack抛出使用 node 抛出方法module.exports 加对象方式4.配置打包入口entry 是文件入口 配置好想要打包的页面 在终端进行打包yarn webpack有三种方式 单个文件打包 多个文件打包 多个文件命名打包打包命令 yarn webpackmodule.exports { 单个文件打包 // entry: ./src/index.js 多个文件一起打包 // entry: [./src/index.js, ./src/hi.js] 命名打包 entry: { index: ./src/index.js, hi: ./src/hi.js } }5.output出口文件出口文件 output: { filename: 指定名称 clean: true 清空打包文件 path: 指定打包位置 }但是path需要在配置前引入 pathh是自带的文件const path require(path);output: { filename: [name]-[id]-[hash].js, //指定名称 生成名字 id 和不同hash值 clean: true, //清空打包文件 path: path.resolve(__dirname, dist) //指定打包位置 __dirname默认名字 },6.模式mode 两种 production生产模式 development开发模式通过选择development,production或none之中的一个来设置mode参数你可以启用 webpack 内置在相应环境下的优化。其默认值为productionmodule.exports { // 模式两种 production 生产文件默认 development mode: production }7.loader转换某些类型的模块webpack 只理解JS与JSON文件 所以配置插件 让webpack识别其他语言 html或者react vue等loader 用于对模块的源代码进行转换。loader 可以使你在import或 load(加载) 模块时预处理文件。因此loader 类似于其他构建工具中“任务(task)”并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言如 TypeScript转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中importCSS 文件使用前要下载对应的loadernpm install --save-dev css-loader ts-loader使用在webpack.config.js文件中指定 loader 具体的loader模块在官网就可以查找module: { rules: [ { test: /\.css$/i, use: [style-loader, css-loader], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: asset/resource, }, ] }8.插件plugin 扩充了webpack的功能插曲babel 是将老版本的东西转为新版本(装指定版本的东西) 可以安装命令 npm install -D babel-loader babel/core babel/preset-env webpack下载插件 yarn add -D html-webpack-plugin D指的是开发环境在webpack.config.js内进行配置 需要引入 才使用插件const HtmlWebpackPlugin require(html-webpack-plugin); plugins:[ new HtmlWebpackPlugin({ template:./src/index.html }) ]9.映射源码“映射源码”通常指的就是Source Map。它是一个关键的信息文件里面存储着转换后代码与原始源代码的位置映射关系Webpack 通过devtool配置项来控制 Source Map 的生成方式和行为devtool:inline-source-map基本流程生成当你设置devtool为特定值如source-map并进行打包时Webpack 除了生成bundle.js还会生成对应的bundle.js.map文件 。关联在生成的bundle.js文件的最后一行会自动添加一行注释告诉浏览器 Source Map 文件的位置 。//# sourceMappingURLbundle.js.map加载与还原浏览器在默认情况下不会加载这个 map 文件。只有当你打开浏览器的开发者工具DevTools时浏览器才会根据注释去加载对应的.map文件 。然后浏览器利用 map 文件中的映射关系将正在执行的压缩代码在开发者工具的 Sources 面板中还原为你编写的源代码方便你进行断点调试 。10.安装开发服务器 服务器自动更新数据命令yarn add -D webpack-dev-server打包服务器yarn webpack serveserve开了线上服务器线上自动进行数据更新自动打包 yarn webpack serve --open11. 关闭体积校验performance: {hints: false},打包工具除了webpack 还有vite 比webpack更快