1.问题引入

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

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

//index.jslet 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