1、建立项目文件夹(如：webpackDemo),使用npm init命令自动创建package.json文件
npm init
输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，如果不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。
2、package.json文件准备好后，安装Webpack作为依赖包。
// 安装Webpack
npm install --save-dev webpack
3、回到之前的空文件夹(如：webpackDemo)，并在里面创建两个文件夹。
- app文件夹
-
public文件夹
——app文件夹用来存放原始数据和我们将写的JavaScript模块
—— public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）
4、接下来我们再创建三个文件:
-
index.html--放在public文件夹中; -
Greeter.js-- 放在app文件夹中; -
main.js-- 放在app文件夹中;
此时项目结构如下图所示
5、我们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js）。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack简单示例</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
6、我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块：
// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
7、main.js文件中我们写入下述代码，用以把Greeter模块返回的节点插入页面。
//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
正式使用Webpack
webpack可以在终端中使用，在基本的使用方法如下：
# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}
指定入口文件后，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址，继续上面的例子，在终端中输入如下命令。
# webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js
结果如下
可以看出webpack同时编译了main.js 和Greeter,js,现在可以在浏览器打开index.html
已经成功的使用Webpack打包了一个文件了。不过在终端中进行复杂的操作，Webpack的还有另一种更常见的使用方法。
通过配置文件来使用Webpack
继续上面的例子来说明如何写这个配置文件。
在当前练习文件夹的根目录下新建一个名为
- webpack.config.js的文件
我们在其中写入如下所示的简单配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
有了这个配置之后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项，
示例如下：
又学会了一种使用Webpack的方法，这种方法不用管那烦人的命令行参数。我们还可以连webpack(非全局安装需使用node_modules/.bin/webpack)这条命令都可以不用，继续看下文。
更快捷的执行打包任务
在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下。
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.10.0"
}
}
注：package.json中的script会安装一定顺序寻找命令对应位置，本地node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，都不需要写前面那指明详细的路径了。
npm 的 start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用 npm start 就可以执行其对于的命令，如果对应的此脚本名称不是 start ，想要在命令行中运行时，需要这样用 npm run {script name} 如 npm run build，我们在命令行中输入npm start试试，输出结果如下：
现在只需要使用
npm start 就可以打包文件了，有没有觉得 webpack 也不过如此嘛，不过不要太小瞧 webpack，要充分发挥其强大的功能我们需要修改配置文件的其它选项，一项项来看。
使用webpack构建本地服务器
想不想让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果。
其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建。
可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。
npm install --save-dev webpack-dev-server
devserver作为webpack配置选项中的一项，以下是它的一些配置选项，更多配置可参考这里
devserver的配置选项：
-
contentBase——默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录） -
port——设置默认监听端口，如果省略，默认为”8080“ -
inline——设置为true，当源文件改变时会自动刷新页面 -
historyApiFallback——在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
把这些命令加到webpack的配置文件中，现在的配置文件webpack.config.js如下所示
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
在package.json中的scripts对象中添加如下命令，用以开启本地服务器：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},
在终端中输入npm run server即可在本地的8080端口查看结果。(会自动打开浏览器，如果8080被占用，可能会是其他端口)
