学习完本篇文章，我希望您能够掌握以下几点：
webpack是什么
webpack有什么有点
webpack.config.js配置项中，出口（entry）、入口（output）、插件（plugins）的基本作用和配置方法。
html-webpack-plugin、 clean-webpack-plugin 插件的作用和使用方法。
统一说明，本文中所用到的npm包管理工具均采用淘宝镜像（cnpm），原因你懂得。
webpack版本基于3.0版本，本文中具体是3.8.1版本。
什么是webpack
webpack是一个用以对现代Javascript应用程序模块打包工具，它和gulp、grunt的不同之处在于webpack提供了一整套前端模块化开发的解决法案；webpack把资源作为模块来处理，这里的资源不止于javascript,还包括html、css、图片、字体等等。
webpack的优点
代码分割（code splitting），在开发过程中，webpack允许我们将代码按照不同职能分割成不同模块进行开发，并且在加载中可以按需加载，减少加载时间。
插件化，webpack提供了丰富的插件接口，通过配置不同的插件，可以实现我们想要的效果，非常灵活。
装载机制，webpack中，我们可以通过提供的loaders预处理项目文件，包括js、css、html、image等。
高性能，webpack使用异步I/O流加载模块，并具有多个缓存级别，在渐进式编译中，速度表现很棒。
开发方便，weback提供sourceMap和sourceUrl,方便开发者定位调试，并且通过中间件可以实现项目的热更新，这个在开发中很有作用。
webpack使用
1、初始化， 新建一个文件夹，取名叫webpackDemo,通过控制台或者git bash定位到当前文件下面，执行命令：
然后一路enter,初始化后，会在该文件夹下面生成一个package.json文件，然后，再次在命令行内执行：
2、项目结构搭建， 在webpackDemo文件夹下：
新建src目录，用于存放开发相关的资源文件；
在src目录下新建js、css、views等不同类型的文件夹，以此存放相对应的开发文件。
新建dist目录，用于存放打包后生成的文件；
和src目录下一样，新建js、css、views等文件夹，存放打包后的文件（案例中，先新建一个js文件夹，因为我们现在只用js来体验webpack）。
新建index.html文件。
新建webpack.config.js,这是webpack默认关于打包相关的配置文件。
新建。babelrc文件，放置babel相关配置，和webpack.config.js一样，babel的配置文件名称，也是固定的，即：。babelrc
注意： webpack默认会读取webpack.config.js 中的相关配置，如果更换其他名字，webpack默认是找不到配置信息的。（当然我们也可以去指定webpack读取的配置文件，在现阶段，我们暂不考虑）;
最终的项目结构如下：
1、代码编写，打开根目录下的index.html,引入webpack最后编译的的js文件，我么定义js名称叫做bundle.js。
2、在src/js文件夹下面，新建app.js，作为webpack编译的入口文件，并添加一个方法，在控制台打印出hello world
3、接下来，我们打开webpack.config.js，给webapck编译指定规则：
1、配置路径用path.resolve（）处理，是为了确保路径是从根目录开始绝对定位到指定位置，webpack3.0要求我们在配置路径相关的时候使用绝对路径；
2、path模块是nodejs内置的处理路径相关的模块。
现在让我们打开命令行，执行webpack编译
编译执行完成后，控制台输出以下则表示执行成功。
此时查看dist/js目录，会发现新增了一个bundle.js的文件，在浏览器中打开index.html，再打开控制台，成功输出hello world。
看到这里，估计有人要打人了，就这玩意有啥用，浪费我青春！我要输出的hello world要你这么麻烦干啥。额！骚年，先放下你手上的砖头，有话好好说。
大名鼎鼎的webpack当然不止这就完了，接下来，让我们一步一步真正开始认识webpack。
现在，我们来看一下webpack配置文件中的output选项的相关配置，细心的你也许发现，我们最终生成的的bundle.js是我们设定好的，每次打包后生成的名字是不会改变的，但是在实际项目中，为了确保代码更改前后无冲突以及版本回退等一系列问题，每次打包后的包文件，我们会给他打上一个独一无二的标记，用以区分版本，这又是怎么实现的呢？
实际上，webpack在打包编译的时候，会把不同模块的代码分别指定一个chunkhash值，最后整体打包后的js会生成一个hash值 （需要注意chunkhash和hash是不一样的），我们只需要在output配置项中给filename属性一个填写hash的占位符，这样在每次编译的时候，就会生成带有hash值得js文件：
再次执行编译，我们会发现，新生成的文件已经带有hash值了：
上面我们已经动态生成了带有不同hash值得js了，那么问题又来了，既然每次生成的js文件都不一样，我们如何去加载生成的js呢，要知道，在index.html里面，我们写的是bundle.js啊！
如果您觉得本文的内容对您的学习有所帮助：
关键字：
DIV