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 [email protected] 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