文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一网打尽──Webpack工程打包之一

2024-12-02 19:44

关注

1.webpack的基本概念

1.1 webpack是什么?

webpack是一个现代js应用程序的静态模块打包器(module bundler),一种前端资源构建工具。

1.2 webpack可以用来做什么?

webpack作为前端工程师最常用的前端资源构建工具,能够解决很多在开发中的遇到的痛点和难点。

当然,webpack的强大不止这些,它有很多简单方便的配置能够提升你的开发效率。

2. webpack的核心配置

常用的核心配置如下:

当然,以上列举的是常用的配置,其它的需求可以查找官方文档进行阅读:[https://webpack.docschina.org/concepts/]

2.1 入口 entry

入口(entry)毫无疑问指的是webpack以哪个或哪些文件作为打包的起点,以哪个模块来构建内部依赖图。webpack会根据依赖图去分析各个模块之间的依赖关系,从而进行打包。

  1. //单文件入口,string形式:打包形成一个chunk,输出一个bundle文件,当然在实际开发中的灵活性不大 
  2. entry:"./src/index.js" 
  3.  
  4. //多文件入口,array形式:所有文件最终形成一个chunck,输出一个bundle文件 
  5. entry:["./src/index.js","./src/main.js"
  6.  
  7. //多文件入口,object形式:多个入口文件就形成多个chunk,最终输出多个bundle文件,而chunk的名称就是对象的key值.虽然这种方式比较繁琐,但是其扩展性比较强,配置可以重复使用,也可以配合其它配置组合使用。 
  8. entry:{ 
  9.   index:"./src/index.js"
  10.   main:"./src/main.js" 

当然在描述入口的对象的时候,还有许多其它配置属性,具体可以查看文档。

2.2 输出 output

输出(output)显而易见就是告诉webpack在哪里输出打包后的资源bundles,以及如何命名这些输出文件。当然主要文件默认为"./dist/main.js",其它文件则放在"./dist"文件夹中。

  1. // 打包出口  
  2. output:{ 
  3.     // 输出文件夹路径 
  4.     path:path.resolve(__dirname,"dist"), 
  5.     // 文件名 
  6.     // filename:"bundle.js" 
  7.     // 如果多个入口起点,应当使用占位符确保每个文件具有唯一名称 
  8.     filename:"[name].js"
  9.     // 所有资源引入公共路径前缀,用于生产环境需谨慎 
  10.     publicPath:"",//编译时,不知道其输出文件的地址,则将其置空,在运行时通过入口起点文件的__webpack_public_path__进行动态配置。 
  11.     chunkFilename: "[contenthash:10].chunk.js"
  12.     clean: true, //打包前清空输出目录,相当于clean-webpack-plugin插件的作用。 
  13.      
  14.     library: { 
  15.         name"[name]",//整个库向外暴露的变量名 
  16.         type: "window"//库暴露的方式 
  17.     } 

切记:即使可以存在多个 entry 起点,但只能指定一个 output 配置。

2.3 加载器 loader

正如你所知道的,webpack只能解析js和json文件,这是其天生自带的能力。而loader的能力就是让webpack可以去处理其它类型的文件,将其转为webpack能够解析的模块文件js或json,以提供给应用程序使用,生成到依赖图中。

  1. // 加载器 
  2. loader:{ 
  3.     // 匹配文件类型,服从正则表达式语法 
  4.     test:/\.css/, 
  5.     // 定义在转换时,使用到哪些loader,自下而上、自右至左进行处理 
  6.     use:[ 
  7.       "style-loader",//创建style标签,将js文件中的样式资源提取出来,添加到index.html文件的head标签中 
  8.       "css-loader",//将css文件转变成commonjs格式加载到js文件中 
  9.       { 
  10.         loader:"postcss-loader",//css的兼容性处理,切记:需要预先在package.json文件中配置browserlist 
  11.         options:{ 
  12.           postcssOptions:{ 
  13.             ident:"postcss"
  14.             // postcss-preset-env插件:帮postcss找到package.json中的browserslist配置,根据配置加载指定的兼容性样式 
  15.             plugins:[require("postcss-preser-env")()] 
  16.           } 
  17.         } 
  18.       } 
  19.     ] 
  20.   }, 
  21.   {  
  22.       test: /\.js$/,  
  23.       // 注意需要在package.json配置browserslist,否则babel-loader不生效  
  24.       // js兼容处理 babel  
  25.       loader: "babel-loader",  
  26.       // 规则只使用一个loader时推荐写法  
  27.       options: {  
  28.           presets: [  
  29.           [  
  30.               "@babel/preset-env"
  31.               // 预设:指示babel做怎么样的兼容处理  
  32.               {  
  33.                   useBuiltIns: "usage",  
  34.                   //按需加载  
  35.                   corejs: {  
  36.                       version: "3",  
  37.                   },  
  38.                   targets: "defaults",  
  39.               }  
  40.            ]  
  41.          ]  
  42.     }  

2.4 插件 plugin

插件plugin:插件其实就是辅助loader去执行范围更广的人物,从打包优化、文件压缩、资源管理以及重新注入环境变量。

  1. // CleanWebpackPlugin帮助你在打包时自动清除dist文件,学习时使用比较方便 
  2. // const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //从webpack5开始,webpack内置了该功能,只要在ouput中配置clear为true即可 
  3.  
  4. // HtmlWebpackPlugin帮助你创建html文件,并自动引入打包输出的bundles文件。支持html压缩。 
  5. const HtmlWebpackPlugin = require("html-webpack-plugin"); 
  6.  
  7. // 该插件将CSS提取到单独的文件中。它会为每个chunk创造一个css文件。需配合loader一起使用 
  8. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 
  9.  
  10. // 该插件将在Webpack构建过程中搜索CSS资源,并优化\最小化CSS 
  11. const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin"); 
  12.  
  13. // vue-loader V15版本以上,需要引入VueLoaderPlugin插件,它的作用是将你定义过的js、css等规则应用到vue文件中去。 
  14. const { VueLoaderPlugin } = require('vue-loader'
  15.  
  16. module.exports = { 
  17.     module: { 
  18.         rules: [ 
  19.             { 
  20.                 test: /\.vue$/, 
  21.                 loader: "vue-loader" 
  22.             }, 
  23.             { 
  24.                 test: /\.css$/, 
  25.                 use: [ 
  26.                     // MiniCssExtractPlugin.loader的作用就是把css-loader处理好的样式资源(js文件内),单独提取出来 成为css样式文件 
  27.                     MiniCssExtractPlugin.loader,//生产环境下使用,开发环境还是推荐使用style-loader 
  28.                     "css-loader"
  29.                 ], 
  30.             }, 
  31.         ], 
  32.     }, 
  33.     plugins: [ 
  34.         new HtmlWebpackPlugin({ 
  35.             template:"index.html" 
  36.         }), 
  37.         new MiniCssExtractPlugin({ 
  38.             filename: "css/built.css"
  39.         }), 
  40.         new OptimizeCssAssetsWebpackPlugin(), 
  41.         new VueLoaderPlugin(), 
  42.     ] 

2.5 模式

模式mode用于告知webpack需要使用对应环境模式下的配置,可以是production、development或者none,当然默认是production。

使用mode模式有两种方式,可以是在配置对象中设置mode选项。

  1. module.exports = { 
  2.     mode:"development" 

也可以是在package.json中的cli进行配置:

  1. webpack --mode=development 

官方文档中是这样写的:

选项 描述
development 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名。
production 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称,FlagDependencyUsagePluginFlagIncludedChunksPluginModuleConcatenationPluginNoEmitOnErrorsPlugin 和 TerserPlugin 。
none 不使用任何默认优化选项

如果要根据 webpack.config.js 中的 mode 变量更改打包行为,则必须将配置导出为函数,而不是导出对象:

  1. ar config = { 
  2.   entry: './app.js'
  3.   //... 
  4. }; 
  5.  
  6. module.exports = (env, argv) => { 
  7.   if (argv.mode === 'development') { 
  8.     config.devtool = 'source-map'
  9.   } 
  10.  
  11.   if (argv.mode === 'production') { 
  12.     //... 
  13.   } 
  14.  
  15.   return config; 
  16. }; 

其它常用配置:

  1. module.exports = { 
  2.     // 解析模块的规则: 
  3.     resolve: { 
  4.         // 配置 解析模块路径别名:可简写路径。 
  5.         alias: { 
  6.             "@": path.resolve(__dirname, "src"
  7.         }, 
  8.         // 配置 省略文件路径的后缀名。默认省略js和json。也是webpack默认认识的两种文件类型 
  9.         extensions: [".js"".json"".css"], // 新加css文件 
  10.         // 告诉webpack解析模块是去找哪个目录 
  11.         // 该配置明确告诉webpack,直接去上一层找node_modules。 
  12.         modules: [path.resolve(__dirname, "../node_modules")], 
  13.     }, 
  14.     // devServer(开发环境下配置): 
  15.     devServer: { 
  16.         // 运行代码的目录 
  17.         contentBase: path.resolve(__dirname, "build"), 
  18.         // 为每个静态文件开启gzip压缩 
  19.         compress: true
  20.         host: "localhost"
  21.         port: 5000, 
  22.         opentrue, // 自动打开浏览器 
  23.         hot: true, //开启HMR功能 
  24.         // 设置代理 
  25.         proxy: { 
  26.             // 一旦devServer(5000端口)接收到/api/xxx的请求,就会用devServer起的服务把请求转发到另外一个服务器(3000) 
  27.             // 以此来解决开发中的跨域问题 
  28.             api: { 
  29.                 target: "htttp://localhost:3000"
  30.                 // 发送请求时,请求路径重写:将/api/xxx  --> /xxx (去掉/api) 
  31.                 pathRewrite: { 
  32.                     "^api"""
  33.                 }, 
  34.             }, 
  35.         }, 
  36.     }, 
  37.  
  38.     // optimization(生产环境下配置) 
  39.     optimization: { 
  40.         // 提取公共代码 
  41.         splitChunks: { 
  42.             chunks: "all"
  43.         }, 
  44.         minimizer: [ 
  45.             // 配置生产环境的压缩方案:js和css 
  46.             new TerserWebpackPlugin({ 
  47.                 // 多进程打包 
  48.                 parallel: true
  49.                 terserOptions: { 
  50.                     // 启动source-map 
  51.                     sourceMap: true
  52.                 }, 
  53.             }), 
  54.         ], 
  55.     }, 
  56. }; 

3参考文章

webpack官方文档 

Webpack5.0学习总结-基础篇

 

来源:前端万有引力内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯