关于javascript:Webpack的入门介绍

1. 问题引入

原始的时候咱们编写网页程序，次要是编写 HTML 文件，接着通过 scrpit 标签引入一个 index.js 文件辅助编写一些业务逻辑和 DOM 操作。若 JS 解决逻辑过多，index.js 文件就会收缩，而且编写逻辑次要以面向过程为主，不好保护和扩大。

接着能够思考一些例如面向对象的思维，将 index.js 我呢见拆分为 header.js,content.js,sidebar.js 文件，外部各自解决负责对象的逻辑，这样保护就绝对简略了，例如 header 的交互有问题只须要关注 header.js 文件了。

//index.js
let dom = document.getElementById('root');

new Header();
new Sidebar();
new Content();

然而这样的话又会引入一些问题：

• HTML 文件须要应用多个 script 标签引入，减慢页面加载速度
• script 标签程序也有要求，例如咱们把 content.js 放在 index.js 上面引入就会报错

依据咱们当初的开发教训，咱们能够通过在 index.js 中通过 ES Moudle 的形式引入其余 JS 文件来防止上述问题：

import Header from './header.js'
...

let dom = ...
...

然而间接这样编写 index.js 会报错，因为浏览器不意识 import 语法，这里就须要借助 webpack 的一个性能。咱们尝试装置一下。

2. 装置 Webpack

2.1 装置 node

首先咱们须要装置 node（蕴含 npm），间接去官网下载即可。

这里倡议能够装置 nvm，这是一个 noode 版本管理工具，当主机须要有多个不同 node 版本切换应用时能够用它~

2.2 初始化环境

首先咱们初始化一个应用 npm 的我的项目：

npm init lesson1

而后进入装置 webpack 包，这里须要装置一个 webpack-cli 帮忙咱们在命令行界面应用 webpack 的性能，装置分为全局装置和我的项目装置，全局装置：

npm install -g webpack webpack-cli

这个形式不举荐，次要是可能产生版本抵触问题，例如两个我的项目用的 webpack 版本不同，那么你就没方法用全局工具解决。

举荐我的项目中装置，这里举荐装置一个固定的版本来进行后续练习，否则有可能呈现一些异样：

npm install webpack@4.16.5 webpack-cli --save-dev

3. Webpack 的应用

而后应用 webpack 翻译 index.js，这里 npx 是 npm 提供的一个命令，帮忙咱们在以后我的项目 node_modules 文件夹中找 webpack：

npx webpack index.js

留神再次之前代码有一些编写事项要留神，首先 index.jsimport 的 JS 文件须要应用 export 导出，另外 DOM 节点须要每个 JS 文件独自获取，没方法从 index.js 中取得：

function Header(){let dom = document.getElementById('root')
    ...
}
export default Header;

接着失常状况下浏览器应该胜利关上翻译后的 index.html 文件（默认应该会翻译到我的项目下 dist 文件夹）

4. Webpack 是什么？

通过上述的应用过程你是不是感觉仿佛 webpack 是相似 Babel 那样的 JS 的解析翻译工具呢？

其实不是的，他在的远远没有这个量级，他也只能解析相似 import 这样的模块交互语句。

这里咱们间接援用官网话来解释：

实质上，webpack 是一个古代 JavaScript 应用程序的动态模块打包器 (module bundler)。当 webpack 解决应用程序时，它会递归地构建一个依赖关系图 (dependency graph)，其中蕴含应用程序须要的每个模块，而后将所有这些模块打包成一个或多个 bundle。

webpack 其实把各个模块打包到一起的一种工具。别的性能和翻译都是没有的。

当然除了 ES Module 这种模块引入标准，还有 CommonJS 模块引入标准（Node 用的），此外还有 CMD，ADM 标准，这些模块标准 Webpack 都是能够辨认的，例如 CommonJS：

const Header = require('/header.js')

导出模块：

function Header(){...}

module.exports = Header;

最早的时候其实 webpack 是一个 JS 的模块打包工具，只能 require 一下 js 文件，当初不仅仅只能打包 JS 文件了，还能够打包诸如 css、png、jpg 等等各种类型的文件。

5. Webpack 的配置文件

这里简略介绍一下配置文件，webpack 的具体如何打包你的我的项目就是依附这个配置文件实现的，例如如何打包图片文件？应用 CommonJS 还是 ES Module？

5.1 新增一个配置文件

实际上 webpack 存在一个默认配置文件的，如果你须要更简单的配置你能够在我的项目下新增一个 webpack.config.js 文件。

接着咱们尝试编写一些根底配置内容：

const path = require('path');

module.export = {
    mode:'development', // 打包模式，开发环境下打包输入文件不会做压缩等解决不便调试
    entry:'./src/index.js' // 入口文件，示意我的项目打包的终点文件
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist') // 打包文件放在哪里，输入文件名是啥
    }
}

接着咱们把之前编写的源代码放到 src 目录下，从新打包就能够了。

5.2 npm scripts 配置

这里用过 React，Vue 等小伙伴会感觉咱们之前如同没有执行过相似 npx webpack 的命令，这是因为咱们应用了 npm scripts，以 npm run 形式来执行：

// package.json
{
    "name":"lesson",
    ...
    "scripts":{"bundle":"webpack"}
}

而后咱们就能够执行 npm run bundle 来代替 npx webpack 了，这里应用 npm run 会主动去 node_modules 外面寻找所以不须要加上 npx~

6. 打包时的 log 阐明

执行 webpack 打包过程中命令行界面会弹出一些 log 信息：

• Hash：本地打包惟一 Hash 值
• Version：打包用 webpack 的版本
• Time：打包耗时（性能优化能够关注）
• Asset：打包输入文件
• Size：输入文件大小
• Chunks：输入文件 ID，有的时候会有多个，因为你的 bundle.js 可能和其余打包输入文件有关联
• Chunk Names：JS 文件对应的名字，这个名字是 webpack 配置文件里 entry 字段定义的 key