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;

2. 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……的小。