什么是模块打包工具

认识到webpack可以认识import,可以翻译index.js。可能我们就认为webpack就是js的一个翻译器。划重点，，，不是的。。。

 

webpack实际上称不上是一个翻译器，因为呢，他只认识import这样的语句，其它高级的js语法，他一概不认。所以把webpack看作一个js翻译器，实际上是高看了他，我们去搜索webpack的定义，是这样的

webpack is a module bundler

webpack实际上是一个模块打包工具

 

index.js

import Header from './header';
import Sidebar from './sidebar';
import Content from './content';

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

header.js

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

siderbar.js

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

export default Sidebar;

content.js

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

 

我们看之前这个文件，Header是什么呢，是一个模块，Sidebar和Content一样，也是一个模块。webpack的作用实际上可以把这些模块打包到一起的这样一个工具。所以他叫做模块打包工具。所以一看到import，就应该想到后面是一个模块。

 

我们在写代码的时候，不仅碰到过ES Moudule这样的模块规范，还有commonJS(node里面最常用的模块规范)，CMD,AMD。

这样的模块规范，webpack一样可以正确的识别。举个例子，我们把index.js的方式改成commonJS的方式。

 

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


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

 

commonJS是require这样的导入方式，如果这样导入的话，相应的导出模块也要有相应的变化。不再是是export default的方式了。要用commonJS的规范

 

header.js

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

sidebar.js

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


module.exports = Sidebar;

content.js

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

 

这样就可以了，module.exports是commonJS的导出方式，webpack是一个模块打包工具，他可以识别出任何模块引入的语法。

 

所以到这，就可以很明显的知道webpack不是翻译器，他是一个模块打包工具。最早的时候，webpack推出的时候，他是一个js的模块打包工具。随着webpack的发展，他已经不仅仅是js文件了。他还可以打包其它任何形式的模块文件。比如在react,vue的框架里面

var style = require('./index.css');
或
import style from './index.css';

他还可以打包jpg,png这样的图片文件，他可以打包任何你想打包的内容，所以webpack准确的定义，他就是一个模块打包工具。