webpack初探

Posted 金钩梨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack初探相关的知识,希望对你有一定的参考价值。

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);

页面效果:

 

 

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

 

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

 

 

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中引入:

 

 不过,因为我们是用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是一个模块打包工具

以上是关于webpack初探的主要内容,如果未能解决你的问题,请参考以下文章

webpack初探

第1303期webpack4初探

初探webpack4--简单理解打包优化

webpack 构建多页面应用初探

leaflet-webpack 入门开发系列一初探篇(附源码下载)

openlayers5-webpack 入门开发系列一初探篇(附源码下载)