Webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
概要
从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：
入口(entry)
输出(output)
loader
插件(plugins)
本文分五个部分：安装，创建项目，配置文件，开发文件以及问题汇总
一、安装
在安装Webpack前，本地需要支持node.js，从官网上下载LTS版本，然后按照步骤安装下载，其中有默认安装地址，我选择了自定义安装地址。这是菜鸟教程里的步骤，可以供参考：
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
使用语句：npm install cnpm -g --registry=https://registry.npm.taobao.org
接着全局安装webpack
cnpm install webpack -g / npm install webpack -g
由于现在安装的是4.0的版本，所以还要加装一个CLI : cnpm install webpack-cli -g / npm install webpack-cli -g
此处可能会出现一个问题：'NODE' 不是内部或外部命令，也不是可运行的程序 或批处理文件（问题1）‘webpack'不是内部或外部命令，也不是可运行的程序 或批处理文件（问题2）
二、创建项目
1、cmd打开，一般打开默认C盘，这是要 cd\ 再 d: 然后 打开你的文件 cd webpack_demo (如果没有还未创建，可以使用 mkdir webpack_demo && cd webpack_demo )
2、初始化npm
npm init
3、本地安装webpack
npm install webpack webpack-cli --save-dev
4、安装loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。
npm install css-loader style-loader
4、创建runoob1.js，runoob2.js,index.html,style.css,
5、打包文件 webpack runoob1.js -o bundle.js
6、直接打开index.html