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