什么是模块打包工具

认识到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准确的定义,他就是一个模块打包工具。



posted @ 2019-04-14 13:54  wzndkj  阅读(447)  评论(0编辑  收藏  举报