- 建立一个demo
- 进入建立的webpack_demo目录下创建一个dist文件夹（用于生产）和src文件夹（用于开发环境）
- src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。
- dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。
- 编写程序文件：
- dist文件下手动建立一个index.html文件
/dist/index.html
- dist文件下手动建立一个index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div id="title"></div>
<script src="./bundle.js"></script>
</body>
</html>
解释：这里引入bundle.js文件，等会用webpack可以生成在src下面建立一个entry.js 的入口文件
/src/entry.js下：
document.getElementById(‘title’).innerHTML=’Hello Webpack’;
- 然后就是进行webpack打包：
- 在vs code里面的终端中输入 ： webpack src/entry.js dist/bundle.js 执行成功后会在dist目录下生成bundle.js文件，在浏览器中显示Hello Webpack 的信息
- 也可能是这样进行打包webpack src/entry.js –output dist/bundle.js –mode development
会在dist目录下生成bundle.js文件
全局安装live-server:
npm install -g live-server
安装完毕后在终端执行 live-server 就会在浏览器中显示Hello Webpack的信息