webpack初探

webfullStack 2020-01-10

webpack是一个模块打包工具

原始:最开始的时候我们做一个页面会通过如下形式编写网页:

html:

<p>这是原始网页</p>
<div id="root"></div>
<script src="./index.js"></script>

index.js:

var dom=document.getElementById(‘root‘);
var header = document.createElement(‘div‘);
header.innerText = ‘header‘;
dom.append(header);

var sidebar = document.createElement(‘div‘);
sidebar.innerText = ‘sidebar‘;
dom.append(sidebar);

var content = document.createElement(‘div‘);
content.innerText = ‘content‘;
dom.append(content);

页面效果:

webpack初探

 这是面向过程的编程方式,当内容越来越多的时候会导致代码越来越多,最终变得不可维护。

进步:这个时候迎来了面向对象的编程方式

html:

<p>这是原始网页</p>
<div id="root"></div>
<script src="./header.js"></script>
<script src="./sidebar.js"></script>
<script src="./content.js"></script>
<script src="./index.js"></script>

header.js:    -- sidebar.js、content.js同理

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

index.js:

var dom=document.getElementById(‘root‘);

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

这样改造之后,使得代码更具有维护性,关于header的代码都可以在header.js中进行维护,相比全部摞在一起,还是方便了不少。但是还是存在以下问题:

  1. 在html中引入多个js文件,页面多了http请求,导致页面加载速度变慢;
  2. 不能在index.js中看出相应的类(Header)对应的文件是哪一个,必须回到html中看;
  3. 查错能力弱,如当js文件加载顺序出错,则很难找出错误所在。

再进步:假如我们能在js中引入相应路径下的模块,就可以解决以上问题

改造一下js:

// ES module 模块引入方式
import Header from ‘./header‘;
import Sidebar from "./sidebar";
import Content from "./content";

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

但是,这样的话浏览器会报错,因为它并不认识import,这个时候webpack就登场了,它认识import,可以把代码做一次“翻译”,让浏览器正确运行。

初始化项目:

npm init demo

安装webpack、webpack-cli:(后面再介绍这俩家伙是什么玩意儿)

npm install webpack webpack-cli --save-dev

然后翻译一下js代码:

npx webpack index.js

这个时候目录中会多出以下文件,需要在html中引入:

webpack初探

 不过,因为我们是用ES module的形式引入模块,所以也需要用ES module的形式导出模块,不然会报错,所以还需要改造一下header.js、sidebar.js、content.js:

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

export default Header;

当然,也可以使用CommonJS、CMD、AMD等引入规范,webpack也能识别。

那么,现在看来webpack好像是一个js翻译器?

其实不然,webpack刚推出的时候,它是一个js的模块打包工具,也就是说它只能require或者import一下js文件到index.js中。现在它可以打包任何形式的文件:如我们经常能在项目中看到如下代码:

var style = require(‘./index.css‘);
import styles from ‘./index.css‘;

当然,它还可以打包png、jpg等文件。

所以,回到开头:webpack是一个模块打包工具

相关推荐