关于webpack:从零学脚手架二初识webpack

webpack是什么

打包器

在应用 webpack 之前，首先须要明确 webpack 到底是个什么货色。

简直所有文章（包含官网）中都说webpack是一个 打包器 ，用于打包所有资源。

webpack的确是一个 打包器 ，然而对于不晓得打包器的敌人来说还是会有些蛊惑。

抛开 webpack 去看问题实质。

以后时代，前端的作用越来越大，对于写过MVC或者更早的JSP或ASP.NET的敌人可能更有领会，那时代的前端只是作为展现作用。

随着 挪动端和 Node.JS 的崛起，前端进入了新的时代。

前端与后端进行了拆散，前端开始独立部署，逐步走入了工程化的步调。

首先对于独立部署，就会有很多的工作须要实现，最容易想到的就是压缩。

MVC时代，压缩工作都是由后端进行实现。然而对于曾经独立部署的前端，这项工作只能由前端自行实现。

当然还有逐步更新的JS、CSS和浏览器兼容性等一系列问题。

这些问题其实能够总结为 可部署环境代码 和 开发环境代码 之间的抵触。

那么能不能提供一个桥梁来连贯两种环境代码呢？最好可能提供一个 黑匣子 ，可能让咱们应用一个命令将 开发环境代码 编译为 可部署环境代码

打包器 就是这么一个 黑匣子

打包器是个 黑匣子 这是对于大部分写业务的程序员来说的，他们只须要实现业务模块。

然而对于我的项目管理者，打包器 就必须把握，毕竟因为前端的特殊性，导致须要本人配置属于本人我的项目的 打包器 。所以对于 打包器 的理解也根本属于前端必修课。

webpack

webpack 就属于一个 打包器 工具。目前市面上也有好多其它 打包器 工具：grunt，gulp，rollup、还有尤大新开发vite。每一个 打包器 都有各自的优缺点。

不过截止到目前最风行的还是webpack 。所以在此也是以webpack作为学习、

webpack是一个优良的 JavaScript应用程序 的动态模块打包器，具备高度可配置的劣势，因而也被业界称为最麻烦之一。

后面说过：打包器 就是将 开发环境代码 进行编译为 可部署环境代码 。

而不同的我的项目对 可部署环境代码 的要求又不统一。所以 webpack 并没有提供一个全而大性能，而只是提供了一个 外围引擎，只负责 JS 文件的依赖打包，其它性能应用 插件化 进行配置。

这里说的 插件化 并不是指的 webpack 中的 plugin ，而是扩大的意思，为了防止和 webpack 中 plugin 翻译歧义。 webpack 中 plugin 就不做翻译。

个别开发人员应用 webpack 实现某个性能时，只须要寻找合乎本人需要的插件就能够。插件则由弱小的社区保护。

社区中具备海量的 插件 ，雷同性能的都有好多。所以，在学习 webpack 时，

我集体倡议转换一下思维： 不要想这个货色是什么，而要想咱们须要什么 。依据本人需要去寻找适合的 插件。

通过了这么多年的倒退，大部分性能的 插件 曾经具备了最优解，造成了 插件 固定化。就像当初大部分语言运行环境的 GC算法 都是 援用跟踪算法 一样。

在上一篇文章中讲到 package.json 文件中的 devDependencies 留了一个问题：什么是开发环境依赖。

其实就能够总结出：构建工程化依赖环境 时应用的依赖库。

构建工程化依赖环境 包含 打包器、还有 eslint 和 单元测试库

webpack 根本应用

webpack装置

在之前曾经装置了 webpack@5.24.0 依赖库，

在这里只须要装置 webpack-cli 即可，webpack-cli 相似一个繁难的客户端，用来以 webpack 连贯对应服务。

如果不装置 webpack-cli 执行 webpack 命令时会提醒装置 webpack-cli

yarn add -D webpack-cli@4.5.0 // 装置到devDependencies依赖。

在 package.json 文件 scripts 属性中退出 build：webpack 命令

此时执行 yarn build 就会执行 webpack 命令

尽管会因为没有配置项而失败，但 webpack 胜利运行了。

webpack 能够间接应用命令行参数打包文件，不过在此就不赘述，有趣味的敌人能够参考官网

webpack.config.js

在根目录中创立一个 webpack.config.js，此文件是 webpack 配置项文件

webpack.config.js 文件必须抛出一个模块，这个模块能够是一个 Object ，也能够是一个返回值为 Object 的函数， webpack 属性就配置在这个Object中

webpack 执行时会读取 webpack.config.js 文件模块，依据此 Object 中的配置信息进行打包编译

根目录 webpack.config.js 文件名称是一个 约定文件名称。

在不指定配置文件状况下，webpack 会读取根目录 webpack.config.js 文件。

当然也能够应用参数指定配置文件，也举荐这样做，参数指令能够更改配置文件的目录和名称

工作目录

接下来创立 /src 目录、 /src/index.js 文件

在应用vue-cli、react-cli时都会具备一个 /src 目录，这是一个 约定的工作目录。

我的项目中的代码文件都寄存此目录下。

当然此目录名称能够随便设置，只不过约定为 /src。

/src/index.js 文件，是一个 entry（入口） 文件。

打包器 作为一个将 开发环境代码 编译为 可部署环境代码 的桥梁，那么就必须至多领有一个 entry（开发环境代码） 和一个 output（可部署环境代码）

/src/index.js 就作为这么一个 entry（入口）文件

index.js 文件名称也是约定名称。

wbepack简略配置

entry、output

既然 打包器 必须有 entry（入口） 和 output（输入） ，那么就由这两个属性开始。

webpack 中就是应用 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 ：设置多个入口文件
webpack 容许设置多个 entry（入口） 文件，打包编译出多个文件。个别用于 多页面配置
至于多页面开发配置，就不在此赘述，有趣味的敌人能够去查阅下参考资料，单页面程序间接设置 String 即可
output：输入文件。
属性可设置为：String 、Object
属性值为 String ：间接设置一个输入文件地址
属性值为 Object ：输入文件地址和文件名称具体设置
webpack在设置 output.filename 时，容许应用 [name] 保留 entry 属性设置的文件名称。
entry 为 String 时， [name] 为文件名称
entry 为 Object 时， [name] 为对象的 key
output 属性中的 [contenthash] ，是 webpack 提供的一种打包缓存的机制。 webpack 会为打包编译生成一个 hash 值。只有更改源文件后才会从新打包编译，生成新的 hash 。缓存机制个别只会在 生产模式（production） 应用。
webpack还提供了两个属性 [hash]、[chunkhash] 设置缓存，具体区别请参考：webpack中hash、chunkhash、contenthash区别

：__dirname 属性是 Node.JS 根底库中属性，示意以后文件的绝对路径。等同于path.dirname()。
webpack.json 文件中应用了 Node.JS 根底库（require('path')） 获取文件相对地址，更精确的保障文件目录的完整性。当然也能够只应用绝对地址，不过不举荐

此时应用yarn build命令就能够执行 webpack 。最终会在根目录创立 /dist，并在 /dist 目录下生成一个 .js 文件。

文件中就是 /src/index.js 中的内容

以上就是一个最简略的 webpack 配置，只是将 entry（入口） 文件打包编译到 output（输入）。

不过 webpack 自身是一个弱小的 JavaScript应用程序

接下来做小测试，在 /src 目录中创立 index2.js ，并在 index.js 中导入

此时再进行yarn build，/dist 目录下会主动再创立一个 .js 文件，这个 .js 文件就是这次打包的输入问题。

从文件中具备 index.js 和 index2.js 内容

打包后文件会进行压缩，并且代码会多出许多 webpack 构建的代码。
代码压缩是因为 webpack 默认应用的是 生产模式（production）。
如果想要不压缩代码能够在 webpack.json 文件中增加一个 mode:'development' 属性，至于这两个属性意思下一篇再具体解说。

这就是webpack 的弱小性能之一。 webpack 在打包解决文件时，会递归的构建一个 依赖图（dependency graph） ，依据这个 依赖图 将所有应用到的 JS模块 进行打包。

如果在 index.js 将引入 index2.js 的代码正文或者删除，那么 index2.js 文件内容便不会被打包。有趣味的敌人能够自行测试。

plugins

在后面说过，webpack 只提供了一个 外围引擎。大部分性能应用 插件化 进行治理

webpack 配置项提供了一个 plugins 属性，该属性是一个 Array 类型，用于设置 plugin。

webpack 在执行时会程序执行 plugins 中的 plugin 。

const modules = {    plugins:[    ],}//  应用node.js的导出，将配置进行导出module.exports = modules

webpack 默认只是一个 JavaScript应用程序 打包器，所以不会解决CSS、Image、TypeScript等 非js模块，
webpack提供了一个 loader 属性解决 非JS模块（将非JS模块转换为JS模块），而 plugins 则为 webpack 打包时提供其余扩大。两者联合了促成了 webpack的 插件化 ，使 webpack 能够高度扩大。至于两者的分工和不同，之后会缓缓理解。
webpack 提供了自定义 plugin 的办法，具体编写规定，有趣味的敌人能够去参考官网

html-webpack-plugin

家喻户晓，运行在浏览器本源是 HTML 文件，HTML 作为 JS 文件的承载容器，哪怕将所有业务逻辑都交给 JS（Document类型） 实现，仍然须要一个 HTML 容器承载，那么就须要提供一个提供的 HTML 文件的性能

webpack 中 html-webpack-plugin 就是实现这个性能的

HTML 容器也是一个 非JS模块，那么为什么应用 plugin解决而不应用loader呢？我集体的了解为 HTML 的提供是作为一个 JS 容器存在，而并非要转换为 JS模块 解决
webpack社区中以 -plugin 为单词为后缀的库，都为 plugin。而以 -loader 单词为后缀的库，都为 loader。这也是一种约定规定。

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 等。

并且在vue-cli中，会有一个 HTML 模板文件。在此 HTML 文件增加信息，并且以此文件进行作为容器。

这些信息都是由 html-webpack-plugin 结构参数提供的。

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 模板援用了jquery，打包后的 HTML 仍然存在jquery。
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
开发环境（development）时能够设置为 false
meta：设置 meta 属性

在此列举了html-webpack-plugin次要局部属性，更多属性能够在npm中查看

template 属性须要是一个本地的html门路。

clean-webpack-plugin

之前每次打包编译都会在 /dist 目录创立 .js 文件，长此以往， /dist 就会具备好多无用的文件

/dist 目录往往心愿它是一个洁净的目录，目录内只具备最新一次的打包生成的文件。这样就能够间接以此目录进行公布。

针对这个需要，社区有大佬开发了clean-webpack-plugin。

clean-webpack-plugin 会在每次打包编译时，清空输入目录。

这个求 --- 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 目录就只剩下本地打包后果。

clean-webpack-plugin库应用时为：const { CleanWebpackPlugin } =
与html-webpack-plugin库： const HtmlWebpackPlugin = 不同。
这是因为html-webpack-plugin应用了默认导出： export default ，
而clean-webpack-plugin导出的是指定类型： CleanWebpackPlugin
默认导出形式能够应用任意变量名称进行导入：const H = require('html-webpack-plugin')。

clean-webpack-plugin也能够从构造函数中传参进行自定义设置

 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 相似，触发机会是打包执行结束后
默认值： []

应用clean-webpack-plugin时其实不须要配置属性，默认就曾经足够应用。

测试 clean-webpack-plugin 时，须要每次都批改 index.js 文件数据，因为 output 设置缓存，如果不批改源文件，不会从新打包

总结

打包器将开发环境代码 编译为可部署环境代码的 “编译器”
webpack运行在Node.JS环境中，所以写的 webpack配置项 其实是Node.JS 。
webpack配置文件须要抛出一个模块，导出模块必须为 Object 或返回 Object 的函数
webpack只提供一个 外围引擎 ，而其它性能应用 插件化 形式治理
webpack是一个 JavaScript应用程序 ，默认只反对 JS模块 的打包，对于 非JS模块 须要应用 loader 转换为 JS模块
打包器不肯定非要应用 Node.JS，也能够应用JAVA、.NET等任何一门语言
打包器其实就是 IO 操作，将entry（入口）文件数据读取并通过一系列操作最终写入到output（输入）文件

如果此篇对您有所帮忙，在此求一个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