什麼是子產品打包工具

認識到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的規範

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;      

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準确的定義，他就是一個子產品打包工具。