良许Linux教程网 干货合集 讲解一下Webpack原理与实践

讲解一下Webpack原理与实践

简单了解了几个常用的插件,一般适合用于任何类型的项目,不管是否使用了框架。webpack为每个工作环节都预留了合适的钩子,扩展时只需要找到合适的时机去做合适的事情。

讲解一下Webpack原理与实践

写在前面

webpack插件机制的目的是:为了增强webpack在项目自动化构建方面的能力。插件最常见的应用场景是:

实现自动在打包之前清除dist目录(上次打包的结果)

自动生成应用所需的html文件

根据不同环境为代码注入类似API地址这种可能变化的部分

拷贝不需要参与打包的资源文件到输出目录

压缩webpack打包完成后输出的文件

自动发布打包结果到服务器实现自动部署

插件机制

webpack每次打包的结果都是直接覆盖到dist目录,打包前,dist目录中可能已经存在上一次打包操作时遗留的文件,再次打包时,只能覆盖掉同名文件,已经移除的资源文件会一直累积在里面,最终导致部署上线时出现多余文件。很明显这是不合理的。

更好的做法当然是:在每次完整打包浅,自动明清理dist目录,每次打包过后,dist目录中就只会存在那些必要的文件。我们可以依赖第三方npm包:clean-webpack-plugin。安装后回到webpack的配置文件中,导入clean-webpack-plugin插件,该插件模块导出CleanWebpackPlugin。

//webpack.config.js
const path = require("path")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
module.exports = {
 entry:"./src/index.js",
 output:{
   filename:"bundle.js",
 },
 mode:"none",
 plugins:[
   new CleanWebpackPlugin()
 ]
}
// src/index.js
console.log("nihao nihao");

打包压缩后的代码:

/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
console.log("nihao nihao");
/******/ })()
;      

我们知道html文件一般都是通过硬编码的方式,单独存放在项目的根目录下,这种方式有两个问题:

项目发布时,我们需要同时发布根目录下的html文件和dist目录中所有打包的打包结果,非常麻烦,而且上线后还要确保html代码中的资源文件正确

如果打包结果输出的目录或文件名发生变化,那么html代码中对应的script标签需要我们手动修改路径

为此webpack也有相关的插件自动生成html,相对于之前写死html文件的方式,自动生成html的优势在于:

html也输出到dist目录中,上线时只需要把dist目录发布出去

html中的script标签是自动引入的,所以可以确保资源文件的路径是正常的

安装后回到配置文件,载入此模块,相对于clean-webpack-plugin需要解构内部成员所不同,html-webpack-olugin插件默认导出的就是插件类型。

对于生成的html文件,页面的title需要修改,许多时候还需要我们自定义页面的一些meta标签和基础dom结构。

const path = require("path")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
 entry:"./src/index.js",
 output:{
   filename:"bundle.js",
 },
 mode:"none",
 plugins:[
   new CleanWebpackPlugin(),
   new HtmlWebpackPlugin({
     title:"hello webpack",
     template:"./src/index.html"
   })
 ]
}

指定要打包的html文件:

html-webpack-olugin除了可以自定义输出文件内容,同时还可以输出多个html文件,通过HtmlWebpackPlugin创建的对象是用于生成index.html文件的,玩去哪可以再创建一个新的实例对象,用于创建额外的html文件。

对于项目中一些不需要参与构建的静态文件如:网站的favicon、robots.txt文件等,但是需要发布在线上。那么可以将这类文件统一放在根目录下的public或static目录中,希望webpack在打包时一并将这个目录下所有的文件复制到输出目录,这种需求可以使用copy-webpack-plugin插件的实现。

plugins:[
 new CleanWebpackPlugin(),
 new HtmlWebpackPlugin({
   title:"hello webpack",
   template:"./src/index.html"
 }),
 new CopyWebpackPlugin([
   "public"//需要拷贝的目录或者路径
 ])
]

参考文章

《webpack原理与实践》 《webpack中文文档》

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部