快速学会Webpack基础

一、什么是webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

简单来说就是可以帮助我们对代码进行一个打包，可以把原来的零碎代码信息，打包成一个个意思明确的模块或者是封装成一个整体，来帮助我们更好地进行开发。
参见webpack官方文档：https://www.webpackjs.com/concepts/

二、为什么要使用webpack

1.JavaScript原生编写时期

我们知道在最初我们写前端的代码时通过JavaScript脚本来封装一些逻辑，那么我们来举例，原生的js实现一个dom节点的渲染。
在index.html中我们希望显示出header、sidebar、content三部分内容。

<div id="root"></div>

于是我们开始在javascript中来实现这个逻辑：
index.js

var dom = document.getElementById('root');
var header = document.createElement('div');
var sidebar = document.createElement('div');
var content = document.createElement('div');
header.innerText = 'header';
sidebar.innerText = 'sidebar';
content.innerText = 'content';
dom.append(header);
dom.append(sidebar);
dom.append(content);

然后最重要的一步，在index.html中引入该js文件：<script src="./index.js></script>
咱们在浏览器端可以得到如下的效果：

这是我们使用原生的js来操作，最明显的一个问题就是代码量过大逻辑比较零散，这十分影响程序员去维护，如果一个div的内容需要修改，则要上下翻找，然后再去修改，并且还不一定能找的全，于是面向对象就开始进军前端的代码编写，下面来分析面向对象的实现方法。

2.面向对象实现逻辑

有了面向对象的思想我们就要思考，我们需要在页面显示三个div区域，那么三个区域是有着自己的属性特点的，那就应该把他们放在一起去，这样在index.js中只需要去new一个对象就好了，实现了我们代码零散的问题，同时因为是分为三个对象，那就可以放在三个js文件里，这样每个js代码量就减少了很多，降低了阅读的复杂性，下面我们就来实现它吧！
首先是header.js

function Header(){
	var dom = document.getElementById('root');
	var header = document.createElement('div');
	header.innerText = 'header';
	dom.append(header);
}

sidebar.js

function Sidebar() {
	var dom = document.getElementById('root');
	var sidebar = document.createElement('div');
	sidebar.innerText = 'sidebar';
	dom.append(sidebar);
}

content.js

function Content() {
	var dom = document.getElementById('root');
	var content = document.createElement('div');
	content.innerText = 'content';
	dom.append(content);
}

这样写我们就简单了，只需要在index.js中去new这三个对象即可：

new Header();
new SideBar();
new Content();

当然要注意在index.html中去引入这四个js文件，而且index.js必须在最下面，因为index.js里的内容需要调用其余三个对象。

<script src="./header.js></script>
<script src="./sidebar.js></script>
<script src="./content.js></script>
<script src="./index.js></script>

同样我们运行代码在浏览器端可以得到一模一样的效果，这里不再演示。这样写的好处明显，代码一下子就清爽很多，每个div专门在自己的js文件中处理，复杂的index.js减少了很多繁琐的工作，仅仅是new了三个对象就解决了问题。
但是这样写也有他的缺点，毕竟这里还是没有涉及到我们的webpack内容呢。所以这里来分析下它的缺点：

1. index.html引入了四个js文件，发送的请求增加；
2. 在index.html中js文件的引用顺序不能出错，否则报错后很难定位到是由于js引用顺序出错导致；
3. index.js中new的三个对象不能清楚来自哪一个文件，需要查阅index.html；

所以我们看到，这样去使用面向对象的方法也有一定的局限性，当代码量较大，逻辑较为复杂时，这个局限性就很能体现出来了。所以有人就在想，能不能使用import或者其它方式在需要使用他的文件中引入他。于是webpack的作用就出来了。下一节就开始讲解webpack的使用方法了。

三、webpack模块化文件

我们开始改写四个js文件：（下面使用了commonjs地格式，也可以使用import from——export default 的格式）
index.js

var Header = require('./header.js');
var SideBar = require('./sidebar.js');
var Content = require('./content.js');

new Header();
new SideBar();
new Content();

header.js

function Header(){
	var dom = document.getElementById('root');
	var header = document.createElement('div');
	header.innerText = 'header';
	dom.append(header);
}

module.exports = Header;

sidebar.js

function Sidebar() {
	var dom = document.getElementById('root');
	var sidebar = document.createElement('div');
	sidebar.innerText = 'sidebar';
	dom.append(sidebar);
}

module.exports = Sidebar;

content.js

function Content() {
	var dom = document.getElementById('root');
	var content = document.createElement('div');
	content.innerText = 'content';
	dom.append(content);
}

module.exports = Content;

正如上面代码写的内容，我们把三个对象文件作为模块导出出去，然后在index.js中去引用它，再使用它，这样index.js中只需要引入一个js文件了，这样是不是解决了我们之前讲的三个问题呢？

但是这样写代码就能直接在浏览器运行吗？答案当然是不能。浏览器无法识别这种语法格式，自然就不能解析出来渲染在浏览器端了。所以我们就要开始使用webpack工具了。
这里先初始化项目下，安装nodejs，然后在项目目录下使用命令：npm init我们就会在目录中得到一个package.json文件文件，里面写了我们项目中所依赖的包的信息。
然后使用npm开始安装webpack和webpack-clinpm install webpack webpack-cli -D;安装完毕后输入：npx webpack -v可以查看版本。
接下来我们建立一个webpack.config.js的配置文件，主要用来配置翻译我们之前改写的js文件。

const path = require('path');

module.exports = {
	mode: 'development', // development模式表示暴露bundle.js文件，多行的形式显示。production则表示不暴露
	entry: './src/index.js', // 让webpack去src目录下的index.js翻译
	module: {},
	output: {
		filename: 'bundle.js', // 把翻译后的文件取名为bundle.js
		path: path.resolve(__dirname, 'dist') //__dirname表示项目目录，这个配置表示在项目目录下创建一个dist文件夹存放翻译后的bundle.js文件
	}
}

这样配置之后只需要在命令行中运行npx webpack命令即可翻译，就可以在dist中找到bundle.js文件，然后再在index.html中引入它即可：<script src="./bundle.js"></script>
当然如果觉得npx命令使用不习惯，我们可以在package.json中配置下：

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js", 
  "scripts": {
    "bundle": "webpack" // 配置指令，这样只需要使用npm run bundle即可
  },
  ...
}

翻译后可以得到文件：

然后我们在浏览器中去打开他效果一模一样：

这样就完成了webpack的初步使用，蛮简单的，这里可以看出，webpack帮助我们翻译了我们写的一些模块文件，可以简单地去这么理解他。