（0）webpack学习笔记—哈喽~沃德

官方概念

webpack是一个现代javascript应用程序的模块打包器（module bundler），他会递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的bundle 通常只有一个，由浏览器进行加载

开始学习webpack并在浏览器输出‘哈喽~沃德’

0.安装webpack

npm install webpack -g  //全局安装
//webpack -v 查看版本

1.初始化

npm init 
//配置项可以直接回车略过

2.认识项目结构

就像在gulp中一样src为开发环境dist为生产环境

3.必要文件

在dist中新建一个index.html文件，打开文件写入一个id为rty的任意标签,然后再写个script标签引用文件为当前文件夹下bundle.js文件

<p id="rty"></p>
<script src="./bundle.js"></script>

这时候你会发现 dist中根本就没有bundle这个文件，我们的目的就是打一个bundle.js进来 现在我们在src中新建一个index.js写入以下代码：

document.getElementById('rty').innerHTML='哈喽~沃德'

4.hello world

现在我们执行webpack命令开始打包

webpack src/index.js   dist/bundle.js

没有红字报错说明打包成功了

现在打开dist中的index.html 看到‘哈喽~沃德’了

哈喽~沃德

持续更新中......