上节课已经安装好了Webpack到电脑上，这节课就开始一个简单的Demo，让你快速上手和熟悉Webpack的基本用法，学习并作完这节课内容你就可以和朋友小吹一下说：我也会Webpack。
建立基本项目结构
首先进入上节课我们建立的webpack_demo目录（每个人建立的位置不同，可能建立在了D盘或者E盘）。进入后在根目录建立两个文件夹，分别是src文件夹和dist文件夹：
- src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。
- dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。
你可以理解成src是源码文件，dist是我们编译打包好的文件；一个用于开发环境，一个用于生产环境。
编写程序文件：
文件夹建立好后，我们在dist文件下手动建立一个index.html文件，并写入下面的代码。
/dist/index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jspang webpack</title> </head> <body> <div id="title"></div> <script src="./bundle.js"></script> </body> </html> |
这里引入了一个JavaScript的bundle.js文件。这个文件现在还没有，这是用webpack执行打包命令后生产的文件。我们的index.html写好后，接下来在src文件夹下建立entery.js的文件，用于编写我们的JavaScript代码，也是我们的入口文件。
src/entery.js
|
1 |
document.getElementById(‘title‘).innerHTML=‘Hello Webpack‘; |
这个文件的代码很简单，就是在<div id=”title”></div>标签里写入Hello Webpack这句话。
第一次Webpack打包
Webpack其实是可以在终端（命令行）中使用的，基本使用方法如下：
|
1 |
webpack {entry file} {destination for bundled file} |
- {entry file}:入口文件的路径，本文中就是src/entery.js的路径；
- {destination for bundled file}:填写打包后存放的路径。
- 注意：在命令行中是不需要写{ }的。
在我写的例子中，终端执行命令如下：
|
1 |
webpack src/entry.js dist/bundle.js |
执行的结果如下图：
命令执行成功后，会在dist目录下出现bundle.js文件，这时我们就可以在浏览器中预览结果了，网页中显示出了Hello Webpack的信息。
npm install -g live-server 全局设置端口
sudo npm install -g live-server 上面安装报错 就用这个
如果安装用 直接输入 live-server 运行 这行浏览器出现生成好的路径 然后点击 dist 会出现 内容 ok
总结：
从这个Demo中你会了解到webpack的基本用法和使用过程，并会了命令行打包的方法。在这节文章的最后，我还是要强调，你一定要把本节内容在自己的电脑上敲一遍，这样你才能深入了解。
原文地址：https://www.cnblogs.com/jinsuo/p/8352779.html