webpack 是什么
打包器
在应用 <font style=color:cornflowerblue>webpack </font> 之前,首先须要明确 <font style=”color:cornflowerblue”>webpack</font> 到底是个什么货色。
简直所有文章(包含官网)中都说 <font style=”color:cornflowerblue”>webpack</font> 是一个 <font style=”color:cornflowerblue”>打包器</font>,用于打包所有资源。
<font style=”color:cornflowerblue”>webpack</font> 的确是一个 <font style=”color:cornflowerblue”> 打包器 </font>,然而对于不晓得 <font style=”color:cornflowerblue”> 打包器 </font> 的敌人来说还是会有些蛊惑。
抛开 <font style=”color:cornflowerblue”>webpack</font> 去看问题实质。
以后时代,前端的作用越来越大,对于写过 <font style=”color:cornflowerblue”>MVC</font> 或者更早的 <font style=”color:cornflowerblue”>JSP</font> 或 <font style=”color:cornflowerblue”>ASP.NET</font> 的敌人可能更有领会,那时代的前端只是作为展现作用。
随着 <font style=”color:cornflowerblue”> 挪动端 </font> 和 <font style=”color:cornflowerblue”>Node.JS</font> 的崛起,前端进入了新的时代。
前端与后端进行了拆散,前端开始独立部署,逐步走入了工程化的步调。
首先对于独立部署,就会有很多的工作须要实现,最容易想到的就是压缩。
<font style=”color:cornflowerblue”>MVC</font> 时代,压缩工作都是由后端进行实现。然而对于曾经独立部署的前端,这项工作只能由前端自行实现。
当然还有逐步更新的 <font style=”color:cornflowerblue”>JS</font>、<font style=”color:cornflowerblue”>CSS</font> 和浏览器兼容性等一系列问题。
这些问题其实能够总结为 <font style=”color:#007FFF”> 可部署环境代码 </font> 和 <font style=”color:#007FFF”> 开发环境代码 </font> 之间的抵触。
那么能不能提供一个桥梁来连贯两种环境代码呢?最好可能提供一个 黑匣子,可能让咱们应用一个命令将 <font style=”color:#007FFF”> 开发环境代码 </font> 编译为 <font style=”color:#007FFF”> 可部署环境代码 </font>
<font style=”color:cornflowerblue”> 打包器 </font> 就是这么一个 黑匣子
<font style=”color:cornflowerblue”> 打包器 </font> 是个 黑匣子 这是对于大部分写业务的程序员来说的,他们只须要实现业务模块。
然而对于我的项目管理者,<font style=”color:cornflowerblue”> 打包器 </font> 就必须把握,毕竟因为前端的特殊性,导致须要本人配置属于本人我的项目的 <font style=”color:cornflowerblue”> 打包器 </font>。所以对于 <font style=”color:cornflowerblue”> 打包器 </font> 的理解也根本属于前端必修课。
webpack
<font style=”color:cornflowerblue”>webpack </font> 就属于一个 <font style=”color:cornflowerblue”> 打包器 </font> 工具。目前市面上也有好多其它 <font style=”color:cornflowerblue”> 打包器 </font> 工具:grunt,gulp,rollup、还有尤大新开发 vite。每一个 <font style=”color:cornflowerblue”> 打包器 </font> 都有各自的优缺点。
不过截止到目前最风行的还是 <font style=”color:cornflowerblue”>webpack</font>。所以在此也是以 <font style=”color:cornflowerblue”>webpack</font> 作为学习、
<font style=”color:cornflowerblue”>webpack</font> 是一个优良的 <font style=”color:#06f”>JavaScript 应用程序</font> 的动态模块打包器,具备高度可配置的劣势,因而也被业界称为最麻烦之一。
后面说过:<font style=”color:cornflowerblue”> 打包器 </font> 就是将 <font style=”color:#007FFF”> 开发环境代码 </font> 进行编译为 <font style=”color:#007FFF”> 可部署环境代码 </font>。
而不同的我的项目对 <font style=”color:#007FFF”> 可部署环境代码 </font> 的要求又不统一。所以 <font style=”color:cornflowerblue”>webpack</font> 并没有提供一个全而大性能,而只是提供了一个 <font style=”color:#06f”>外围引擎 </font>,只负责 <font style=”color:cornflowerblue”>JS</font> 文件的依赖打包,其它性能应用 <font style=”color:#06f”> 插件化</font> 进行配置。
这里说的 <font style=”color:#06f”>插件化 </font> 并不是指的 <font style=”color:cornflowerblue”>webpack</font> 中的 plugin,而是 扩大 的意思,为了 防止和 <font style=”color:cornflowerblue”>webpack</font> 中 plugin 翻译歧义。<font style=”color:cornflowerblue”>webpack</font> 中 plugin 就不做翻译。
个别开发人员应用 <font style=”color:cornflowerblue”>webpack</font> 实现某个性能时,只须要寻找合乎本人需要的 <font style=”color:cornflowerblue”> 插件 </font> 就能够。<font style=”color:cornflowerblue”> 插件 </font> 则由弱小的社区保护。
社区中具备海量的 <font style=”color:cornflowerblue”> 插件 </font>,雷同性能的都有好多。所以,在学习 <font style=”color:cornflowerblue”>webpack</font> 时,
我集体倡议转换一下思维:<font style=”color:#06f”>不要想这个货色是什么,而要想咱们须要什么</font>。依据本人需要去寻找适合的 <font style=”color:cornflowerblue”> 插件 </font>。
通过了这么多年的倒退,大部分性能的 <font style=”color:cornflowerblue”> 插件 </font> 曾经具备了最优解,造成了 <font style=”color:cornflowerblue”> 插件 </font> 固定化。就像当初大部分语言运行环境的 GC 算法 都是 援用跟踪算法 一样。
在上一篇文章中讲到 package.json 文件中的 devDependencies 留了一个问题:什么是开发环境依赖。
其实就能够总结出:<font style=”color:#06f”> 构建工程化依赖环境 </font> 时应用的依赖库。
<font style=”color:#06f”> 构建工程化依赖环境 </font> 包含 <font style=”color:cornflowerblue”> 打包器 </font>、还有 <font style=”color:cornflowerblue”>eslint</font> 和 <font style=”color:cornflowerblue”> 单元测试库 </font>
webpack 根本应用
webpack 装置
在之前曾经装置了 webpack@5.24.0 依赖库,
在这里只须要装置 <font style=”color:#f03d3d”>webpack-cli </font> 即可,<font style=”color:#f03d3d”>webpack-cli </font> 相似一个繁难的客户端,用来以 <font style=”color:cornflowerblue”>webpack </font> 连贯对应服务。
如果不装置 <font style=”color:#f03d3d”>webpack-cli</font> 执行 webpack
命令时会提醒装置 <font style=”color:#f03d3d”>webpack-cli</font>
yarn add -D webpack-cli@4.5.0 // 装置到 devDependencies 依赖。
在 package.json 文件 scripts 属性中退出 build:webpack
命令
此时执行 yarn build
就会执行 webpack
命令
尽管会因为没有配置项而失败,但 <font style=”color:cornflowerblue”>webpack</font> 胜利运行了。
<font style=”color:cornflowerblue”>webpack </font> 能够间接应用命令行参数打包文件,不过在此就不赘述,有趣味的敌人能够参考官网
webpack.config.js
在根目录中创立一个 webpack.config.js,此文件是 <font style=”color:cornflowerblue”>webpack</font> 配置项文件
webpack.config.js 文件必须抛出一个 模块 ,这个 模块 能够是一个 Object,也能够是一个返回值为 Object 的函数,<font style=”color:cornflowerblue”>webpack</font> 属性就配置在这个Object 中
<font style=”color:cornflowerblue”>webpack </font> 执行时会读取 webpack.config.js 文件模块,依据此 Object 中的配置信息进行打包编译
根目录 webpack.config.js 文件名称是一个 约定文件名称。
在不指定配置文件状况下,<font style=”color:cornflowerblue”>webpack </font> 会读取根目录 webpack.config.js 文件。
当然也能够应用参数指定配置文件,也举荐这样做,参数指令能够更改配置文件的目录和名称
工作目录
接下来创立 /src 目录、/src/index.js 文件
在应用 <font style=”color:cornflowerblue”>vue-cli</font>、<font style=”color:cornflowerblue”>react-cli</font> 时都会具备一个 /src 目录,这是一个 约定的工作目录。
我的项目中的代码文件都寄存此目录下。
当然此目录名称能够随便设置,只不过约定为 /src。
/src/index.js 文件,是一个 <font style=”color:cornflowerblue”>entry(入口)</font> 文件。
<font style=”color:cornflowerblue”> 打包器 </font> 作为一个将 <font style=”color:#007FFF”> 开发环境代码 </font> 编译 为 <font style=”color:#007FFF”> 可部署环境代码 </font> 的桥梁,那么就必须 至多领有一个 <font style=”color:cornflowerblue”>entry(开发环境代码)</font> 和一个 <font style=”color:#007FFF”>output(可部署环境代码)</font>
/src/index.js 就作为这么一个 <font style=”color:cornflowerblue”>entry(入口)</font> 文件
index.js 文件名称也是约定名称。
wbepack 简略配置
entry、output
既然 <font style=”color:cornflowerblue”> 打包器 </font> 必须有 <font style=”color:cornflowerblue”>entry(入口)</font> 和 <font style=”color:cornflowerblue”>output(输入)</font>,那么就由这两个属性开始。
<font style=”color:cornflowerblue”>webpack </font> 中就是应用 entry 和 output 作为两者的属性名称,这两个属性都能够灵便配置。
const path = require('path')
const modules = {
// 入口文件
// 字符串模式
entry:path.join(__dirname, 'src/index.js'),
// 对象模式
// entry:{// 'index':path.join(__dirname, 'src/index.js')
// },
// 输入文件
// 字符串模式
// output:path.join(__dirname, 'dist/[name].js')
// 对象模式
output:{
// 输入文件的目录地址
path:path.join(__dirname, 'dist'),
// 输入文件名称,contenthash 代表一种缓存,只有文件更改才会更新 hash 值,从新打包
filename: '[name]_[contenthash].js'
}
}
// 应用 node.js 的导出,将配置进行导出
module.exports = modules
-
entry:入口文件。
属性可设置为:String、Object、Array
属性值为 String:间接设置一个入口文件地址
属性值为 Object:对入口文件进行具体设置和 能够设置多个入口文件
属性值为 Array:设置多个入口文件
<font style=”color:cornflowerblue”>webpack </font> 容许设置多个 <font style=”color:cornflowerblue”>entry(入口)</font> 文件,打包编译出多个文件。个别用于 <font style=”color:cornflowerblue”> 多页面配置 </font>
至于多页面开发配置,就不在此赘述,有趣味的敌人能够去查阅下 参考资料,单页面程序间接设置 String 即可
-
output:输入文件。
属性可设置为:String、Object
属性值为 String:间接设置一个输入文件地址
属性值为 Object:输入文件地址和文件名称具体设置
<font style=”color:cornflowerblue”>webpack</font> 在设置 output.filename 时,容许应用 [name] 保留 entry 属性设置的文件名称。
entry 为 String 时,[name] 为文件名称
entry 为 Object 时,[name] 为对象的 key
output 属性中的 [contenthash],是 <font style=”color:cornflowerblue”>webpack</font> 提供的一种打包缓存的机制。<font style=”color:cornflowerblue”>webpack</font> 会为打包编译生成一个 hash 值。只有更改源文件后才会从新打包编译,生成新的 hash。缓存机制个别只会在 <font style=”color:cornflowerblue”> 生产模式(production)</font> 应用。
<font style=”color:cornflowerblue”>webpack</font> 还提供了两个属性 [hash]、[chunkhash] 设置缓存,具体区别请参考:webpack 中 hash、chunkhash、contenthash 区别
:__dirname 属性是 <font style=”color:cornflowerblue”>Node.JS</font> 根底库中属性,示意以后文件的绝对路径。等同于path.dirname()。
webpack.json 文件中应用了 <font style=”color:cornflowerblue”>Node.JS</font> 根底库(require(‘path’)) 获取文件相对地址,更精确的保障文件目录的完整性。当然也能够只应用绝对地址,不过不举荐
此时应用 yarn build
命令就能够执行 <font style=”color:cornflowerblue”>webpack</font>。最终会在根目录创立 /dist,并在 /dist 目录下生成一个 .js 文件。
文件中就是 /src/index.js 中的内容
以上就是一个最简略的 <font style=”color:cornflowerblue”>webpack</font> 配置,只是将 <font style=”color:cornflowerblue”>entry(入口)</font> 文件打包编译到 <font style=”color:cornflowerblue”>output(输入)</font>。
不过 <font style=”color:cornflowerblue”>webpack</font> 自身是一个弱小的 <font style=”color:#06f”>JavaScript 应用程序</font>
接下来做小测试,在 /src 目录中创立 index2.js,并在 index.js 中导入
此时再进行yarn build
,/dist 目录下会主动再创立一个 .js 文件,这个 .js 文件就是这次打包的输入问题。
从文件中具备 index.js 和 index2.js 内容
打包后文件会进行压缩,并且代码会多出许多 <font style=”color:cornflowerblue”>webpack</font> 构建的代码。
代码压缩是因为 <font style=”color:cornflowerblue”>webpack</font> 默认应用的是 <font style=”color:cornflowerblue”> 生产模式(production)</font>。
如果想要不压缩代码能够在 webpack.json 文件中增加一个 mode:’development’ 属性,至于这两个属性意思下一篇再具体解说。
这就是 <font style=”color:cornflowerblue”>webpack</font> 的弱小性能之一。<font style=”color:cornflowerblue”>webpack</font> 在打包解决文件时,会递归的构建一个 依赖图(dependency graph),依据这个 依赖图 将所有应用到的 JS 模块 进行打包。
如果在 index.js 将引入 index2.js 的代码正文或者删除,那么 index2.js 文件内容便不会被打包。有趣味的敌人能够自行测试。
plugins
在后面说过,<font style=”color:cornflowerblue”>webpack </font> 只提供了一个 <font style=”color:#06f”>外围引擎 </font>。大部分性能应用 <font style=”color:#06f”> 插件化</font> 进行治理
<font style=”color:cornflowerblue”>webpack </font> 配置项提供了一个 plugins 属性,该属性是一个 Array 类型,用于设置 <font style=”color:cornflowerblue”>plugin</font>。
<font style=”color:cornflowerblue”>webpack </font> 在执行时会程序执行 plugins 中的 <font style=”color:cornflowerblue”>plugin</font>。
const modules = {plugins:[],
}
// 应用 node.js 的导出,将配置进行导出
module.exports = modules
<font style=”color:cornflowerblue”>webpack </font> 默认只是一个 <font style=”color:#06f”>JavaScript 应用程序 </font> <font style=”color:cornflowerblue”> 打包器 </font>,所以不会解决CSS、Image、TypeScript 等 非 js 模块,
<font style=”color:cornflowerblue”>webpack</font> 提供了一个 loader 属性解决 非 JS 模块 (将 非 JS 模块 转换为 JS 模块),而 plugins 则为 <font style=”color:cornflowerblue”>webpack</font> 打包时提供其余扩大。两者联合了促成了 <font style=”color:cornflowerblue”>webpack</font> 的 <font style=”color:#06f”> 插件化</font>,使 <font style=”color:cornflowerblue”>webpack</font> 能够高度扩大。至于两者的分工和不同,之后会缓缓理解。
<font style=”color:cornflowerblue”>webpack</font> 提供了自定义 <font style=”color:cornflowerblue”>plugin </font> 的办法,具体编写规定,有趣味的敌人能够去参考 官网
html-webpack-plugin
家喻户晓,运行在浏览器本源是 HTML 文件,HTML 作为 JS 文件的承载容器,哪怕将所有业务逻辑都交给 JS(Document 类型) 实现,仍然须要一个 HTML 容器承载,那么就须要提供一个提供的 HTML 文件的性能
<font style=”color:cornflowerblue”>webpack </font> 中 html-webpack-plugin 就是实现这个性能的
HTML 容器也是一个 非 JS 模块,那么为什么应用 <font style=”color:cornflowerblue”>plugin</font> 解决 而不应用 <font style=”color:cornflowerblue”>loader</font> 呢?我集体的了解为 HTML 的提供是作为一个 JS 容器存在,而并非要转换为 JS 模块 解决
<font style=”color:cornflowerblue”>webpack</font> 社区中 以 -plugin 为单词为后缀的库,都为 <font style=”color:cornflowerblue”>plugin</font>。而以 -loader 单词为后缀的库,都为 <font style=”color:cornflowerblue”>loader</font>。这也是一种约定规定。
yarn add -D html-webpack-plugin@5.2.0
装置之后,须要在 webpack 文件中进行援用
const HtmlWebpackPlugin = require('html-webpack-plugin')
const modules = {
plugins: [new HtmlWebpackPlugin()
]
}
// 应用 node.js 的导出,将配置进行导出
module.exports = modules
此时执行yarn build
,/dist 目录便会多出一个 HTML 文件,此 HTML 还援用此次打包的 JS 文件。
在浏览器中也能够运行此 HTML,开发者控制台中会打印 JS 文件中的 Console 语句。
实在我的项目中,HTML 容器也要设置很多货色。例如:Title、Meta 或者 icon 等。
并且在 <font style=”color:cornflowerblue”>vue-cli</font> 中,会有一个 HTML 模板文件。在此 HTML 文件增加信息,并且以此文件进行作为容器。
这些信息都是由 <font style=”color:#f03d3d”>html-webpack-plugin</font> 结构参数提供的。
plugins: [
new HtmlWebpackPlugin({
// HTML 的题目,// template 的 title 优先级大于以后数据
title:'my-cli',
// 输入的 html 文件名称
filename:'index.html',
// 本地 HTML 模板文件地址
template:path.join(__dirname, 'src/index.html'),
// 援用 JS 文件的目录门路
publicPath:'./',
// 援用 JS 文件的地位
// true 或者 body 将打包后的 js 脚本放入 body 元素下,head 则将脚本放到中
// 默认为 true
inject:'body',
// 加载 js 形式,值为 defer/blocking
// 默认为 blocking, 如果设置了 defer,则在 js 援用标签上加上此属性,进行异步加载
scriptLoading:'blocking',
// 是否进行缓存,默认为 true,在开发环境能够设置成 false
cache:false,
// 增加 mate 属性
meta:{}})
]
- title:HTML 的题目,
属性可设置为:String
此属性在设置 template 属性后会生效
- filename:输入的 HTML 文件名称,
属性可设置为:String
默认值为:index.html
- template:本地 HTML 模板文件地址。
属性可设置为:String
应用 HTML 模板文件时,会将 HTML 模板文件内容一成不变的 copy。
例如上面 HTML 模板援用了 <font style=”color:#f03d3d”>jquery</font>,打包后的 HTML 仍然存在 <font style=”color:#f03d3d”>jquery</font>。
- publicPath:援用 JS 文件的目录门路。
属性可设置为:String
例如设置门路为 ./,那么在 HTML 文件援用 JS 时就会为
<script src="./main_XXXXXX.js"></script>
。此属性提供了更灵便的项目管理,能够将 HTML 文件和 JS 文件打包到不同目录。
- inject:援用编译后 JS 文件的地位。
属性可设置为:Boolean、head、body
属性值为 false:代表不援用编译后 JS 文件
属性值为 true 和 body:在 body 元素最初援用编译后 JS 文件。举荐
属性值为 head:在 head 元素中援用编译后 JS 文件,不举荐
默认值为 true
- scriptLoading:设置加载 JS 的办法
属性可设置为:blocking、defer
默认值为 blocking
具体 blocking、defer 差异可参考 defer 和 async 的区别
- cache:是否缓存 HTML 文件。
属性可设置为:Boolean
默认值为 true
<font style=”color:cornflowerblue”> 开发环境(development)</font> 时能够设置为 false
- meta:设置 meta 属性
在此列举了 <font style=”color:#f03d3d”>html-webpack-plugin</font> 次要局部属性,更多属性能够在 npm 中查看
template 属性须要是一个本地的 html 门路。
clean-webpack-plugin
之前每次打包编译都会在 /dist 目录创立 .js 文件,长此以往,/dist 就会具备好多无用的文件
/dist 目录往往心愿它是一个洁净的目录,目录内只具备最新一次的打包生成的文件。这样就能够间接以此目录进行公布。
针对这个需要,社区有大佬开发了 clean-webpack-plugin。
<font style=”color:#f03d3d”>clean-webpack-plugin</font> 会在每次打包编译时,清空输入目录。
这个求 — clean-webpack-plugin
yarn add -D clean-webpack-plugin@3.0.0
将此库间接增加到 plugins 属性即可
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
plugins: [new CleanWebpackPlugin()
]
此时执行yarn build
/dist 目录就只剩下本地打包后果。
<font style=”color:#f03d3d”>clean-webpack-plugin</font> 库应用时为:const {CleanWebpackPlugin} =
与 <font style=”color:#f03d3d”>html-webpack-plugin</font> 库:const HtmlWebpackPlugin = 不同。
这是因为 <font style=”color:#f03d3d”>html-webpack-plugin</font> 应用了默认导出:export default,
而 <font style=”color:#f03d3d”>clean-webpack-plugin</font> 导出的是指定类型:CleanWebpackPlugin
默认导出形式 能够应用任意变量名称进行导入:const H = require(‘html-webpack-plugin’)。
<font style=”color:#f03d3d”>clean-webpack-plugin</font> 也能够从构造函数中传参进行自定义设置
new CleanWebpackPlugin({
// 是否伪装删除文件
// 如果为 false 则代表实在删除,如果为 true,则代表不删除
dry:false,
// 是否将删除日志打印到控制台 默认为 false
verbose: true,
// 容许保留本次打包的文件
// true 为容许,false 为不容许,保留本次打包后果,也就是会删除本次打包的文件
// 默认为 true
protectWebpackAssets:true,
// 每次打包之前删除匹配的文件
cleanOnceBeforeBuildPatterns:["*.html"],
// 每次打包之后删除匹配的文件
cleanAfterEveryBuildPatterns:["*.js"],
})
- dry:是否伪装删除文件,官网文档的形容是:Simulate the removal of files。
属性可设置为:Boolean
此属性当为 true 时,则不清空 /dist 目录;当为 false 时,会清空 /dist 目录
默认值:false
- verbose:是否将删除日志打印到控制台
属性可设置为:Boolean
默认值:false
- protectWebpackAssets:是否保留本次打包的文件
属性可设置为:Boolean
属性值为 false 时,本次打包文件也会被革除掉
默认值:true
- cleanOnceBeforeBuildPatterns:设置打包之前删除的文件
属性可设置为:Array
此属性相似一个钩子,在打包执行之前,删除此属性匹配到的文件
默认值:[‘**/*’]
- cleanAfterEveryBuildPatterns:设置打包之后删除的文件
属性可设置为:Array
此属性与 cleanOnceBeforeBuildPatterns 相似,触发机会是打包执行结束后
默认值:[]
应用 <font style=”color:#f03d3d”>clean-webpack-plugin</font> 时其实不须要配置属性,默认就曾经足够应用。
测试 <font style=”color:#f03d3d”>clean-webpack-plugin </font> 时,须要每次都批改 index.js 文件数据,因为 output 设置缓存,如果不批改源文件,不会从新打包
总结
- <font style=”color:cornflowerblue”> 打包器 </font> 将 <font style=”color:#007FFF”> 开发环境代码 </font> 编译 为 <font style=”color:#007FFF”> 可部署环境代码 </font> 的 “编译器”
- <font style=”color:cornflowerblue”>webpack</font> 运行在 <font style=”color:cornflowerblue”>Node.JS</font> 环境中,所以写的 webpack 配置项 其实是 <font style=”color:#007FFF”>Node.JS</font>。
- <font style=”color:cornflowerblue”>webpack</font> 配置文件须要抛出一个 模块,导出模块必须为 Object 或返回 Object 的函数
- <font style=”color:cornflowerblue”>webpack</font> 只提供一个 <font style=”color:#06f”>外围引擎 </font>,而其它性能应用 <font style=”color:#06f”> 插件化</font> 形式治理
- <font style=”color:cornflowerblue”>webpack</font> 是一个 <font style=”color:#06f”>JavaScript 应用程序 </font>,默认只反对 JS 模块 的打包,对于 非 JS 模块 须要应用 loader 转换为 JS 模块
- <font style=”color:cornflowerblue”> 打包器 </font> 不肯定非要应用 <font style=”color:cornflowerblue”>Node.JS</font>,也能够应用 <font style=”color:cornflowerblue”>JAVA</font>、<font style=”color:cornflowerblue”>.NET</font> 等任何一门语言
- <font style=”color:cornflowerblue”> 打包器 </font> 其实就是 IO 操作,将 <font style=”color:cornflowerblue”>entry(入口)</font> 文件数据读取并通过一系列操作最终写入到 <font style=”color:cornflowerblue”>output(输入)</font> 文件
如果此篇对您有所帮忙,在此求一个 star。我的项目地址:OrcasTeam/my-cli
本文参考
- webpack 官网
- webpack 中 hash、chunkhash、contenthash 区别
本文依赖
- webpack@5.24.0
- webpack-cli@4.5.0
- html-webpack-plugin@5.2.0
- clean-webpack-plugin@3.0.0
package.json
{
"name": "my-cli",
"version": "1.0.0",
"main": "index.js",
"author": "mowenjinzhao<yanzhangshuai@126.com>",
"license": "MIT",
"devDependencies": {
"clean-webpack-plugin": "3.0.0",
"html-webpack-plugin": "5.2.0",
"webpack": "5.24.0",
"webpack-cli": "4.5.0"
},
"dependencies": {"jquery": "3.5.1"},
"scripts": {
"start": "node",
"build": "webpack --config webpack.config.js"
}
}
webpack.config.js
const path = require('path')
const modules = {
// 入口文件
// 字符串模式
entry:path.join(__dirname, 'src/index.js'),
// 对象模式
// entry:{// 'index':path.join(__dirname, 'src/index.js')
// },
// 输入文件
// 字符串模式
// output:path.join(__dirname, 'dist/[name].js')
// 对象模式
output:{
// 输入文件的目录地址
path:path.join(__dirname, 'dist'),
// 输入文件名称,contenthash 代表一种缓存,只有文件更改才会更新 hash 值,从新打包
filename: '[name]_[contenthash].js'
},
plugins: [
new HtmlWebpackPlugin({
// HTML 的题目,// template 的 title 优先级大于以后数据
title: 'my-cli',
// 输入的 html 文件名称
filename: 'index.html',
// 本地 HTML 模板文件地址
template: path.join(config.root, 'src/index.html'),
// 援用 JS 文件的目录门路
publicPath: './',
// 援用 JS 文件的地位
// true 或者 body 将打包后的 js 脚本放入 body 元素下,head 则将脚本放到中
// 默认为 true
inject: 'body',
// 加载 js 形式,值为 defer/blocking
// 默认为 blocking, 如果设置了 defer,则在 js 援用标签上加上此属性,进行异步加载
scriptLoading: 'blocking',
// 是否进行缓存,默认为 true,在开发环境能够设置成 false
cache: false,
// 增加 mate 属性
meta: {}}),
new CleanWebpackPlugin({
// 是否伪装删除文件
// 如果为 false 则代表实在删除,如果为 true,则代表不删除
dry: false,
// 是否将删除日志打印到控制台 默认为 false
verbose: true,
// 容许保留本次打包的文件
// true 为容许,false 为不容许,保留本次打包后果,也就是会删除本次打包的文件
// 默认为 true
protectWebpackAssets: true,
// 每次打包之前删除匹配的文件
cleanOnceBeforeBuildPatterns: ['**/*'],
// 每次打包之后删除匹配的文件
cleanAfterEveryBuildPatterns:["*.js"],
})
]
}
// 应用 node.js 的导出,将配置进行导出
module.exports = modules