一、安装webpack【本次使用局部安装】

1、npm install -g webpack【全局安装】

2、npm install --save-dev webpack【安装到你的项目目录】


二、创建package.json文件

1、npm init【自动创建package.json文件】【包括当前项目的依赖模块，自定义的脚本任务等等】


安装成功后文件内容如下:

{
    "name": "webpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "dependencies": {
    "webpack": "^3.4.1"
    },
    "devDependencies": {},
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "huangdongjiang",
    "license": "ISC"
}

三、创建项目结构【结构图如下】

1、在项目根目录创建app文件夹【存放原始数据和我们将写的JavaScript模块】和public文件夹【存放准备给浏览器读取的数据（包括使用webpack生成的打包后的js文件以及一个index.html文件）】

2、在app文件夹创建main.js文件【入口文件】和Greeter.js文件【模块文件】

3、在public文件夹创建index.html静态文件，引入加载打包后的js文件bundle.js


四、各个文件脚本

1、Greeter.js文件【每一个模块都通过module.exports 初始值为一个空对象 {}】,并且返回这个模块

2、mian.js文件【通过require引入各个模块,require() 返回的是 module.exports】


五、通过webpack打包【基础打包法】

1、最基础打包方法: 在终端输入以下命令如下  webpack app/main.js public/bundle.js【webpack是命令,app/main.js是入口文件,public/bundle.js打包生成的文件存储到public文件夹中】【注意: 如果你的webpack没有进行全局安装，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址, node_modules/.bin/webpack app/main.js public/bundle.js,webpack非全局安装的情况】

2、打包成功后通过浏览器浏览public文件夹中的index.html文件,可以看到Greeter中的信息被渲染出来


六、通过配置文件使用webpack【配置文件也是一个简单的JavaScript模块,把所有构建相关的信息放在里面】

1、在根目录创建配置文件webpack.config.js,配置信息包含入口文件路径和存放打包后文件的地方的路径【注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。】

2、在终端输入webpack(非全局安装需使用node_modules/.bin/webpack)进行打包


七、通过快捷名称执行打包【npm通过引导任务执行】

1、通过npm start命令代替第六点的繁琐命令【在package.json中对npm的脚本部分进行相关设置即可,注意是在scripts的属性下配置，package.json中的脚本部分已经默认在命令前添加了node_modules/.bin路径，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。】

2、npm start命令是一个特殊的脚本名称, 它的特殊性表现在，在命令行中使用npm start就可以执行相关命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build


八、生成Source Maps（使调试更容易）【在webpack的配置文件中配置source maps，需要配置devtool】

1、source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度；

2、cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；

3、eval-source-map 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项；【在学习阶段以及在小到中性的项目上】

4、heap-module-eval-source-map 这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；


九、使用webpack构件本地服务

1、通过命令npm install --save-dev webpack-dev-server安装

2、contenBase: