在 上一节中，我们安装了webpack，这节我们就开始一个简单的Demo。
1、建立基本项目结构
首先进入上一节建立的webpack_demo文件夹。
进入后在webpack_demo的根目录建立两个文件夹，分别是src文件夹和dist文件夹：
> mkdir src //创建src
> mkdir dist //创建dist
- src文件夹：用来存放
开发环境中我们编写的js代码。 - dist文件夹：webpack将src里的东西打包后形成的文件，存放在这里。
dist里的文件都是供浏览器读取的文件，即位于生产环境。
可以理解成：src是源码文件，dist是我们编译打包好的文件；src用于开发环境，dist用于生产环境。
2、编写程序文件
（1）我们在dist文件下手动建立一个index.html文件，并写入下面的代码。
/dist/index.html
<!DOCTYPE html>
<html>
<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>my webpack</title>
</head>
<body>
<div id="title"></div>
<script src="./bundle.js"></script>
</body>
</html>
这里引入了一个JavaScript的bundle.js文件。这个文件现在还没有，这是用webpack执行打包命令后生产的文件。
（2）接下来在src文件夹下建立entry.js的文件，用于编写我们的JavaScript代码，也是我们的入口文件。
src/entry.js
document.getElementById('title').innerHTML='Hello Webpack';
3、第一次Webpack打包
（1）默认输出
webpack4.0默认把：src/index.js文件，打包到dist/main.js。所以如果你没有配置webpack.config.js，且将entry.js文件名改为index.js，那么直接在终端输入如下语句，在dist文件夹中会出现main.js文件：
> webpack
（2）自定义输出
webpack <entry file> -o <destination for bundled file>
- < entry file>:入口文件的路径，本文中就是src/entry.js的路径；
- < destination for bundled file>: 填写打包后存放的路径。
例如：
我们要将src/entry.js文件，打包至dist/bundle.js，可以在终端输入：
> webpack src/entry.js -o dist/bundle.js
命令执行成功后，会在dist目录下出现bundle.js文件，这时我们就可以在浏览器中预览结果了，网页中显示出了Hello Webpack的信息。
扫一扫
237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
