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处理。
- 改为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;
- 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……的小。
