webpack简单体验

有这样一个网页:在index.html中引入外部js文件

<script src="./index.js"></script>

在index.js中会写全部的js,如果页面比较复杂,那么index.js中的代码会非常多,不利于修改,查找起来也比较麻烦。为了代码能更清晰,更好编写,我们使用面向对象的方式来写js。

将js文件按页面内容分割。index.js,header.js,content.js……

<script src="./header.js"></script>
<script src="./content.js"></script>
……
<script src="./index.js"></script>

header.js:

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

index.js:

new Header();
new Content();
……

但是这样写:

  • 会使页面加载多个js文件,影响加载速度。
  • 如果在html文件中,js文件加载顺序出错:
<script src="./header.js"></script>
……
<script src="./index.js"></script>
<script src="./content.js"></script>

上面这样会报错,因为执行index.js的new Content();时,content.js文件还没有加载。

  • 在index.js中,看不出Header,Content……的位置,只有到index.html中去找。

为了解决这些问题,达到index.html只加载少量,最好只有一个文件,然后在index.js中能知道其他js文件位置。我们可以选择使用ES模块和webpack处理。

  1. 改为ES模块的写法,使其他文件的路径清晰
    index.js
//ES模块引入方式,需要webpack翻译浏览器才能识别
import Header from './header.js';
import Content from './content.js';
import Siber from './siber.js';

new Header();
new Content();
new Siber();

header.js

function Header(){
	var dom=document.getElementById('root');
	var header=document.createElement('div');
	header.innerText='header';
	dom.appendChild(header);
}
//ES模块导出方式
export default Header;
  1. wepack使用
    在代码文件夹内打开命令行
npm init -y

获得package.json

安装webpack webpack-cli

npm install webpack webpack-cli --save-dev

使用webpack将ES模块写法翻译为浏览器能识别的写法

npx webpack index.js

然后会出现dist文件夹,里面有main.js文件,就是浏览器可以识别的文件。

在index.html中只需引入<script src="./dist/main.js"></script>(注意路径)就行了,index.js,header.js……都不用引入了。而且webpack打包后的main文件大小也会比index.js,header.js……的小。

posted @ 2020-02-13 11:04  ellenxx  阅读(125)  评论(0编辑  收藏  举报